Hey friends,
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
<!--Created by CodingPorium,2021. Visit https://youtube.com/c/codingporium for more tutorials like this -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Online Connectivity Detector using JS | CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: "poppins";
}
body{
background-color: #1cbd3f;
color:black;
display:flex;
justify-content: center;
align-items:center;
height:100vh;
font-family: poppins;
font-size:10px;
}
.container{
width:90%;
max-width:500px;
margin:0 auto;
background-color:white;
border-radius:8px;
padding:3rem;
display: flex;
flex-direction: column;
}
.container p{
font-size:2rem;
font-weight:300;
line-height: 3rem;
text-align: justify;
}
button{
padding:2rem;
font-size: 2rem;
font-family: poppins;
background-color: #1cbd3f;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
transition: 0.3s;
outline:none;
}
button:hover{
opacity:0.7
}
</style>
<body>
<div class="container">
<button onclick="myFunction()">Internet Status</button>
<p id="result"></p>
</div>
</body>
<script>
function myFunction(){
var x = "Browser Online Status : " + navigator.onLine;
document.getElementById("result").innerHTML = x;
}
</script>
</html>
Post a Comment