WiFi Detector Using HTML CSS and JavaScript | Detect Internet Connectivity

WiFi Detector Using HTML CSS and JavaScript | Detect Internet Connectivity

Hey friends, today in this blog you’ll learn how to create a WiFi Detector Using HTML CSS and JavaScript. What this project does exactly is it detects your online activity like when you turn on your WiFi or cellular data for example, this project then implements a online.navigator that then add a text variable telling you when you’re offline or online. In this project there’s also a nice animation for when you want to close the toast notification, at the top left corner you’ll see a WiFi icon, at the top right corner you’ll also see a close icon for those who have seen some toast notification.

JavaScript codes used in this project

var x
navigator.online

Download Code Files

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WiFi Detector Using HTML CSS and JavaScript</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <input type="checkbox" name="network" id="check">
    <div class="box">
      <span class="toast"><i class="fa fa-wifi"></i>
        <div class="text">Check Your Connection Easily</div>
        <label for="check"><i class="fa fa-close"></i></label>
      </span>

      <p id="demo"></p>
      <button onclick="myFunction()">Check Conncectivity</button>
    </div>
  </div>

      <script src="script.js"></script>

</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  background: #2c3e50;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container .box{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 380px;
  height: 109px;
  background: #fff;
  border-radius: 8px;
  border-left: 3px solid;
  border-color: #ddd;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
  opacity: 1;
  pointer-events: auto;
}
.box .toast i.fa-wifi{
  width: 40px;
  height: 40px;
  background: #ddd;
  color: #34495e;
  text-align: center;
  font-size: 18px;
  line-height: 40px;
  border-radius: 50px;
  margin-top: 20px;
}
.box .toast{
  padding-left: 20px;
}
.box .toast{
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
}
.box .toast i.fa-close{
  background: #ddd;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50px;
  margin-top: 10px;
  font-size: 18px;
  color: #2c3e50;
  cursor: pointer;
}
.box .toast .text{
  margin-top: 15px;
  font-weight: 500;
}
.box button{
  width: 200px;
  height: 30px;
  border: none;
  outline: none;
  background: #34495e;
  font-size: 15px;
  color: #fff;
  margin-left: 80px;
  cursor: pointer;
  position: relative;
  bottom: 10px;
  transition: all 0.3s ease-in-out;
}
.box button:hover{
  background: #2c3e50;
}
.box #demo{
  color: #34495e;
  position: relative;
  bottom: 20px;
  left: 82px;
  transition: all 0.3s ease-in-out;
}
#check:checked ~ .box{
  animation: animate 0.9s ease-in-out;
  animation-delay: 0.3s;
}
@keyframes animate {
  100%{
    left: -900px;
    opacity: 0;
    pointer-events: none;
  }
}
input[type="checkbox"]{
  display: none;
}

JAVASCRIPT CODE

function myFunction() {
  var x = "You are online now " + navigator.onLine;
  document.getElementById("demo").innerHTML = x;
}

WiFi Detector Using HTML CSS and JavaScript | Detect Internet Connectivity

Creative Tutorials

Post a Comment

Post a Comment

Contact Form