Facebook Offline and Online Notification with HTML CSS and JavaScript

In this tutorial we will see how to design Facebook Offline and Online Notification with HTML CSS and JavaScript. Pure CSS and Vanilla JavaScript is used to make this notification bar.

Table of Contents

HTML Code

Take a look at the HTML code given below.


<div class="notification" id="notification">
  <div class="div">
    <span class="icon" id="icon"></span>
    <span class="message" id="message">You are currently offline.</span> 
    <span class="refresh" id="refresh">Refresh</span> 
    <span class="close" onclick='hide()'>✖</span>
  </div>    
</div>

CSS Code

CSS code is given below, we have used CSS position property to fix the position of notification bar, while other simple CSS properties are also used.


<style>
body
{
    margin: 0;
    padding: 0;
    background-color: #333;
    font-family: Segoe UI, sans-serif;
}
.notification
{
    background-color: #fff;
    position: fixed;
    height: 68px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    left: 16px;
    bottom: 10px;
    display: none;
}
.div
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}
.icon
{
   width: 24px;
   height: 24px;
   background-image: url('offline.png');
   background-size: cover;
}
.message
{
    font-size: 15px;
    padding: 12px;
    color: #050505;
}
.refresh
{
    padding-right: 12px;
    font-size: 15px;
    color: #216fDb;
    cursor: pointer;
}
.close
{
    color: #050505;
    background-color: #E4E6EB;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    font-size: 14px;
    padding: 3px;
    cursor: pointer;
}
</style>

JavaScript Code

Take a look at the JavaScript Code given below, HTML DOM methods like document.getElementById(''), insertAdjacentHTML() and remove() are used while JavaScript properties that are used include .style, .display, .backgroundImage and .innerHTML.


<script>
var a,b;

function online()
{
document.getElementById('notification').style.display='block';
document.getElementById('icon').style.backgroundImage='url(online.png)';
document.getElementById('message').innerHTML='Your Internet connection was restored.';
document.getElementById('refresh').remove();
b=1;    
}

function offline()
{
if(b==1)
{
document.getElementById('notification').style.display='block';
var msg = document.getElementById('message');
document.getElementById('icon').style.backgroundImage='url(offline.png)';
msg.innerHTML='You are currently offline.';
msg.insertAdjacentHTML('afterend','Refresh');    
}   
else
{
document.getElementById('notification').style.display='block';
}
}

function hide()
{
document.getElementById('notification').style.display='none'; 
}
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on how to make Facebook Offline and Online Notification with HTML CSS and JavaScript.