INFORMATION & CODE
Dynamic Toast Display
What the Code Does
This code creates a toast notification interface. A toast is a small notification that temporarily appears on the screen to tell the user that an action has been completed. In this example, there are three buttons: Save HTML, Save CSS, and Save JS. When one of the buttons is clicked, a green “Success” notification slides into view and displays which type of code was saved. The notification automatically disappears after three seconds, and the user can also close it manually.
The Technologies Used
HTML
The HTML provides the structure of the webpage. The document begins with <!doctype html>, which tells the browser that the page uses modern HTML5. The <html lang="en-US"> element contains the entire webpage, while the <head> section contains configuration and external resources. The character encoding is set to UTF-8, and the viewport meta tag makes the page adapt better to different screen sizes.</head>
The <title> sets the browser tab title to “Dynamic Toast Display”. The page also loads an external CSS file called styles.css. Two Google font families, Press Start 2P and VT323, are loaded, although neither is actually used by the CSS shown. Font Awesome is loaded so that icons such as the check mark and close (X) can be displayed. jQuery 3.5.1 is also loaded because the JavaScript uses jQuery to retrieve the data-id value from the clicked button.
The main content is contained inside <main class="toast-wrapper">. Inside this wrapper is the .toast element, which represents the notification itself. The notification contains a check-mark icon, a message, a close icon, and a progress bar. The message contains the word “Success” and a second piece of text: Your <span class="code-type"></span> changes has been saved. The empty .code-type span is important because JavaScript dynamically inserts HTML, CSS, or JAVASCRIPT into it depending on which button the user clicks.
Three buttons are then provided. Each has the class toast-button, which allows JavaScript and CSS to identify all three buttons. Each button also has a data-id attribute containing the type of code it represents. For example, the HTML button has data-id="HTML". These custom data-* attributes provide a convenient way of storing information directly on an HTML element.
Finally, <script src="scripts.js"></script> loads the external JavaScript file after the HTML content has been created. Placing the script at the end of the <body> means the elements it needs to find already exist in the page when the JavaScript executes.
CSS
The CSS controls the appearance, positioning, animation, and interaction styling of the notification. The universal selector * removes the default margin and padding from all elements and applies box-sizing: border-box. It also sets Poppins as the default font. Poppins is imported separately with @import, so the two fonts loaded in the HTML are effectively unnecessary for this particular CSS.
The body is made 100vh high, meaning it occupies the full height of the browser window. display: flex, align-items: center, and justify-content: end position the main wrapper toward the right side of the screen. overflow: hidden prevents content that extends outside the viewport from creating scrollbars.
The .toast-wrapper creates the large pale-yellow container around the buttons. It is 500 pixels wide and 400 pixels high, has padding, a green border, rounded corners, and a small right margin. The negative margin-top: -200px moves it upward relative to its normal flex positioning. This wrapper is primarily a visual container for the buttons; it is not responsible for displaying the notification itself.
The .toast element is the actual notification. It uses position: absolute, placing it near the top-right corner of the page. It has a white background, rounded corners, padding, a subtle shadow, and a green left-hand border. Most importantly, it initially has transform: translateX(calc(100% + 30px)). This moves it horizontally outside the visible right side of the screen. The transition property creates a smooth animation whenever the transform changes.
The .toast.active rule changes the transform to translateX(0%). Therefore, when JavaScript adds the active class to the toast, the notification moves from outside the screen into its normal position. When the class is removed, it slides back out. The unusual cubic-bezier value gives the movement a slight overshoot/bounce effect.
The check-mark icon is styled by .toast-content .check. It is given a 35-by-35-pixel circular green background with a white icon in the middle. The .message container uses flexbox with flex-direction: column, causing the “Success” heading and the descriptive message to appear one above the other. The first text line is made darker and bolder using .message .text.text-1.
The .close icon is positioned absolutely in the top-right corner of the notification. Its cursor: pointer property changes the mouse pointer to indicate that it can be clicked. Its opacity increases when the user hovers over it, providing a small visual interaction.
The progress bar is created using .toast .progress and .toast .progress:before. The .progress element forms a three-pixel-high grey bar at the bottom of the toast. Its ::before pseudo-element creates the green portion that covers the bar. When the active class is added to .progress, the @keyframes progress animation runs for three seconds.
The animation moves the green pseudo-element by changing its right property from 0 to 100%. Because the animation uses linear, the green bar moves at a constant speed. This gives the user a visual indication that the notification is about to disappear.
The .toast-button rules style the three buttons with green backgrounds, white text, rounded corners, padding, and a pointer cursor. The button:hover rule changes the background from #00aa00 to the darker #007700 when the mouse is placed over a button.
One particularly useful rule is .toast.active ~ button { pointer-events: none; }. The ~ is the general sibling selector. Because the toast and buttons are siblings inside .toast-wrapper, this rule prevents the buttons from being clicked while the toast is active. This helps prevent users from repeatedly triggering the notification while it is already being displayed.
JavaScript
The JavaScript provides the behaviour that makes the toast notification interactive. The first statement uses document.querySelectorAll(".toast-button") to select all three buttons. It also selects the .code-type, .toast, .close, and .progress elements and stores references to them in variables.
The code then declares two timer variables, timer1 and timer2. These variables will hold the identifiers returned by setTimeout(), allowing the timers to be cancelled later if the user closes the notification manually.
The for loop goes through each button and attaches a click event listener. When a button is clicked, the event object e contains information about the element that triggered the event. The expression e.target therefore refers to the button that was clicked.
The line codeType.textContent = $(e.target).data('id'); obtains the button's data-id attribute using jQuery. For example, clicking Save CSS gives the button a data-id value of CSS, so JavaScript changes the empty .code-type span to CSS. The notification consequently displays “Your CSS changes has been saved.” The same process works for HTML and JAVASCRIPT.
Next, toast.classList.add("active") adds the active CSS class to the notification. This changes its transform from the off-screen position to translateX(0%), causing the toast to slide onto the screen.
At the same time, progress.classList.add("active") activates the progress-bar animation. The progress bar therefore begins its three-second countdown.
The first setTimeout() stores a timer in timer1. After 3,000 milliseconds, it removes the active class from the toast. This causes the notification to slide off the screen again. The second timer waits 3,300 milliseconds before removing the active class from the progress bar. The extra 300 milliseconds gives the toast's exit transition time to finish before the progress animation is reset.
The close icon has its own click event. When the user clicks the X, the toast immediately loses its active class and therefore begins sliding away. A separate 300-millisecond timeout removes the active class from the progress bar. The calls to clearTimeout(timer1) and clearTimeout(timer2) are important because they cancel the original automatic timers. Without those calls, the original timers could still execute after the user had already closed the notification.
How the complete system works
The three technologies work together in a simple sequence. HTML creates the buttons and notification structure, CSS controls how everything looks and animates, and JavaScript controls when the notification appears and disappears.
For example, suppose the user clicks Save HTML. JavaScript detects the click, reads data-id="HTML" from the button, and places HTML into the .code-type span. It then adds active to both the toast and progress bar. CSS responds to those classes by sliding the notification onto the screen and starting the three-second progress animation.
After three seconds, JavaScript removes active from the toast. CSS then moves the toast back outside the right side of the screen. If the user instead clicks the X before the three seconds have elapsed, the notification closes immediately and the existing timers are cancelled.
How to use the code
To use this code, you would normally create three files in the same folder: index.html, styles.css, and scripts.js. Put the HTML code in index.html, the CSS in styles.css, and the JavaScript in scripts.js. The HTML already references those files, so they should have those exact filenames unless you change the <link> and <script> references.
You also need an internet connection for the external resources used by the page, namely Google Fonts, Font Awesome, and jQuery. If you do not want to depend on jQuery, the JavaScript can easily be rewritten using ordinary JavaScript because the data-id value can be retrieved with e.target.dataset.id.
To add another notification button, create another button with the toast-button class and give it an appropriate data-id. For example, a button with data-id="PYTHON" would automatically produce a notification saying “Your PYTHON changes has been saved”, without requiring any additional JavaScript.
Overall, this is a small success-toast notification system demonstrating how HTML elements, CSS classes, CSS animations, JavaScript event listeners, timers, custom data-* attributes, and jQuery can be combined to create an interactive user interface.
HTML
CSS
JAVASCRIPT