<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Toast Notification In Javascript</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font Awesome icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<script src="script.js" defer></script>
</head>
<body>
<ul class="notifications"></ul>
<div class="buttons">
<button class="btn" id="error">Error</button>
<button class="btn" id="warning">Warning</button>
<button class="btn" id="info">Info</button>
<button class="btn" id="success">Success</button>
<button class="btn" id="random">Random</button>
</div>
</body>
</html>
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--dark: #78fad1;
--light: #ffffff;
--success: #0abf30;
--error: #e24d4c;
--warning: #e9bd0c;
--info: #3498db;
--random: #eb43ff;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--dark);
}
.notifications {
position: fixed;
top: 30px;
right: 20px;
}
.notifications :where(.toast, .column) {
display: flex;
align-items: center;
}
.notifications .toast {
width: 400px;
position: relative;
overflow: hidden;
list-style: none;
border-radius: 4px;
padding: 16px 17px;
margin-bottom: 10px;
background: var(--light);
justify-content: space-between;
animation: show_toast 0.3s ease forwards;
}
@keyframes show_toast {
0% {
transform: translateX(100%);
}
40% {
transform: translateX(-5%);
}
80% {
transform: translateX(0%);
}
100% {
transform: translateX(-10px);
}
}
.notifications .toast.hide {
animation: hide_toast 0.3s ease forwards;
}
@keyframes hide_toast {
0% {
transform: translateX(-10px);
}
40% {
transform: translateX(0%);
}
80% {
transform: translateX(-5%);
}
100% {
transform: translateX(calc(100% + 20px));
}
}
.toast::before {
position: absolute;
content: "";
height: 3px;
width: 100%;
bottom: 0px;
left: 0px;
animation: progress 5s linear forwards;
}
@keyframes progress {
100% {
width: 0%;
}
}
.toast.success::before,
.btn#success {
background: var(--success);
}
.toast.error::before,
.btn#error {
background: var(--error);
}
.toast.warning::before,
.btn#warning {
background: var(--warning);
}
.toast.info::before,
.btn#info {
background: var(--info);
}
.toast.random::before,
.btn#random {
background: var(--random);
}
.toast .column i {
font-size: 1.75rem;
}
.toast.success .column i {
color: var(--success);
}
.toast.error .column i {
color: var(--error);
}
.toast.warning .column i {
color: var(--warning);
}
.toast.info .column i {
color: var(--info);
}
.toast.random .column i {
color: var(--random);
}
.toast .column span {
font-size: 1.07rem;
margin-left: 12px;
}
.toast i:last-child {
color: #aeb0d7;
cursor: pointer;
}
.toast i:last-child:hover {
color: var(--dark);
}
.buttons .btn {
border: none;
outline: none;
cursor: pointer;
margin: 0 5px;
color: var(--light);
font-size: 1.2rem;
padding: 10px 20px;
border-radius: 4px;
}
@media screen and (max-width: 530px) {
.notifications {
width: 95%;
}
.notifications .toast {
width: 100%;
font-size: 1rem;
margin-left: 20px;
}
.buttons .btn {
margin: 0 1px;
font-size: 1.1rem;
padding: 8px 15px;
}
}
const notifications = document.querySelector(".notifications"),
buttons = document.querySelectorAll(".buttons .btn")
const toastDetails = {
timer: 5000,
success: {
icon: "fa-circle-check",
text: "Hello World: This is a success toast.",
},
error: {
icon: "fa-circle-xmark",
text: "Hello World: This is an error toast.",
},
warning: {
icon: "fa-triangle-exclamation",
text: "Hello World: This is a warning toast.",
},
info: {
icon: "fa-circle-info",
text: "Hello World: This is an information toast.",
},
random: {
icon: "fa-solid fa-star",
text: "Hello World: This is a random toast.",
},
}
const removeToast = (toast) => {
toast.classList.add("hide")
if (toast.timeoutId) clearTimeout(toast.timeoutId)
setTimeout(() => toast.remove(), 500)
}
const createToast = (id) => {
const { icon, text } = toastDetails[id]
const toast = document.createElement("li")
toast.className = `toast ${id}`
toast.innerHTML = `<div class="column">
<i class="fa-solid ${icon}"></i>
<span>${text}</span>
</div>
<i class="fa-solid fa-xmark" onclick="removeToast(this.parentElement)"></i>`
notifications.appendChild(toast)
toast.timeoutId = setTimeout(() => removeToast(toast), toastDetails.timer)
}
buttons.forEach((btn) => {
btn.addEventListener("click", () => createToast(btn.id))
})
