Skip to content

Commit bcb171f

Browse files
ShaikhAman01ShaikhAman01
committed
Added NewtworkStatus Tracker
1 parent fff7904 commit bcb171f

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎NetworkStatusTracker/ShaikhAman01/app.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const popup = document.querySelector(".popup"),
2+
wifiIcon = document.querySelector(".icon i"),
3+
popupTitle = document.querySelector(".popup .title"),
4+
popupDesc = document.querySelector(".desc"),
5+
reconnectBtn = document.querySelector(".reconnect");
6+
7+
let isOnline = true,
8+
intervalId,
9+
timer = 10;
10+
11+
const checkConnection = async () => {
12+
try {
13+
// Try to fetch random data from the API. If the status code is between
14+
// 200 and 300, the network connection is considered online
15+
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
16+
isOnline = response.status >= 200 && response.status < 300;
17+
} catch (error) {
18+
isOnline = false; // If there is an error, the connection is considered offline
19+
}
20+
timer = 10;
21+
clearInterval(intervalId);
22+
handlePopup(isOnline);
23+
};
24+
25+
const handlePopup = (status) => {
26+
if (status) {
27+
// If the status is true (online), update icon, title, and description accordingly
28+
wifiIcon.className = "uil uil-wifi";
29+
popupTitle.innerText = "Restored Connection";
30+
popupDesc.innerHTML =
31+
"Your device is now successfully connected to the internet.";
32+
popup.classList.add("online");
33+
return setTimeout(() => popup.classList.remove("show"), 2000);
34+
}
35+
// If the status is false (offline), update the icon, title, and description accordingly
36+
wifiIcon.className = "uil uil-wifi-slash";
37+
popupTitle.innerText = "Lost Connection";
38+
popupDesc.innerHTML =
39+
"Your network is unavailable. We will attempt to reconnect you in <b>10</b> seconds.";
40+
popup.className = "popup show";
41+
42+
intervalId = setInterval(() => {
43+
// Set an interval to decrease the timer by 1 every second
44+
timer--;
45+
if (timer === 0) checkConnection(); // If the timer reaches 0, check the connection again
46+
popup.querySelector(".desc b").innerText = timer;
47+
}, 1000);
48+
};
49+
50+
// Only if isOnline is true, check the connection status every 3 seconds
51+
setInterval(() => isOnline && checkConnection(), 3000);
52+
reconnectBtn.addEventListener("click", checkConnection);

‎NetworkStatusTracker/ShaikhAman01/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>NetStatus Tracker</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link
9+
rel="stylesheet"
10+
href="https://unicons.iconscout.com/release/v3.0.6/css/line.css"
11+
/>
12+
</head>
13+
<body>
14+
<div class="popup">
15+
<div class="icon"><i class=""></i></div>
16+
<div class="details">
17+
<h2 class="title"></h2>
18+
<p class="desc"></p>
19+
<button class="reconnect">Reconnect Now</button>
20+
</div>
21+
</div>
22+
<div class="heading">
23+
<h1><em>NetStatus Tracker</em></h1>
24+
<p>Turn off your internet to see the offline notification !</p>
25+
</div>
26+
27+
<script src="app.js" defer></script>
28+
</body>
29+
</html>

‎NetworkStatusTracker/ShaikhAman01/styles.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Poppins", sans-serif;
7+
}
8+
body {
9+
font-family: Arial, sans-serif;
10+
background-color: #f4f4f4;
11+
text-align: center;
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: center;
15+
align-items: center;
16+
height: 100vh;
17+
margin: 0;
18+
}
19+
20+
.popup {
21+
position: absolute;
22+
left: 50%;
23+
top: -25%;
24+
visibility: hidden;
25+
width: 490px;
26+
border-radius: 5px;
27+
padding: 13px 17px 20px;
28+
background: #fff;
29+
display: flex;
30+
border-top: 3px solid #ea4d67;
31+
transform: translateX(-50%);
32+
box-shadow: 0 10px 25px rgba(52, 87, 220, 0.1);
33+
transition: all 0.25s ease;
34+
}
35+
.popup.show {
36+
top: 0;
37+
visibility: visible;
38+
}
39+
.popup.online {
40+
border-color: #2ecc71;
41+
}
42+
.popup .icon i {
43+
width: 40px;
44+
height: 40px;
45+
display: flex;
46+
color: #fff;
47+
margin-right: 15px;
48+
font-size: 1.2rem;
49+
align-items: center;
50+
justify-content: center;
51+
border-radius: 50%;
52+
background: #ea4d67;
53+
}
54+
.popup.online .icon i {
55+
background: #2ecc71;
56+
}
57+
.popup .title {
58+
font-size: 1.2rem;
59+
}
60+
.popup .desc {
61+
color: #474747;
62+
margin: 3px 0 10px;
63+
font-size: 1.04rem;
64+
}
65+
.popup .reconnect {
66+
border: none;
67+
outline: none;
68+
color: #fff;
69+
cursor: pointer;
70+
font-weight: 500;
71+
font-size: 0.95rem;
72+
padding: 8px 13px;
73+
border-radius: 4px;
74+
background: #5372f0;
75+
}
76+
.popup.online .reconnect {
77+
background: #bfbfbf;
78+
pointer-events: none;
79+
}
80+
81+
@media screen and (max-width: 550px) {
82+
.popup {
83+
width: 100%;
84+
padding: 10px 15px 17px;
85+
}
86+
}

0 commit comments

Comments
 (0)