Hey everyone hope you are fine, today we are going to learn Toast Notifications using HTML CSS and JavaScript. It’s a simple but interesting project which used to display the messages on your website or application. So, I hope you will like the project and tutorial.
Toast notifications are a common feature in modern web applications that provide a non-intrusive way to display brief messages or alerts to users. These notifications are typically small, transient pop-up messages that appear near the bottom or top of the screen and disappear after a short period. In this article, we will explore how to create toast notifications using HTML, CSS, and JavaScript without delving into specific code examples.
Toast notifications serve various purposes in web applications, such as confirming a successful action (e.g., “Saved successfully”), alerting users to errors or warnings, or providing contextual information. They are designed to grab the user’s attention without interrupting their workflow.
Animated Alert Message Using HTML CSS and JavaScript
Guys, I’ve made the tutorial on how to make an animated alert message with a progress bar using HTML, CSS, and JavaScript. Inside the video, you will learn step-by-step usage of HTML, CSS & JS to create a complete project. Please watch the complete tutorial and follow it.
I hope this video is helpful and beneficial for you, you’ve learned something new from this tutorial. If you face any problems during the video you can check out the source code of the project below.
You May Also Like:
- Multi Step Progress Bar in HTML CSS & JavaScript
- Currency Converter App Using HTML CSS and Javascript
- Creating a Category Filter Using HTML CSS and JavaScript
- Note App Using HTML CSS and JavaScript
- Movie App Using HTML CSS and JavaScript
- Weather App Using HTML CSS and JavaScript
Toast Notifications Using HTML CSS and JavaScript
To create toast notifications using HTML, CSS, and JavaScript, follow these general steps:
1. HTML Structure
Start by designing the HTML structure for your toast notification. This may include a container div to hold the notification message and any icons or buttons you want to include.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toast Notification in HTML, CSS & JS</title>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
</head>
<body>
<div class="toast">
<div class="toast_content">
<i class="fa fa-solid fa-check check"></i>
<div class="message">
<span class="txt txt-1">Success</span>
<span class="txt txt-2">
Your data has been saved in out database</span
>
</div>
</div>
<i class="fa-solid fa-xmark close"></i>
<div class="progress"></div>
</div>
<button type="button">Primary Message</button>
<script src="js/script.js"></script>
</body>
</html>
2. CSS Styling
Apply CSS styles to control the appearance and positioning of the toast notifications. You can set properties like background color, font size, border radius, and animation effects to make your notifications visually appealing.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #ddd;
overflow: hidden;
}
.toast {
position: absolute;
top: 25px;
right: 30px;
border-radius: 10px;
background: #fff;
padding: 20px 25px 20px 25px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
border-left: 6px solid #f32695;
transition: all 0.5s ease;
transform: translateX(calc(100% + 30px));
overflow: hidden;
}
.toast.active {
transform: translateX(0%);
}
.toast_content {
display: flex;
align-items: center;
}
.toast_content .check {
display: flex;
align-items: center;
justify-content: center;
height: 35px;
width: 35px;
background: #f32695;
color: #fff;
font-size: 20px;
border-radius: 50%;
}
.toast_content .message {
display: flex;
flex-direction: column;
margin: 0 20px;
}
.message .txt {
font-size: 20px;
font-weight: 400;
color: #666666;
}
.message .txt-1 {
font-weight: 600;
color: #333;
}
.toast .close {
position: absolute;
top: 10px;
right: 15px;
padding: 5px;
cursor: pointer;
opacity: 0.7;
}
.toast .close:hover {
opacity: 1;
}
.toast .progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: #ddd;
}
.toast .progress:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background: #e63a96;
}
.progress.active::before {
animation: progress 5s linear forwards;
}
@keyframes progress {
100% {
right: 100%;
}
}
button {
padding: 10px 20px;
font-size: 20px;
outline: none;
border: none;
background: #e63a96;
color: #fff;
border-radius: 0.3rem;
cursor: pointer;
transition: all 0.3s ease-in-out;
margin: 0 2rem;
}
button:hover {
background: #f32699;
}
3. JavaScript Logic
Use JavaScript to handle the behavior of your toast notifications. This includes showing and hiding them, setting a timer for automatic dismissal, and responding to user interactions like clicks or dismissals.
const btnEl = document.querySelector("button");
const toastEl = document.querySelector(".toast");
const closeEl = document.querySelector(".close");
const proEl = document.querySelector(".progress");
btnEl.addEventListener("click", () => {
toastEl.classList.add("active");
proEl.classList.add("active");
setTimeout(function () {
toastEl.classList.remove("active");
}, 5000);
});
closeEl.addEventListener("click", () => {
toastEl.classList.remove("active");
});
4. Displaying Notifications
To display a toast notification, trigger your JavaScript logic when a specific event occurs in your application. For example, you might show a notification after a form submission or when an error occurs.
5. Auto-Dismissal
Implement a timer mechanism to automatically dismiss the notification after a certain duration. This duration should be long enough for the user to read the message but short enough to avoid being obtrusive.
6. User Interaction
Allow users to interact with the notification by providing a way to dismiss it manually. This can be done by clicking on the notification or using a dedicated close button.
Best Practices for Toast Notifications
When implementing toast notifications, consider the following best practices:
- Accessibility: Ensure that your toast notifications are accessible to all users, including those with disabilities. Use proper HTML semantics, provide keyboard navigation, and include ARIA attributes when necessary.
- Design Consistency: Maintain a consistent design for your notifications throughout your application. Consistency helps users recognize and understand the purpose of the notifications.
- Customization: Allow for customization of toast notifications’ appearance and behavior, as different parts of your application may have varying requirements.
- Limitation: Avoid overwhelming users with too many notifications. Display only essential information and prioritize the most critical messages.
- Testing: Thoroughly test your toast notifications across different browsers and devices to ensure they function correctly and look good in various scenarios.
- Feedback: Use toast notifications to provide feedback on user actions, but be mindful not to interrupt their workflow unnecessarily.
In conclusion, toast notifications are a valuable tool for enhancing the user experience in web applications. By following best practices and implementing them using HTML, CSS, and JavaScript, you can create effective and user-friendly notifications that improve communication and engagement with your audience.
