What is this article about?
A toast notification is a simple way to provide essential information to the user. It is a small message that appears on the screen for a short period.
In this article, you'll learn how to build a toast notification using pure HTML, CSS, and JS. No library is included.
Steps to follow
- Create a
index.htmlfile - Create a
style.cssfile - Create a
script.jsfile
To get started, add the following code to your HTML file. This HTML code will create five buttons to click for the toast notification. Afterward, we will dynamically add a toast li element in the notification ul using JavaScript.
<!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> Following add the following CSS code to your CSS file. These codes are for styling the toast notification. Feel free to customize the design to suit your tastes.
/* 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; } } Ultimately, paste the following javascript code to your script.js file.
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)) }) This Javascript code first defines an object called toastDetails that contains details for different toasts, including a timer for how long the toast should be displayed and information for each type of toast, such as an icon and text.
The code then defines two functions: removeToast and createToast. The removeToast function is used to remove a toast from the DOM by adding a hide class to the toast element, clearing any timeout that was set to release the toast, and then removing the element from the DOM after a delay of 500ms.
The createToast function is used to create a new toast element, setting its classes and innerHTML based on the type of toast specified by the id passed as an argument and appending it to the notifications element.
Finally, the code adds a click event listener to each button so that when a button is clicked, it will call the createToast function and pass the id of the clicked button as an argument.
Conclusion
That's all. Congratulations!🥂 You successfully created your Toast Notification in HTML, CSS, and JavaScript. If you encounter any problems or your code is not working as expected, feel free to ask in the comment section.