A focused frontend mini challenge built around a common product interaction: giving users temporary feedback after an action.
The project demonstrates how a notification system can communicate success, information, warnings, and errors without interrupting the user's workflow.
The design intentionally stays simple and human-centered, focusing on clarity, hierarchy, accessibility, and purposeful animation instead of excessive visual decoration.
The Interactive Toast Notification System is a responsive frontend component that demonstrates four common feedback states:
- Success
- Information
- Warning
- Error
Users can trigger each notification from the interface.
Notifications:
- Appear with a short entrance animation
- Communicate a clear message
- Include a manual close button
- Automatically dismiss after a short period
- Display a progress indicator
- Support keyboard dismissal
- Adapt to smaller screens
- Respect reduced-motion preferences
The entire component is built with HTML5, CSS3, Bootstrap 5, and Vanilla JavaScript.
This mini challenge focuses on:
- Toast notifications
- UI feedback patterns
- DOM element creation
- Dynamic content
- JavaScript event handling
- Automatic timers
- CSS animations
- Status states
- Accessibility
- Keyboard interaction
- Responsive design
- Micro-interactions
The goal is to understand how a small feedback system can be designed and implemented without turning it into a large application.
Add your final screenshot after completing the project.
assets/
└── images/
└── screenshot.jpeg
Example:
The main goals of this challenge were:
- Understand the purpose of toast notifications.
- Create multiple feedback states.
- Generate notification elements dynamically with JavaScript.
- Add automatic dismissal.
- Add manual dismissal.
- Create entrance and exit animations.
- Add a visual timeout indicator.
- Practice DOM manipulation.
- Practice JavaScript timers.
- Add keyboard interaction.
- Practice accessibility semantics.
- Keep the component responsive.
- Limit notification stacking.
- Use animation to communicate state changes.
- Create a polished interaction without unnecessary visual decoration.
Used for:
- Semantic page structure
- Buttons
- Sections
- Accessible labels
- Notification container
- ARIA attributes
Used for:
- Layout
- Responsive design
- Component styling
- Status colors
- Hover states
- Focus states
- Toast animations
- Progress animation
- Reduced-motion support
Used for:
- Supporting the responsive frontend
- Bootstrap Icons
The primary visual design is handled using custom CSS.
Used for:
- Dynamic toast creation
- Notification content
- Event handling
- Automatic dismissal
- Manual dismissal
- Keyboard interaction
- Toast stacking
- DOM manipulation
DM Sans is used for the interface typography.
mini-toast-notification-system/
│
├── index.html
├── style.css
├── script.js
│
├── assets/
│ └── images/
│ └── screenshot.jpeg
│
└── README.md
The success state communicates that an action has completed successfully.
Example:
Changes saved
Your latest changes have been saved successfully.
The information state communicates neutral information.
Example:
Just so you know
This notification will disappear automatically.
The warning state draws attention to something that may require action.
Example:
Almost out of space
You are getting close to your storage limit.
The error state communicates that an action could not be completed.
Example:
Something went wrong
We couldn't complete that action. Please try again.
Error notifications use stronger accessibility semantics through:
role="alert"Notifications automatically disappear after a short period.
The default duration is:
const TOAST_DURATION = 3800;This prevents temporary messages from remaining on the screen unnecessarily.
Every notification includes a close button.
Users do not have to wait for the automatic timeout.
New notifications enter with a subtle:
fade + upward movement + slight scale
The animation provides context that a new notification has appeared.
When dismissed, the notification uses a short exit animation before being removed from the DOM.
This avoids an abrupt visual disappearance.
A small progress line appears at the bottom of each notification.
It communicates approximately how much time remains before automatic dismissal.
The interface limits the visible notification stack to three notifications.
This prevents the screen from becoming crowded if the user repeatedly triggers notifications.
Pressing:
Escape
dismisses the latest visible notification.
This provides a small keyboard-friendly interaction.
The notification system adapts to:
- Desktop
- Tablet
- Mobile
- Small mobile screens
The notification buttons become a single column on very small screens.
The interface respects:
prefers-reduced-motion
Animations and transitions are minimized when the user's system requests reduced motion.
The interface follows a simple principle:
Feedback should help the user understand what happened without interrupting their task.
The design therefore avoids unnecessary elements such as:
- Large illustrations
- Decorative gradients
- Glassmorphism
- Excessive shadows
- Giant notification cards
- Long notification messages
- Unnecessary buttons
- Decorative animation
The notification itself remains compact.
Each toast follows the same structure:
Status icon
↓
Short title
↓
Supporting message
↓
Dismiss
This creates predictable information hierarchy.
Users can quickly scan:
what happened → why → dismiss
The four states have different meanings.
| State | Purpose |
|---|---|
| Success | Action completed |
| Information | Neutral information |
| Warning | Attention may be required |
| Error | Action failed |
Color is used as supporting information rather than the only method of communicating the state.
Each state also includes an appropriate icon and message.
Animation is intentionally restrained.
The notification fades in while moving upward slightly.
The notification fades out and moves slightly downward.
The bottom progress indicator reduces over the notification lifetime.
Interactive buttons receive small movement and background changes.
The goal is:
motion that explains change rather than decoration for decoration's sake.
The notification system is generated dynamically.
The main function is:
createToast(type);The function:
- Finds the notification content.
- Creates the notification element.
- Creates the icon.
- Creates the title.
- Creates the description.
- Creates the close button.
- Creates the progress indicator.
- Adds the notification to the page.
- Starts the automatic dismissal timer.
- Applies the appropriate accessibility role.
The notification content is stored in one JavaScript object:
const notificationData = {
success: {},
info: {},
warning: {},
error: {}
};This makes it easier to add or modify notification states without duplicating the creation logic.
Each notification receives its own timeout.
const TOAST_DURATION = 3800;The timeout is stored on the toast element so it can be cleared if the user manually dismisses the notification.
Accessibility was considered as part of the interaction design.
The component includes:
- Semantic buttons
- Accessible close buttons
aria-livearia-atomicrole="status"role="alert"for errors- Visible keyboard focus
- Escape-key dismissal
- Reduced-motion support
Error notifications use role="alert" because they represent important feedback that may require immediate attention.
git clone https://github.com/codingwithvignesh/mini-toast-notification-system.gitcd mini-toast-notification-systemOpen the file directly in your browser.
For development, VS Code with Live Server can also be used.
Add the Netlify deployment URL after publishing the project.
https://your-project-name.netlify.app
Example:
[View Live Demo](https://your-project-name.netlify.app)Through this mini challenge, I practiced:
- HTML5 structure
- CSS component design
- Responsive layouts
- Vanilla JavaScript
- DOM creation
- DOM manipulation
- Event listeners
- JavaScript timers
- Dynamic content
- Notification patterns
- UI feedback
- Status states
- CSS animations
- CSS transitions
- Keyboard interaction
- Accessibility
- ARIA attributes
- Focus states
- Reduced-motion support
- Responsive UI
- Micro-interactions
Created the notification playground using HTML5.
Focused on:
- Page hierarchy
- Trigger buttons
- Notification container
- Accessibility structure
Created the visual system using CSS.
Focused on:
- Typography
- Spacing
- Status colors
- Borders
- Shadows
- Responsive behavior
- Interaction states
Added JavaScript functionality for:
- Notification creation
- Notification types
- Dynamic DOM elements
- Auto-dismiss
- Manual dismissal
- Toast stacking
Added:
- Toast entrance animation
- Toast exit animation
- Progress animation
- Button hover feedback
Added:
- ARIA live region
- Status roles
- Error alert semantics
- Keyboard dismissal
- Focus states
- Reduced-motion support
Tested the interface across:
- Desktop
- Tablet
- Mobile
- Multiple notifications
- Keyboard interaction
- Reduced-motion settings
- Success notification works.
- Information notification works.
- Warning notification works.
- Error notification works.
- Correct icon appears.
- Correct title appears.
- Correct description appears.
- Notification appears after clicking a button.
- Notification can be closed manually.
- Notification automatically disappears.
- Escape closes the latest notification.
- Multiple notifications can be triggered.
- Toast entrance animation works.
- Toast exit animation works.
- Progress animation works.
- Button hover states work.
- Reduced-motion preference works.
- Buttons are keyboard accessible.
- Close buttons have accessible labels.
- Notification region uses live feedback.
- Error notifications use alert semantics.
- Focus states are visible.
- Escape key works.
- Desktop layout works.
- Tablet layout works.
- Mobile layout works.
- Small mobile layout works.
- Toasts remain readable.
- Notification stack stays within the viewport.
Possible future improvements include:
- Pause auto-dismiss while hovering
- Swipe-to-dismiss on mobile
- Optional action buttons
- Notification history
- Different notification durations
- Undo actions
- Sound preferences
- Reusable notification JavaScript module
- Automated accessibility testing
These improvements are intentionally outside the current mini challenge.
The current goal is to understand the fundamental toast notification interaction first.
The project is designed for modern browsers supporting:
- HTML5
- CSS3
- JavaScript ES6+
- CSS custom properties
- CSS animations
- ARIA attributes
Recommended browsers:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
Vignesh Govindaraj
UI/UX Designer • Front-End Developer
https://vigneshux.netlify.app/
https://github.com/codingwithvignesh
https://www.behance.net/vigneshgovindaraj
This project is part of my frontend mini challenge series.
The purpose of these challenges is to consistently practice small, focused interface interactions rather than immediately building large applications.
The learning pattern is:
HTML
↓
CSS
↓
JavaScript
↓
Interactive UI
The project pattern is:
STRUCTURE
•
STYLE
•
INTERACTION
This challenge specifically focuses on:
UI Feedback • Toast Notifications • DOM Manipulation • Animation • Accessibility
Projects in this challenge series use my personal GitHub topic:
vignesh-builds
This identifies projects that I personally build as part of my UI/UX and frontend development practice.
This project is created for educational and personal portfolio purposes.
You are welcome to explore the code and use the ideas for learning.
Built with HTML5, CSS3, Bootstrap 5, and Vanilla JavaScript.