Notification bell javascript | Create notification bell using html css javascript

Notification bell javascript | Create notification bell using html css javascript

 Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Notification bell. We use HTML, Css, and javascript for this Notification bell. Hope you enjoy our blog so let’s start with a basic HTML structure for a Notification bell.

HTML code

 <button id="notifications" class="notifications notifications--active" type="button">  
<span class="notifications__waves"></span>
<span class="notifications__waves"></span>
<span class="notifications__waves"></span>
<span class="notifications__waves"></span>
<span class="notifications__sr">Notifications</span>
<span class="notifications__badge" data-badge>1</span>
</button>

There is all HTML code for the Notification bell. Now, you can see output without CSS, then we write css & javascript for the Notification bell.

output

Notification bell javascript | Create notification bell using html css javascript
output

CSS Code

 * {  
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
font-size: calc(40px + (60 - 40) * (100vw - 320px) / (1280 - 320));
}
body, button {
color: var(--fg);
font: 1em/1.5 "DM Sans", sans-serif;
}
body {
background: var(--bg);
height: 100vh;
display: grid;
place-items: center;
}
.notifications {
background: transparent;
box-shadow: 0 0 0 0.1em transparent;
filter: brightness(1) grayscale(1);
position: relative;
width: 1.5em;
height: 1.5em;
transition: filter 0.15s 0.3s linear;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.notifications:focus {
outline: none;
}
.notifications:before,
.notifications:after,
.notifications__badge,
.notifications__waves,
.notifications__sr {
position: absolute;
}
.notifications:before,
.notifications:after {
content: "";
display: block;
}
.notifications:before {
background: radial-gradient(0.4em 0.4em at 50% 1.1em,hsl(38,90%,55%) 47%,hsla(38,90%,55%,0) 50%);
top: 0.2em;
left: calc(50% - 0.2em);
width: 0.4em;
height: 1.3em;
transform-origin: 50% 0.2em;
}
.notifications:after {
background:
/* rim */
radial-gradient(0.4em 0.2em at 0.2em 1.2em,hsl(45,90%,55%) 46%,hsla(45,90%,55%,0) 50%),
linear-gradient(hsl(45,90%,55%),hsl(45,90%,55%)) 0.2em 1.1em / 1.1em 0.2em no-repeat,
radial-gradient(0.4em 0.2em at 1.3em 1.2em,hsl(45,90%,55%) 46%,hsla(45,90%,55%,0) 50%),
/* middle */
radial-gradient(1.2em 1.2em at 50% 0.75em,hsl(38,90%,55%) 49%,hsla(38,90%,55%,0) 50%) 0 0 / 100% 75% no-repeat,
linear-gradient(hsl(38,90%,55%),hsl(38,90%,55%)) 0.15em 0.75em / 1.2em 0.4em no-repeat,
/* top */
radial-gradient(0.3em 0.3em at 50% 0.15em,hsl(45,90%,55%) 48%,hsla(45,90%,55%,0) 50%);
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: 50% 0.15em;
}
.notifications__badge {
background: hsl(3,90%,55%);
border-radius: 0.375rem;
color: hsl(0,0%,100%);
font-size: 0.5em;
font-weight: bold;
padding: 0 0.125rem;
top: -0.125rem;
right: -0.125rem;
min-width: 0.75rem;
height: 0.75rem;
text-align: center;
transition: transform 0.3s 0.15s ease-out;
z-index: 1;
}
.notifications__badge:empty {
transform: scale(0);
transition-delay: 0s;
}
.notifications__waves,
.notifications--active:before,
.notifications--active:after {
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.notifications__waves {
animation-delay: 0.6s;
border-top: 0.1em solid transparent;
border-right: 0.1em solid hsla(var(--hue),10%,50%);
border-bottom: 0.1em solid transparent;
border-left: 0.1em solid hsla(var(--hue),10%,50%);
border-radius: 50%;
top: -50%;
left: -50%;
opacity: 0;
pointer-events: none;
width: 200%;
height: 200%;
transform: scale(0.3);
}
.notifications__waves:nth-child(2) { animation-delay: 0.75s; }
.notifications__waves:nth-child(3) { animation-delay: 0.9s; }
.notifications__waves:nth-child(4) { animation-delay: 1.05s; }
.notifications--active {
filter: brightness(1) grayscale(0);
transition-delay: 0s;
}
.notifications--active:before,
.notifications--active:after {
animation-delay: 0.3s;
}
.notifications--active:before {animation-name: ringBefore; }
.notifications--active:after {animation-name: ringAfter; }
.notifications--active .notifications__waves {animation-name: waves; }
.notifications__sr {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
width: 1px;
height: 1px;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
}
}
/* Animations */
@keyframes ringBefore {
from { transform: rotate(0); }
15% { transform: rotate(-3deg); }
20% { transform: rotate(6deg); }
25% { transform: rotate(-6deg); }
30% { transform: rotate(18deg); }
35% { transform: rotate(-18deg); }
40% { transform: rotate(22deg); }
45% { transform: rotate(-20deg); }
50% { transform: rotate(18deg); }
55% { transform: rotate(-16deg); }
60% { transform: rotate(14deg); }
65% { transform: rotate(-12deg); }
70% { transform: rotate(10deg); }
75% { transform: rotate(-8deg); }
80% { transform: rotate(6deg); }
85% { transform: rotate(-4deg); }
90% { transform: rotate(2deg); }
95% { transform: rotate(-1deg); }
}
@keyframes ringAfter {
from,
40%,
to {
transform: rotate(0);
}
5%,
35% {
transform: rotate(10deg);
}
10%,
30% {
transform: rotate(-10deg);
}
15%,
25% {
transform: rotate(20deg);
}
20% {
transform: rotate(-20deg);
}
}
@keyframes waves {
from {
opacity: 1;
transform: scale(0.3);
}
20%,
to {
opacity: 0;
transform: scale(1);
}
}

Here is our updated output CSS.

output

Notification bell javascript | Create notification bell using html css javascript

Javascript code 

 window.addEventListener("DOMContentLoaded",() => {  
const n = new Notifications("#notifications");
});
class Notifications {
constructor(qs) {
this.el = document.querySelector(qs);
this.badge = null;
this.items = 0;
this.timeout = null;
this.init();
}
init() {
if (this.el) {
this.el.addEventListener("click",this.read.bind(this));
this.badge = this.el.querySelector("[data-badge]");
this.reset(1);
}
}
read() {
if (this.items > 0) {
this.items = 0;
this.el.classList.remove("notifications--active");
this.badge.innerHTML = "";
const items = this.random(1,10,true);
clearTimeout(this.timeout);
this.timeout = setTimeout(this.reset.bind(this,items),2e3);
}
}
reset(items) {
this.items = items;
if (this.items > 0) {
this.el.classList.add("notifications--active");
this.badge.innerHTML = this.items;
}
}
random(min,max,round = false) {
const percent = crypto.getRandomValues(new Uint32Array(1))[0] / 2**32;
const relativeValue = (max - min) * percent;
return min + (round === true ? Math.round(relativeValue) : +relativeValue.toFixed(2));
}
}

Final output


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Notification bell. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Notification bell using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Codepen by – Jon Kantner

Leave a Reply