JavaScript - Create Custom Alerts with JavaScript and CSS

How to Create Custom Alerts with HTML, CSS, and JavaScript

In this Javascript tutorial, we will see how to create and display various types of alerts (such as error, success, warning, and info) when buttons are clicked.

Additionally, we will implement functionality that allows users to close these alerts individually.

Project Source Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Alerts</title>

        <style>

            .btn-box{ display: flex; justify-content: center; align-items: center; }

            .btn-box button{ border:none; border-radius: 4px; padding: 10px 20px;
                             margin: 5px; font-size: 16px; cursor: pointer;
                             transition: background-color 0.3s ease; color: #fff;
                           }

            .btn-box button.error-btn{ background-color: #e74c3c; }
            .btn-box button.success-btn{ background-color: #27ae60; }
            .btn-box button.warnning-btn{ background-color: #f39c12; }
            .btn-box button.info-btn{ background-color: #3498db; }

            .btn-box button:hover{ background-color: rgba(0, 0, 0, 0.1);
                                   color:#000;
                                 }
            

.alert{ padding: 20px; border-radius: 5px; text-align: center; position: relative;
        width: 100%; margin: 0 auto; color: #333; font-size: 16px;
        margin-bottom: 15px; box-sizing: border-box; display: none;
       }
 .alert p{ font-family: Arial, Helvetica, sans-serif }

.alert.error{ background-color: #ffe0e0; color: #d8000c; 
               border: 1px solid #d8000c; 
            }

.alert.success{ background-color: #e6ffe6; color: #006600; 
               border: 1px solid #006600; 
            }

.alert.warnning{ background-color: #fcc28c77; color: #ff9900; 
               border: 1px solid #ff9900; 
            }
            
.alert.info{ background-color: #d7f0fa; color: #4169e1; 
               border: 1px solid #4169e1; 
            }

.close{ position: absolute; top: 5px; right: 5px; cursor: pointer;
        font-size: 20px; padding: 1px 4px; transition: color 0.2s ease-in-out;
       }

.close:hover{ color: #fff; }

        </style>

  </head>

<body>

    <div class="btn-box">
        <button class="error-btn" id="errorBtn">Error</button>
        <button class="success-btn" id="successBtn">Success</button>
        <button class="warnning-btn" id="warnningBtn">Warnning</button>
        <button class="info-btn" id="infoBtn">Info</button>
    </div>

    <div class="alert error" id="alert-error">
        <p>Error</p>
        <span class="close">&times;</span>
    </div>

    <div class="alert success" id="alert-success">
        <p>Success</p>
        <span class="close">&times;</span>
    </div>
    
    <div class="alert warnning" id="alert-warnning">
        <p>Warnning</p>
        <span class="close">&times;</span>
    </div>

    <div class="alert info" id="alert-info">
        <p>Info</p>
        <span class="close">&times;</span>
    </div>


    <script>
    
    // buttons
    const errorBtn = document.getElementById('errorBtn');
    const successBtn = document.getElementById('successBtn');
    const warnningBtn = document.getElementById('warnningBtn');
    const infoBtn = document.getElementById('infoBtn');
    // alerts
    const alertError = document.getElementById('alert-error');
    const alertSuccess = document.getElementById('alert-success');
    const alertWarnning = document.getElementById('alert-warnning');
    const alertInfo = document.getElementById('alert-info');

    // button click event
    errorBtn.onclick = function(){
        alertError.style.display = "block";
    }

    successBtn.onclick = function(){
        alertSuccess.style.display = "block";
    }

    warnningBtn.onclick = function(){
        alertWarnning.style.display = "block";
    }

    infoBtn.onclick = function(){
        alertInfo.style.display = "block";
    }

    // close alert (x)
    document.getElementsByClassName('close')[0].onclick = function(){
        alertError.style.display = "none";
    }

    document.getElementsByClassName('close')[1].onclick = function(){
        alertSuccess.style.display = "none";
    }

    document.getElementsByClassName('close')[2].onclick = function(){
        alertWarnning.style.display = "none";
    }

    document.getElementsByClassName('close')[3].onclick = function(){
        alertInfo.style.display = "none";
    }


    </script>



</body>
      

</html>