Bu programla kullanıcıların internet bağlantısını test etme algılama bildirimi kodlarını paylaşacağız.
Kullanıcının internet bağlantısı test kodları, Ücretsiz şekilde kullanılabilir fakat, Tescil vb. gibi işlemlerde bulunamamaktasınız.
Sizler için yaptığımız araştırmaların ardından, yazılım kategorimizin içeriklerini geliştirmeye devam ediyoruz.
Aşağıda bulunan linke tıklayarak dosyaları .zip formatında indirebilir ve Türkçe olarak kullanabilirsiniz.
Eğer kodu kopyalayıp dosyaları kendiniz oluşturmak istiyorsanız. Aşağıda bulunan kodlarda kalın yazılmış yerleri değiştirin.
Bilmeyenler için değiştirmeniz gereken yerler :
İçerikler
HTML :
<!-- - www.webitrik.com -->
<!-- <title>Detect Internet Connection | Webitrik</title> -->JavaScript :
İnternet bağlantınız sağlandı bildirimi :
title.innerText = "You're online now";
subTitle.innerText = "Hurray! Internet is connected.";İnternet bağlantınız yok bildirimi :
title.innerText = "You're offline now";
subTitle.innerText = "Opps! Internet is disconnected.";Kalın kısımları, değiştirmeniz gerekiyor.
Kullanıcının internet bağlantısı test kodları :
HTML Kodu :
<!DOCTYPE html>
<!-- - www.webitrik.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <title>Detect Internet Connection | Webitrik</title> -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
</head>
<body>
<div class="wrapper">
<div class="toast">
<div class="content">
<div class="icon"><i class="uil uil-wifi"></i></div>
<div class="details">
<span>You're online now</span>
<p>Hurray! Internet is connected.</p>
</div>
</div>
<div class="close-icon"><i class="uil uil-times"></i></div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>
</html>
CSS Kodu :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;
background: #f2f2f2;
}
.wrapper{
position: absolute;
top: 20px;
left: 20px;
animation: show_toast 1s ease forwards;
}
@keyframes show_toast {
0%{
transform: translateX(-100%);
}
40%{
transform: translateX(10%);
}
80%, 100%{
transform: translateX(20px);
}
}
.wrapper.hide{
animation: hide_toast 1s ease forwards;
}
@keyframes hide_toast {
0%{
transform: translateX(20px);
}
40%{
transform: translateX(10%);
}
80%, 100%{
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
}
}
.wrapper .toast{
background: #fff;
padding: 20px 15px 20px 20px;
border-radius: 10px;
border-left: 5px solid #2ecc71;
box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
width: 430px;
display: flex;
align-items: center;
justify-content: space-between;
}
.wrapper .toast.offline{
border-color: #ccc;
}
.toast .content{
display: flex;
align-items: center;
}
.content .icon{
font-size: 25px;
color: #fff;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background: #2ecc71;
}
.toast.offline .content .icon{
background: #ccc;
}
.content .details{
margin-left: 15px;
}
.details span{
font-size: 20px;
font-weight: 500;
}
.details p{
color: #878787;
}
.toast .close-icon{
color: #878787;
font-size: 23px;
cursor: pointer;
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
background: #f2f2f2;
transition: all 0.3s ease;
}
.close-icon:hover{
background: #efefef;
}
Javascript Kodu :
// Selecting all required elements
const wrapper = document.querySelector(".wrapper"),
toast = wrapper.querySelector(".toast"),
title = toast.querySelector("span"),
subTitle = toast.querySelector("p"),
wifiIcon = toast.querySelector(".icon"),
closeIcon = toast.querySelector(".close-icon");
window.onload = ()=>{
function ajax(){
let xhr = new XMLHttpRequest(); //creating new XML object
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true); //sending get request on this URL
xhr.onload = ()=>{ //once ajax loaded
//if ajax status is equal to 200 or less than 300 that mean user is getting data from that provided url
//or his/her response status is 200 that means he/she is online
if(xhr.status == 200 && xhr.status < 300){
toast.classList.remove("offline");
title.innerText = "You're online now";
subTitle.innerText = "Hurray! Internet is connected.";
wifiIcon.innerHTML = '<i class="uil uil-wifi"></i>';
closeIcon.onclick = ()=>{ //hide toast notification on close icon click
wrapper.classList.add("hide");
}
setTimeout(()=>{ //hide the toast notification automatically after 5 seconds
wrapper.classList.add("hide");
}, 5000);
}else{
offline(); //calling offline function if ajax status is not equal to 200 or not less that 300
}
}
xhr.onerror = ()=>{
offline(); ////calling offline function if the passed url is not correct or returning 404 or other error
}
xhr.send(); //sending get request to the passed url
}
function offline(){ //function for offline
wrapper.classList.remove("hide");
toast.classList.add("offline");
title.innerText = "You're offline now";
subTitle.innerText = "Opps! Internet is disconnected.";
wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
}
setInterval(()=>{ //this setInterval function call ajax frequently after 100ms
ajax();
}, 100);
}
Kendinizi geliştirmek veya kodlamaya başlamak için, Çevrimiçi genel web – yazılım eğitimlerine buradan ulaşabilirsiniz.
Kaynak video :
Kullanıcının internet Bağlantısı Test Kodları, makalemizi faydalı bulduysanız yorum bırakmayı unutmayınız.
