Toast Notification

A simple JavaScript project that displays a toast notification when a button is clicked or any other event occurs. The toast notification provides a visual feedback to the user about the action performed.

Technologies Used

• HTML
• CSS
• JavaScript

Features

• Responsive toast notification that appears at the top or bottom of the screen.
• Customizable message and duration of the toast notification.
• Smooth animation and transition effects.
• Additional hover effects for an enhanced user experience.

Usage

1. Include the CSS and JavaScript files in your HTML file.

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

2. Create a button or any other element that triggers the toast notification.

<button onclick="showToast()">Submit</button>

3. Initialize the toast notification in your JavaScript file.

function showToast() {
  // Create a new toast notification
  const toast = new ToastNotification('Your message goes here', {
    position: 'top', // 'top' or 'bottom'
    duration: 3000 // Duration in milliseconds
  });

  // Show the toast notification
  toast.show();
}

4. Customize the CSS styles in the toast.css file to match your design preferences.

Demo

A live demo of the "Toast Notification" project can be found here.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License.

Acknowledgements

• The toast notification design and animation were inspired by example-source.

Feel free to update the content and add any additional details specific to your project.