Javascript Check Internet Connection

Web Design & Web Development

Demo

Sponsored links

 

Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Check Internet Connection</title>
    <link rel="stylesheet" type="text/css" href="https://demo.plantpot.works/assets/css/normalize.css">
    <link rel="stylesheet" href="https://use.typekit.net/opg3wle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="container">
      <div id="msgbox" class="msgbox">
        <div class="status">
          <div class="ic-online">
            <svg width="50px" height="50px" viewBox="0 0 50 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>ic_online</title>
                <desc>Created with Sketch.</desc>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g transform="translate(-708.000000, -179.000000)" fill="#F2761E" fill-rule="nonzero">
                        <g id="ic_online" transform="translate(708.000000, 179.000000)">
                            <path d="M25,0.09 C15.55,0.09 6.85,3.39 0,8.89 L3.11,12 C9.15,7.28 16.76,4.46 25,4.46 C33.24,4.46 40.85,7.28 46.89,12 L50,8.89 C43.15,3.39 34.45,0.09 25,0.09 Z" id="XMLID_433_"></path>
                            <path d="M6.73,15.62 L9.86,18.75 C14.14,15.7 19.36,13.9 25,13.9 C30.64,13.9 35.86,15.7 40.14,18.75 L43.27,15.62 C38.17,11.8 31.85,9.54 25,9.54 C18.15,9.54 11.83,11.8 6.73,15.62 Z" id="XMLID_432_"></path>
                            <path d="M13.51,22.4 L16.68,25.57 C19.13,24.16 21.97,23.35 24.99,23.35 C28.01,23.35 30.85,24.16 33.3,25.57 L36.47,22.4 C33.16,20.24 29.22,18.98 24.98,18.98 C20.74,18.98 16.82,20.24 13.51,22.4 Z" id="XMLID_431_"></path>
                            <circle id="XMLID_430_" cx="25" cy="32.69" r="4.42"></circle>
                        </g>
                    </g>
                </g>
            </svg>
          </div>
          <div class="ic-offline">
            <svg width="49px" height="50px" viewBox="0 0 49 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>ic_offline</title>
                <desc>Created with Sketch.</desc>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g transform="translate(-677.000000, -375.000000)" fill="#3D3935" fill-rule="nonzero">
                        <g id="ic_offline" transform="translate(677.000000, 375.000000)">
                            <path d="M48.5,11.5833333 C41.5418793,6.23508508 33.0258628,3.30861893 24.25,3.25 C21.3395057,3.25519341 18.4390022,3.59067334 15.6041667,4.25 L37.125,25.75 L48.5,11.5833333 Z M34.75,28.7083333 L6.0625,0 L3.41666667,2.66666667 L7.6875,6.95833333 C4.95008114,8.18858712 2.36932028,9.74124 3.33066907e-16,11.5833333 L24.2291667,41.7708333 L24.25,41.7916667 L24.2708333,41.7708333 L32.3958333,31.6458333 L39.3125,38.5625 L41.9583333,35.9166667 L34.75,28.7083333 Z" id="ic_signal_wifi_off_24px"></path>
                        </g>
                    </g>
                </g>
            </svg>
          </div>
          <div id="text" class="text"></div>
        </div>
        <button id="btn-close" class="btn-close">
          <svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>ic_close</title>
              <desc>Created with Sketch.</desc>
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g transform="translate(-1168.000000, -172.000000)" fill="#CCCCCC" fill-rule="nonzero">
                      <g id="ic_close" transform="translate(1168.000000, 172.000000)">
                          <path d="M25,-1.01579445e-05 C11.1928813,-1.01579445e-05 1.77635684e-15,11.1928813 1.77635684e-15,25 C1.77635684e-15,38.8071187 11.1928813,50 25,50 C38.8071187,50 50.0000102,38.8071187 50.0000102,25 C50.0059771,18.3677572 47.3739755,12.005436 42.6842698,7.31573023 C37.994564,2.62602447 31.6322428,-0.00597709122 25,-1.01579445e-05 Z M37.5,33.975 L33.975,37.5 L25,28.525 L16.025,37.5 L12.5,33.975 L21.475,25 L12.5,16.025 L16.025,12.5 L25,21.475 L33.975,12.5 L37.5,16.025 L28.525,25 L37.5,33.975 Z" id="ic_cancel_24px"></path>
                      </g>
                  </g>
              </g>
          </svg>
        </button>
      </div>
    </div>
  </body>
</html>

CSS

@charset "utf-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
body {
  background-color: #fcf6e1;
  font-family: futura-pt, sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
}
.msgbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 240px;
  height: 60px;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
  background-color: #fff;
}
.msgbox.online {
  border-left: 5px solid #f2761e;
}
.msgbox.offline {
  border-left: 5px solid #ccc;
}
.status {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic-online {
  display: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background-color: #fcf6e1;
}
.ic-online svg {
  width: 20px;
  height: 20px;
}
.ic-offline {
  display: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background-color: #ccc;
}
.ic-offline svg {
  width: 20px;
  height: 20px;
}
.msgbox.online .ic-online,
.msgbox.offline .ic-offline {
  display: block;
}
.text {
  margin-left: 10px;
  color: #3d3935;
  font-size: 20px;
  letter-spacing: 1px;
}

.btn-close {
  margin-top: 2px;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
}
.btn-close svg {
  height: 18px;
  width: 18px;
}

Javascript

var msgbox = document.getElementById("msgbox");
var txt = document.getElementById("text");
var btn = document.getElementById("btn-close");

function CheckStatus() {
  if (window.navigator.onLine) {
    msgbox.classList.remove("offline");
    msgbox.classList.add("online");
    txt.innerHTML = "You're Online.";
  } else {
    msgbox.classList.remove("online");
    msgbox.classList.add("offline");
    txt.innerHTML = "You're Offline.";
  }
}
      
window.addEventListener('load', () => {
  CheckStatus();
});

btn.addEventListener('click', () => {
  CheckStatus();
});