KustomAlert.js

1.js

// 1

function oneAlert() {
    var alertElement = document.createElement("div");
    alertElement.className = "alert";
    alertElement.innerHTML = "This alert will go";

    var styleElement = document.createElement("style");
    styleElement.textContent = `
        @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
        .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 20 80px 20 80px; background-color: #fff; color: #000; text-align: center; border: none; border-radius: 5px; font-size: 24px; box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px; animation: grow 0.3s ease; }
    `;
    document.head.appendChild(styleElement);
    document.body.appendChild(alertElement);
    alertElement.style.display = "block";
    alertElement.addEventListener("animationend", function() {
        setTimeout(closeAlert, 1000);
    });
}

2.js

// 2

function twoAlert() {
    var alertElement = document.createElement("div");
    alertElement.className = "alert";
    alertElement.innerHTML = "This is good alert <br><br> <button onclick='closeAlert()'>Close</button>";

    var styleElement = document.createElement("style");
    styleElement.textContent = `
        @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
        .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 20 80px 20 80px; background-color: #fff; color: #000; text-align: center; border: none; border-radius: 5px; font-size: 24px; box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px; animation: grow 0.3s ease; }
       
        /** Extra button */
        button { border: none; background: #07BBBC; padding: 8px 10px; border-radius: 10px; color: #fff; cursor: pointer;}
        `;
    document.head.appendChild(styleElement);
    document.body.appendChild(alertElement);
    alertElement.style.display = "block";
    alertElement.addEventListener("animationend")
}

function closeAlert() {
    var alertElement = document.querySelector(".alert");
    alertElement.parentNode.removeChild(alertElement);
}

3.js

// 3

function threeAlert() {
    var alertElement = document.createElement("div");
    alertElement.className = "alert";
    alertElement.innerHTML = "<h1> ? </h1> What is Israel? <br> <p>Not an country, or territories. It's a terrorist.</p> <br> <button onclick='closeAlert()'>Close</button>";

    var styleElement = document.createElement("style");
    styleElement.textContent = `
        @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
        .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 0 80px 30 80px; background-color: #fff; color: #000; text-align: center; border: none; border-radius: 5px; font-size: 24px; box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px; animation: grow 0.3s ease; }
        
        /** Extra button */
        button { border: none; background: #07BBBC; padding: 8px 10px; border-radius: 10px; color: #fff; cursor: pointer;}
         
        /** Extra icon */
        h1 { -webkit-animation: pulse 1s infinite ease-in-out alternate; animation: pulse 1s infinite ease-in-out alternate; }
        @-webkit-keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }} @keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }}      
      
        /** Extra text */
        p { font-size: 16px; }
        `;
    document.head.appendChild(styleElement);
    document.body.appendChild(alertElement);
    alertElement.style.display = "block";
    alertElement.addEventListener("animationend")
}

function closeAlert() {
    var alertElement = document.querySelector(".alert");
    alertElement.parentNode.removeChild(alertElement);
}

4.js

// 4

function fourAlert() {
    var alertElement = document.createElement("div");
    alertElement.className = "alert";
    alertElement.innerHTML = "<h1 style='color: red'> X </h1> Human Error <br> <p>Error 404</p> <br> <button onclick='closeAlert()'>Close</button> <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>How to fix</a>";

    var styleElement = document.createElement("style");
    styleElement.textContent = `
        @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
        .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 0 80px 30 80px; background-color: #fff; color: #000; text-align: center; border: none; border-radius: 5px; font-size: 24px; box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px; animation: grow 0.3s ease; }
        
        /** Extra button */
        button { border: none; background: #07BBBC; padding: 8px 10px; border-radius: 10px; color: #fff; cursor: pointer;}
         
        /** Extra icon */
        h1 { -webkit-animation: pulse 1s infinite ease-in-out alternate; animation: pulse 1s infinite ease-in-out alternate; }
        @-webkit-keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }} @keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }}      
      
        /** Extra text */
        p,a { font-size: 16px; }
        `;
    document.head.appendChild(styleElement);
    document.body.appendChild(alertElement);
    alertElement.style.display = "block";
    alertElement.addEventListener("animationend")
}

5.js

// 5

function fiveAlert() {
    var alertElement = document.createElement("div");
    alertElement.className = "alert";
    alertElement.innerHTML = "<h1> ✨ </h1> Any amazing ideas <br> <p>Be <b>Bold</b>, <i>Italic</i>, and <a href='https://ligmatv.vercel.app/' target='_blank'>Link</a> </p>  <input type='text' placeholder='Some input?' /> <br><br> <button onclick='closeAlert()'>Why</button> <button style='background: orange' onclick='closeAlert()'>Good</button> <button onclick='closeAlert()'>Alert</button> <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>How to fix</a>";

    var styleElement = document.createElement("style");
    styleElement.textContent = `
        @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
        .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 0 80px 30 80px; background-color: #fff; color: #000; text-align: center; border: none; border-radius: 5px; font-size: 24px; box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px; animation: grow 0.3s ease; }
        
        /** Extra button */
        button { border: none; background: #07BBBC; padding: 8px 10px; border-radius: 10px; color: #fff; cursor: pointer;}
         
        /** Extra icon */
        h1 { -webkit-animation: pulse 1s infinite ease-in-out alternate; animation: pulse 1s infinite ease-in-out alternate; }
        @-webkit-keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }} @keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }}      
      
        /** Extra text */
        p,a { font-size: 16px; }
        `;
    document.head.appendChild(styleElement);
    document.body.appendChild(alertElement);
    alertElement.style.display = "block";
    alertElement.addEventListener("animationend")
}

6.js

// 6

function sixAlert() {
    var alertElement = document.createElement("div");
    alertElement.className = "alert";
    alertElement.innerHTML = "<br> <img src='https://youtube-stats-card.vercel.app/api?channelid=UC8rQRn6PqLyzyAhpiiGcOjw&title_color=367B80&icon_color=893AEF&text_color=367B80&bg_color=EFF1F5' alt='image' width='300' /> <br><br> Is it good to have an image? <br> <p>Be <b>Bold</b>, <i>Italic</i>, and <a href='https://ligmatv.vercel.app/' target='_blank'>Link</a> </p>  <input type='text' placeholder='Some input?' /> <br><br> <button onclick='closeAlert()'>Why</button> <button style='background: orange' onclick='closeAlert()'>Good</button> <button onclick='closeAlert()'>Alert</button> <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>How to fix</a>";

    var styleElement = document.createElement("style");
    styleElement.textContent = `
        @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
        .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 0 80px 30 80px; background-color: #fff; color: #000; text-align: center; border: none; border-radius: 5px; font-size: 24px; box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px; animation: grow 0.3s ease; }
        
        /** Extra button */
        button { border: none; background: #07BBBC; padding: 8px 10px; border-radius: 10px; color: #fff; cursor: pointer;}
         
        /** Extra icon */
        h1 { -webkit-animation: pulse 1s infinite ease-in-out alternate; animation: pulse 1s infinite ease-in-out alternate; }
        @-webkit-keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }} @keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }}      
      
        /** Extra text */
        p,a { font-size: 16px; }
        `;
    document.head.appendChild(styleElement);
    document.body.appendChild(alertElement);
    alertElement.style.display = "block";
    alertElement.addEventListener("animationend")
}

7.js

// 7

function sevenAlert() {
    var alertElement = document.createElement("div");
    alertElement.className = "alert";
    alertElement.innerHTML = "<br> <img src='https://youtube-stats-card.vercel.app/api?channelid=UC8rQRn6PqLyzyAhpiiGcOjw&title_color=367B80&icon_color=893AEF&text_color=367B80&bg_color=EFF1F5' alt='image' width='300' /> <br><br> Is it good to customize anything? <br> <p>Be <b>Bold</b>, <i>Italic</i>, and <a href='https://ligmatv.vercel.app/' target='_blank'>Link</a> </p>  <input type='range' /> <br><br> <button onclick='closeAlert()'>Why</button> <button style='background: orange' onclick='closeAlert()'>Good</button> <button onclick='closeAlert()'>Alert</button> <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>How to fix</a>";

    var styleElement = document.createElement("style");
    styleElement.textContent = `
        @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
        .alert { display: none; position: fixed; top: 20px; right: 20px; padding: 0 80px 30 80px; background-color: yellow; color: green; text-align: left; border: none; border-radius: 5px; font-size: 24px; box-shadow: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px; animation: grow 0.3s ease; }
        
        /** Extra button */
        button { border: none; background: #07BBBC; padding: 8px 10px; border-radius: 10px; color: #fff; cursor: pointer;}
         
        /** Extra icon */
        h1 { -webkit-animation: pulse 1s infinite ease-in-out alternate; animation: pulse 1s infinite ease-in-out alternate; }
        @-webkit-keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }} @keyframes pulse { from { transform: scale(0.8); } to { transform: scale(1.2); }}      
      
        /** Extra text */
        p,a { font-size: 16px; }
        `;
    document.head.appendChild(styleElement);
    document.body.appendChild(alertElement);
    alertElement.style.display = "block";
    alertElement.addEventListener("animationend")
}

Close Alert.js

// Close Alert

function closeAlert() {
    var alertElement = document.querySelector(".alert");
    alertElement.parentNode.removeChild(alertElement);
}