Table of Contents
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
CSS Code
 |
| 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
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 javascript. Hope 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.