Simple Alerts Display

INFORMATION & CODE

Simple Alerts Display

What the Code Does

This code creates a sequential, timed display of notification banners—specifically highlighting Information, Success, Warning, Danger, and Error messages. Visually, it builds a styled, centered container holding five distinct alert boxes, each color-coded with a thick left border and paired with a relevant FontAwesome icon to signify its specific message type.

How the Code Works

The mechanism works through a combination of HTML structure, CSS styling, and JavaScript logic. In the CSS, all alert boxes are initially set to visibility: hidden and are given unique background and border colors using structural pseudo- classes (:nth-of-type) to distinguish them. The JavaScript acts as a timed state machine triggered upon the window loading: it reveals the first alert, and then uses a chain of setTimeout functions to sequentially make the next alerts visible every 4 seconds. Once the final error alert is displayed, a final timeout triggers a loop that hides all the alerts simultaneously and restarts the entire cycle.

How to Use the Code

To use this code, you need to set up your project with three standard files matching the provided snippets: an HTML file named index.html, a CSS file named styles.css, and a JavaScript file named scripts.js. Ensure you link an external stylesheet correctly and include the provided FontAwesome Kit script in your HTML <head> so the icons render properly. Once loaded in any modern web browser, the page will automatically run the timed alert sequence without requiring any user interaction.

HTML


                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Alerts Display</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/9c37986c06.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="alert-wrapper">
      <div class="alerts">
        <i class='fas fa-info-circle'></i> <strong>Info:</strong> This is an information message.
      </div>
      <div class="alerts">
        <i class='fas fa-check-circle'></i> <strong>Success:</strong> This is a success message.
      </div>
      <div class="alerts">
        <i class='fas fa-exclamation-circle'></i> <strong>Warning:</strong> This is a warning message!
      </div>
      <div class="alerts">
        <i class='fas fa-exclamation-triangle'> </i> <strong>Danger:</strong> This is a danger warning!
      </div>
      <div class="alerts">
        <i class='fas fa-times-circle'></i> <strong>Error:</strong> This is an Error message!
      </div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      .alert-wrapper {
        width: 100%;
        max-width: 700px;
        padding: 20px;
        margin: 30px auto;
        background: #e1e1e1;
        border: 2px solid #787878;
        border-radius: 20px;
        box-shadow: 3px 4px 10px #787878;
      }
      
      .alerts {
        visibility: hidden;
        width: 100%;
        padding: 30px 20px;
        margin-bottom: 20px;
        background: #99ccff;
        border: 2px solid #0077ff;
        border-left-width: 6px;
        border-radius: 10px;
        font-family: "Courier New", cursive;
        box-shadow: inset 3px 4px 10px #999999;
      }

      .alerts:nth-of-type(2) {
        background-color: #ccffcc;
        border: 2px solid #00cc00;
        border-left-width: 6px;
      }

      .alerts:nth-of-type(3) {
        background-color: #ffcc99;
        border: 2px solid #ff7700;
        border-left-width: 6px;
      }

      .alerts:nth-of-type(4) {
        background-color: #ffcccc;
        border: 2px solid #ff0000;
        border-left-width: 6px;
      }

      .alerts:nth-of-type(5) {
        margin-bottom: 0;
        background-color: #c9c9c9;
        border: 2px solid #000000;
        border-left-width: 6px;
      }

      .fas {
        font-size: 22px;
      }

JAVASCRIPT


                      const alerts = document.querySelectorAll('.alerts');

      window.onload = openInfo();

      function openInfo() {        
        alerts[0].style.visibility = 'visible';
        setTimeout(openSuccess, 4000);
      }

      function openSuccess() {        
        alerts[1].style.visibility = 'visible';
        setTimeout(openWarning, 4000);
      }

      function openWarning() {        
        alerts[2].style.visibility = 'visible';
        setTimeout(openDanger, 4000);
      }

      function openDanger() {        
        alerts[3].style.visibility = 'visible';
        setTimeout(openError, 4000);
      }

      function openError() {        
        alerts[4].style.visibility = 'visible';
        setTimeout(closeAlerts, 4000);
      }

      function closeAlerts() {
        for(i = 0; i < alerts.length; i++) {
          alerts[i].style.visibility = 'hidden';
          setTimeout(openInfo, 4000);
        }
      }

MENU

INFORMATION & CODE