Check Internet Connection Status With HTML,CSS & JavaScript

Grapdroad Wednesday, August 03, 2022


Hello, guys hope you all are well. Today, we are going to learn Check Internet Connection Status With HTML,CSS & JavaScript.

We use the navigator.onLine property. This property returns a boolean value. If the browser is connected to the internet it returns true or else it returns false.


Check Internet Connection Status With HTML,CSS & JavaScript | Video



 

HTML 
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Check Network Status using JavaScript | Grapdroad</title>

    <!-- custom CSS -->
    <link rel="stylesheet" href="style.css" />

    <!-- Font Awesome cdn -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div class="wrapper">
        <div class="content">
            <div class="icon">
                
            </div>

            <div class="details">
                <span>  </span>
            </div>
        </div>
    </div>
    
    <script src="main.js"></script>
  </body>
</html>
CSS 
  
 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: rgb(190,190,180);
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: 20px 10px 20px 20px;
    border-radius: 10px;
    width: 18em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 10px rgb(29,243,29);
    border: .1em solid rgb(29,243,29);
}

.wrapper .content{
    display: flex;
    align-items: center;
}

.wrapper .content .icon{
    font-size: 1.8em;
    background-color: rgb(29,243,29); 
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
}

.wrapper .content .details{
    margin-left: 2em;
}


.wrapper .content .details span{
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: 2px;
}
JavaScript 
 
      const wrapper =document.querySelector(".wrapper"),
      content = wrapper.querySelector(".content"),
      online_icon = wrapper.querySelector(".icon"),
      title = wrapper.querySelector("span");


function contentOnline()
{
  title.innerText = "You are Online";
  online_icon.innerHTML = '';
  online_icon.style = "background-color: rgb(29,243,29); "
  wrapper.style = "box-shadow: 0 0 10px rgb(29,243,29); border: .1em solid rgb(29,243,29);"
};

function contentOffline()
{
  title.innerText = "You are Offline";
  online_icon.innerHTML = '';
  online_icon.style = "background-color: rgb(243,72,29); "
  wrapper.style = "box-shadow: 0 0 10px rgb(243,72,29); border: .1em solid rgb(243,72,29);"
};

if(window.navigator.onLine)
{
  contentOnline();
}

else
{
  contentOffline();
}

window.addEventListener("online", contentOnline);
window.addEventListener("offline", contentOffline);


 

Tags
Grapdroad

Posted by Grapdroad

Post a Comment

0 Comments