Feat toast notifications

[Madhavi1108]

Description

This PR replaces intrusive browser alert() dialogs with a modern, reusable toast notification system, providing users with a smoother and more accessible feedback experience across the application.

The new implementation introduces a centralized showToast(message, type) utility, polished styling with light and dark theme support, accessibility improvements, and consistent notification handling for success, error, warning, and informational events.

Closes #184

Type of Change

• Enhancement
• Bug fix
• Documentation update
• Refactoring

Checklist

• Code follows project style
• Tested locally
• Updated documentation

---

Changes Made

Reusable Toast Notification Utility

Created a lightweight notification system in toast.js exposing a global:

showToast(message, type)

The utility:

• Dynamically creates toast notifications

• Supports multiple notification types

• Handles automatic dismissal

• Supports manual dismissal

• Can be reused throughout the application

---

Modern Toast Styling

Added toast.css to provide a polished notification experience.

Features include:

• Smooth entrance and exit animations

• Top-right positioning

• Type-specific border indicators

• Modern card-style appearance

• Responsive layout

• Consistent spacing and typography

---

Multiple Notification Types

Implemented built-in support for:

• Success

• Error

• Warning

• Information

Each notification type includes:

• Distinct visual styling

• Dedicated iconography

• Appropriate color indicators

---

Accessibility Improvements

Added accessibility enhancements to ensure compatibility with assistive technologies.

Toasts now include:

• role="alert"

• aria-live attributes

• Non-blocking announcements

This improves usability for screen reader users while maintaining a seamless experience.

---

Theme Compatibility

Designed the toast system to integrate with both application themes.

Verified support for:

• Light mode

• Dark mode

without requiring separate implementations.

---

Global Integration

Integrated the toast system across the application by linking:

• toast.css

• toast.js

into:

• Frontend/index.html

• Frontend/Analysis/analysis.html

making notifications available throughout the platform.

---

Replaced Browser Alerts

Updated existing alert() calls across the frontend to use the new toast system.

Affected scenarios include:

• Empty field validation

• Backend connectivity failures

• Geolocation permission errors

• User-facing warnings

• General informational messages

This removes blocking browser dialogs in favor of a modern notification experience.

---

Files Added

Frontend

• toast.js

• toast.css

---

Files Updated

• Frontend/index.html

• Frontend/Analysis/analysis.html

• Frontend/script.js

• Frontend/Analysis/analysis.js

---

User Experience Improvements

Notifications

Users now experience:

• Non-blocking feedback

• Smooth animated notifications

• Consistent messaging across the platform

• Automatic dismissal after display

• Optional manual dismissal

Accessibility

Improved accessibility through:

• ARIA-compliant alerts

• Screen reader compatibility

• Better interaction without interrupting workflows

Visual Consistency

The application now provides a unified notification system instead of inconsistent browser-native dialogs.

---

How Has This Been Tested?

Toast Rendering

Verified:

• Success notifications display correctly

• Error notifications display correctly

• Warning notifications display correctly

• Information notifications display correctly

Animation Testing

Verified:

• Smooth appearance animation

• Automatic dismissal after 4 seconds

• Manual dismissal behavior

Accessibility Validation

Verified:

• role="alert" is applied

• aria-live attributes announce notifications properly

• Screen reader compatibility is maintained

Theme Validation

Verified:

• Toast styling renders correctly in light mode

• Toast styling renders correctly in dark mode

Alert Replacement Testing

Verified replacement of browser alert() calls for:

• Empty input validation

• Backend connection failures

• Geolocation permission errors

• General application warnings

Global Availability

Verified:

• Toast system loads correctly on index.html

• Toast system loads correctly on analysis.html

• showToast() is available throughout the application

---

Acceptance Criteria

• Browser alert() dialogs are replaced with toast notifications

• Notifications support Success, Error, Warning, and Information types

• Toasts display with modern styling and animations

• Notifications automatically dismiss after a fixed duration

• Users can manually dismiss notifications

• Accessibility requirements (role="alert" and aria-live) are implemented

• Toasts support both light and dark themes

• Notification system is reusable across the application

• Existing validation and error flows now use showToast()

Technical Notes

• The toast system is implemented as a lightweight standalone utility centered around the reusable showToast(message, type) API, allowing future components to display notifications without duplicating logic.

• Styling is isolated within toast.css, ensuring consistent appearance across the platform while supporting both light and dark themes.

• By replacing native browser alert() dialogs with non-blocking notifications, the application now delivers a significantly smoother and more modern user experience while improving accessibility and maintainability.

• The architecture is designed for future extensibility and can easily support additional features such as persistent notifications, action buttons, notification queues, or custom positioning without major structural changes.

[Madhavi1108]

Hi @Vikrant0207,
I have implemented the changes and thoroughly tested it
Kindly let me know if any changes are needed from my side