Create a toast alert using only HTML, CSS, and Javascript

Hiya buddies, at present on this weblog, you’ll discover ways to create a toast alert utilizing solely HTML, CSS, and Javascript. In our earlier weblog, we noticed how to create a restaurant menu card design with a filter option using React JS. Earlier, I shared many tasks associated to javascript, you possibly can test if you would like, and do not forget to test HTML, CSS, and Javascript projects.



What’s toast alert?

A notification is a message, electronic mail, icon, or one other image that seems when an software desires you to concentrate. The notifications are a technique to let you already know that one thing new has occurred. The notifications are a technique to let you already know that one thing new has occurred so that you don’t miss something that could be value your consideration and seems whether or not you’re utilizing an software or not. And an alert notification seems when an software desires to warn you about one thing.



You might like these:

On this program [Toast Alert Notification], at first, on the webpage, there’s a button solely however if you click on on that button then the alert notification seems on the appropriate high nook. This notification hides routinely after 5 seconds and there’s additionally a cross-sign button to cover that notification.

There are some choices to pick out, what kind of warn you need to present like you could have chosen warning toast alert, and there’s an choice so as to add toast message if you kind one thing that can be proven within the toast message however in case you depart the textarea clean then an error alert can be proven.

If you happen to like this weblog and need to get the supply codes, I’ve offered all of the codes of this program under and I’ve additionally offered the obtain hyperlink of this program the place you possibly can simply obtain the supply recordsdata of this program.

The Preview is offered here.



HTML Code

<!-- --------------------- Created By InCoder ----------------------->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Appropriate" content material="IE=edge">
    <meta identify="viewport" content material="width=device-width, initial-scale=1.0">
    <title>Toast Alert - InCoder</title>
    <hyperlink rel="stylesheet" href="https://style-tricks.com/incoderweb/major.css">
    <hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<physique>
    <div class="optionsWrapper">
        <div class="selectOption">
            <p>Choose Sort</p>
            <choose id="toastType">
                <choice worth="success">Success</choice>
                <choice worth="error">Error</choice>
                <choice worth="warning">Warning</choice>
                <choice worth="information">Data</choice>
            </choose>
        </div>
        <p>Enter Toast Message</p>
        <textarea placeholder="Toast message" id="toastMessage" cols="30" rows="5"></textarea>
        <button class="btn">Present Alert</button>
    </div>


    <script src="toast.js"></script>
    <script src="script.js"></script>
</physique>

</html>
Enter fullscreen mode

Exit fullscreen mode



CSS Code

/* --------------------- Created By InCoder --------------------- */

@import url('https://fonts.googleapis.com/css2?household=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&show=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

physique{
    show: flex;
    top: 100vh;
    align-items: heart;
    flex-direction: column;
    justify-content: heart;
    background-color: #4a43be;
}

.btn {
    width: 8rem;
    show: grid;
    top: 2.5rem;
    font-size: 1rem;
    cursor: pointer;
    shade: #4a43be;
    place-items: heart;
    border-radius: .4rem;
    transition: all 300ms;
    border: 2px stable #4a43be;
    background-color: clear;
}

.btn:hover {
    shade: #fff;
    background-color: #4a43be;
}

.toast-container {
    place: mounted;
    high: 0;
    proper: 0;
    show: flex;
    flex-direction: column;
    margin: 1rem;
}

.toast-container .inAlert{
    show: flex;
    min-height: 3rem;
    min-width: 18rem;
    max-width: 24rem;
    align-items: heart;
    padding: .5rem .5rem;
    border-radius: .4rem;
    remodel: translateX(25rem);
    justify-content: space-between;
    shade: rgb(255 255 255 / 80%);
    transition: remodel .5s cubic-bezier(0.24, 0.91, 0.62, 1.24);
}

.toast-container .inAlert.slide-in {
    remodel: translateX(0rem);
}

.toast-container .inAlert.error .icon i {
    content material: 'f058';
}

.toast-container .inAlert.error {
    background-color: rgb(226 45 59 / 80%)
}

.toast-container .inAlert.success {
    background-color: rgb(43 198 111 / 80%)
}

.toast-container .inAlert.information {
    background-color: rgb(25 140 146 / 80%)
}

.toast-container .inAlert.warning {
    background-color: rgb(214 175 12 / 80%)
}

.toast-container i {
    font-size: 1.5rem;
    margin:  0 .5rem;
    shade: rgb(255 255 255 / 80%)
}

.toast-container .inAlert .wrapper{
    show: flex;
    align-items: heart;
}

.toast-container .inAlert .wrapper .title {
    text-transform: capitalize;
}

.toast-container .inAlert .closeAlert {
    cursor: pointer;
}

.toast-container .inAlert .wrapper .message {
    font-size: .8rem;
}

.optionsWrapper{
    width: 20rem;
    padding: .5rem .5rem;
    border-radius: .4rem;
    background-color: #fff;
}

.optionsWrapper .selectOption {
    margin-bottom: .6rem;
}

.optionsWrapper p {
    font-size: .9rem;
    font-weight: 500;
}

.optionsWrapper choose,
.optionsWrapper textarea {
    width: 100%;
}

.optionsWrapper choose{
    top: 2rem;
    padding: 0 .2rem;
    border-radius: .3rem;
}

.optionsWrapper textarea {
    define: none;
    padding: .2rem;
    border-radius: .3rem
}

.optionsWrapper textarea:focus{
    border: 2px stable #4a43be;
}
Enter fullscreen mode

Exit fullscreen mode



Javascript Code

const showAlert = (knowledge) => {
    let { kind, message } = knowledge
    let autoClose
    knowledge.autoClose == undefined ? autoClose = 3000 : autoClose = knowledge.autoClose 

    let toastContainer = doc.createElement('div')
    toastContainer.classList.add('toast-container')
    var container = doc.querySelector('.toast-container')
    if (typeof (container) != 'undefined' && container != null) return
    doc.physique.appendChild(toastContainer)
    let icon
    if(kind == 'error') {
        icon = 'fa-circle-exclamation'
    } else if(kind == 'success'){
        icon = 'fa-circle-check'
    } else if(kind == 'warning'){
        icon = 'fa-triangle-exclamation'
    } else if(kind == 'information'){
        icon = 'fa-circle-info'
    }

    let alert = `<div class="inAlert ${kind}">
                    <div class="wrapper">
                        <div class="icon">
                        <i class="fa-solid ${icon}"></i>
                        </div>
                        <div class="particulars">
                            <div class="title">${kind}</div>
                            <div class="message">${message}</div>
                        </div>
                    </div>
                    <i class="fa-solid fa-xmark closeAlert"></i>
                </div>`
    toastContainer.insertAdjacentHTML('afterbegin', alert)
    setTimeout(() => {
        var isAlert = doc.querySelector('.inAlert')
        if (typeof (isAlert) != 'undefined' && isAlert != null) isAlert.classList.add('slide-in')
    }, 100)

    setTimeout(() => {
        var isAlert = doc.querySelector('.inAlert')
        if (typeof (isAlert) != 'undefined' && isAlert != null) isAlert.classList.take away('slide-in')
        setTimeout(() => {
            doc.querySelector('.inAlert').take away()
            removeToast()
        }, 100)
    }, autoClose)

    let closeBtn = doc.querySelector('.closeAlert')
    closeBtn.addEventListener('click on', () => {
        doc.querySelector('.inAlert').classList.take away('slide-in')
        setTimeout(() => {
            doc.querySelector('.inAlert').take away()
            removeToast()
        }, 100)
    })
}

const removeToast = () => {
    var container = doc.querySelector('.toast-container')
    if (!container.hasChildNodes()) container.take away()
}

let btn = doc.querySelector('.btn')

btn.addEventListener('click on', () => {
    let toastType = doc.querySelector('#toastType').worth
    let toastMessage = doc.querySelector('#toastMessage').worth.trim()
    if(toastMessage == '') showAlert({
        kind: 'error',
        message: 'Toast Message can't be empty',
    })

    showAlert({
        kind: toastType,
        message: toastMessage,
    })
})
Enter fullscreen mode

Exit fullscreen mode

Add a Comment

Your email address will not be published. Required fields are marked *