How to Check Internet Connection in HTML CSS & JavaScript

 

# To create How to Check Internet Connection in HTML CSS & JavaScript Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create How to Check Internet Connection in HTML CSS & JavaScript Select Menu and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the Check Internet Connection:

<div class="popupnet" id="status"></div>
            

2. Next, add some HTML Icon Link to Check Internet Connection:

<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.1.0/uicons-bold-rounded/css/uicons-bold-rounded.css'>

3. Next, add some CSS to Check Internet Connection and position the container in the center:

@import "https://fonts.googleapis.com/css?family=Josefin+Sans%3A300%2C400%2C500%2C600%2C700&subset=latin%2Clatin-ext";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: josefin sans, sans-serif;
}
.popupnet {
    position: fixed;
    left: 13px;
    bottom: 13px;
    z-index: 999;
    display: none;
}
.popupnet .color_offline,
.popupnet .color_online{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border-radius: 7px;
}
.popupnet .color_offline{
    background: #000000;
}
.popupnet .color_online{
    background: #2ECC71;
}
.left_border {
    border-left: 2px solid rgb(202, 202, 202);
    padding-left: 9px;
}
.popupnet h3 {
    color: white;
    margin-bottom: 6px;
}
.popupnet p {
    color: white;
    opacity: 0.8;
}
.show {
    display: block;
}
i{
   color: white;
   font-size: 29px;
}
            

4. Use JavaScript to Check Internet Connection element inside the container:

window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);

function updateStatus() {
    let status = document.getElementById('status');
    if (navigator.onLine) {
        status.innerHTML = `
        <div class="color_online">
            <i class="fi fi-br-wifi"></i>
            <div class="left_border">
                <h3>Restored Connection</h3>
                <p>Successfully connected to the internet.</p>
            </div>
        </div>`
    return setTimeout(() => status.classList.remove("show"), 2000);
    } else {
        status.classList.add('show')
        status.innerHTML = `
        <div class="color_offline">
            <i class="fi fi-br-wifi-slash"></i>
            <div class="left_border">
                <h3>Lost Connection</h3>
                <p>Your network is unavailable.</p>
            </div>
        </div>`
    }

};
if (navigator.offline) {
    updateStatus();
}
            

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create Check Internet Connection` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.