JavaScript Check Internet Connection
03/01/2021
Contents
Demo
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();
});