Introduction:
In this tutorial, you will learn how to create a simple toast notification system using HTML, CSS, and JavaScript. A toast notification is a brief message that pops up on the screen to inform users about a system event. It’s a non-intrusive way to communicate information, such as success or error messages. This guide will walk you through how to implement a customizable toast notification system that you can easily integrate into your projects.
Things You Will Learn:
- How to create a toast notification container in HTML.
- Styling the toast notifications using CSS for a polished look.
- How to write a JavaScript function to display and remove the toast notifications.
- How to customize the toast notification based on message type (success, error, etc.).
- How to use animations to enhance the visual appearance of toast notifications.
Video Tutorial:
Do not forget to subscribe to my YouTube channel where I will be sharing my knowledge and expertise to help you master the basics of web development. From writing your first line of HTML to creating beautiful and responsive web pages with CSS and JavaScript, I have got you covered. So, if you’re ready to take your web development skills to the next level, hit the subscribe button and join me on this exciting journey.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ‘Custom Toast Notification’. Within this folder we have 3 files. These files are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Toast Notification</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="toast-container"></div>
<button onclick="showToast('Succes!Your action was successful')">
Show Success Toast
</button>
<button onclick="showToast('Error!Something went wrong','error')">
Show Error Toast
</button>
<script src="script.js"></script>
</body>
</html>
CSS:
Enhance the visual look by pasting the CSS code below into your stylesheet.
* {
font-family: "Poppins", sans-serif;
}
body {
background-color: #e5e6ec;
}
#toast-container {
position: fixed;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.toast {
display: flex;
align-items: center;
padding: 10px 20px;
background-color: #4caf50;
color: #ffffff;
border-radius: 5px;
font-size: 16px;
animation: slideIn 0.5s, fadeOut 0.5s 3s;
opacity: 1;
}
.toast.error {
background-color: #f44336;
}
@keyframes slideIn {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
function showToast(message, type = "success") {
const toastContainer = document.getElementById("toast-container");
const toast = document.createElement("div");
toast.classList.add("toast");
if (type === "error") toast.classList.add("error");
toast.innerText = message;
toastContainer.appendChild(toast);
setTimeout(() => {
toast.style.animation = "fadeOut 0.5s forwards";
setTimeout(() => toast.remove(), 500);
}, 3000);
}
Conclusion:
In this tutorial, you learned how to create a toast notification system using HTML, CSS, and JavaScript. You can now display success or error messages to users in a non-intrusive way. This simple system enhances user experience by providing timely feedback without interrupting their workflow. You can customize the styles, animations, and functionality to suit your project’s needs. Don’t forget to watch the video tutorial on my YouTube channel for more insights.
