Instructions

Toast notifications are small messages that appear on the surface of a web page’s main content. They are used to inform the user of the system’s processes, alerts, or actions in an unobtrusive manner. One example is confirming that a user-triggered action was successful.

Typically, toast notifications disappear automatically after a few seconds, but users also have the option to dismiss them.

Your assignment is to build a custom toast notification system using HTML, CSS, and JavaScript. This project aims to help you practice DOM manipulation, event handling, and dynamic CSS styling.

It’s possible to complete this project entirely using HTML, CSS, and vanilla JavaScript. If you wish, you may use a library or framework like React, Vue, or Angular if you want to practice any of those.

Try to make your finished product look as much like the provided designs as possible.

Aim for professional-grade code in your solution. Refactor your code so it's efficient and adheres to best practices. Practice test-driven development, write DRY code, choose clear variable names, ensure all comments are explicitly needed and are clear.

User Stories

Ensure your code delivers the following functionality to your users:

1. Show Toast: When a user clicks the "Show Toast" button, a toast notification should appear at the top right of the page and then disappear after 3 seconds.
2. Customizable Contents: To make the Toast Notification reusable for different contexts, the toast should accept an optional title field and display title text, as shown in the mockups.

Stretch Goals

To go above and beyond, consider adding one or more of the following features:

• Task Modification: Enable users to edit task details directly from the detail page, including priority, due date, and assignees.
• Collaboration Enhancement: Add a comment section where team members can discuss the task, update progress, or ask questions.
• Activity Tracking: Incorporate a history or activity log showing changes made to the task over time.