HTML, CSS ve JavaScript ile Kullanıcının İnternet Bağlantısı Test Kodları

Sitenizin kullanıcı deneyimini arttıracak, kullanıcıların internet bağlantısını test etme kodları ile bildirim gönderip sitenizi yenilemesini sağlayın.
Kullanıcızın İnternet Bağlantısını Test Edin

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 :

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);
}

Kaynak

Kendinizi geliştirmek veya kodlamaya başlamak için, Çevrimiçi genel web – yazılım eğitimlerine buradan ulaşabilirsiniz.

Kullanıcının internet Bağlantısı Test Kodları, makalemizi faydalı bulduysanız yorum bırakmayı unutmayınız.

Total
0
Shares
Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Previous Post
Anahtar Kelime Nedir Nasıl Bulunur

Anahtar Kelime Nedir ? Nasıl Bulunur ? 2021

Next Post
windows 10 kurulumu nasil yapilir

Windows 10 Kurulumu Nasıl Yapılır ? [Detaylı]

Related Posts