HTML, CSS 및 Javascript만 사용하여 토스트 알림 생성

HTML, CSS 및 Javascript만 사용하여 토스트 알림 생성

2022-10-19 last update

10 minutes reading incoder css html javascript
안녕하세요, 오늘 이 블로그에서는 HTML, CSS 및 Javascript만 사용하여 알림 메시지를 만드는 방법을 배웁니다. 이전 블로그에서 how to create a restaurant menu card design with a filter option using React JS 을 보았습니다. 이전에 javascript 과 관련된 많은 프로젝트를 공유했는데 원하는 경우 확인할 수 있으며 HTML, CSS, and Javascript projects 확인하는 것을 잊지 마십시오.

토스트 알림이란?



알림은 애플리케이션에서 사용자가 주의를 기울일 때 표시되는 메시지, 이메일, 아이콘 또는 기타 기호입니다. 알림은 새로운 일이 발생했음을 알려주는 방법입니다. 알림은 새로운 일이 발생했음을 알려주는 방법이므로 애플리케이션 사용 여부에 관계없이 주의할 가치가 있고 표시되는 항목을 놓치지 않습니다. 그리고 응용 프로그램이 무언가에 대해 경고하려고 할 때 경고 알림이 나타납니다.

다음을 좋아할 수 있습니다.


  • Filterable Image Gallery with preview
  • Cool Button with Background Animation
  • Create button to download image
  • How to Detect User Location

  • 이 [토스트 알림 알림] 프로그램은 처음에는 웹페이지에 버튼만 있는데 그 버튼을 클릭하면 우측 상단에 알림 알림이 뜹니다. 이 알림은 5초 후에 자동으로 숨겨지며 해당 알림을 숨길 수 있는 십자 표시 버튼도 있습니다.

    선택할 수있는 몇 가지 옵션이 있습니다. 경고 토스트 경고를 선택한 것처럼 표시하려는 경고 유형이 있으며 토스트 메시지에 표시 될 항목을 입력 할 때 토스트 메시지를 추가하는 옵션이 있지만 텍스트 영역을 떠날 경우 비어 있으면 오류 경고가 표시됩니다.

    이 블로그가 마음에 들고 소스 코드를 얻고 싶다면 아래에 이 프로그램의 모든 코드를 제공했으며 이 프로그램의 소스 파일을 쉽게 다운로드할 수 있는 이 프로그램의 다운로드 링크도 제공했습니다.

    미리보기를 사용할 수 있습니다here.

    HTML 코드




    <!-- --------------------- Created By InCoder ----------------------->
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Toast Alert - InCoder</title>
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    </head>
    
    <body>
        <div class="optionsWrapper">
            <div class="selectOption">
                <p>Select Type</p>
                <select id="toastType">
                    <option value="success">Success</option>
                    <option value="error">Error</option>
                    <option value="warning">Warning</option>
                    <option value="info">Information</option>
                </select>
            </div>
            <p>Enter Toast Message</p>
            <textarea placeholder="Toast message" id="toastMessage" cols="30" rows="5"></textarea>
            <button class="btn">Show Alert</button>
        </div>
    
    
        <script src="toast.js"></script>
        <script src="script.js"></script>
    </body>
    
    </html>
    


    CSS 코드




    /* --------------------- Created By InCoder --------------------- */
    
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],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&display=swap');
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    
    body{
        display: flex;
        height: 100vh;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        background-color: #4a43be;
    }
    
    .btn {
        width: 8rem;
        display: grid;
        height: 2.5rem;
        font-size: 1rem;
        cursor: pointer;
        color: #4a43be;
        place-items: center;
        border-radius: .4rem;
        transition: all 300ms;
        border: 2px solid #4a43be;
        background-color: transparent;
    }
    
    .btn:hover {
        color: #fff;
        background-color: #4a43be;
    }
    
    .toast-container {
        position: fixed;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        margin: 1rem;
    }
    
    .toast-container .inAlert{
        display: flex;
        min-height: 3rem;
        min-width: 18rem;
        max-width: 24rem;
        align-items: center;
        padding: .5rem .5rem;
        border-radius: .4rem;
        transform: translateX(25rem);
        justify-content: space-between;
        color: rgb(255 255 255 / 80%);
        transition: transform .5s cubic-bezier(0.24, 0.91, 0.62, 1.24);
    }
    
    .toast-container .inAlert.slide-in {
        transform: translateX(0rem);
    }
    
    .toast-container .inAlert.error .icon i {
        content: '\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.info {
        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;
        color: rgb(255 255 255 / 80%)
    }
    
    .toast-container .inAlert .wrapper{
        display: flex;
        align-items: center;
    }
    
    .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 select,
    .optionsWrapper textarea {
        width: 100%;
    }
    
    .optionsWrapper select{
        height: 2rem;
        padding: 0 .2rem;
        border-radius: .3rem;
    }
    
    .optionsWrapper textarea {
        outline: none;
        padding: .2rem;
        border-radius: .3rem
    }
    
    .optionsWrapper textarea:focus{
        border: 2px solid #4a43be;
    }
    


    자바스크립트 코드




    const showAlert = (data) => {
        let { type, message } = data
        let autoClose
        data.autoClose == undefined ? autoClose = 3000 : autoClose = data.autoClose 
    
        let toastContainer = document.createElement('div')
        toastContainer.classList.add('toast-container')
        var container = document.querySelector('.toast-container')
        if (typeof (container) != 'undefined' && container != null) return
        document.body.appendChild(toastContainer)
        let icon
        if(type == 'error') {
            icon = 'fa-circle-exclamation'
        } else if(type == 'success'){
            icon = 'fa-circle-check'
        } else if(type == 'warning'){
            icon = 'fa-triangle-exclamation'
        } else if(type == 'info'){
            icon = 'fa-circle-info'
        }
    
        let alert = `<div class="inAlert ${type}">
                        <div class="wrapper">
                            <div class="icon">
                            <i class="fa-solid ${icon}"></i>
                            </div>
                            <div class="details">
                                <div class="title">${type}</div>
                                <div class="message">${message}</div>
                            </div>
                        </div>
                        <i class="fa-solid fa-xmark closeAlert"></i>
                    </div>`
        toastContainer.insertAdjacentHTML('afterbegin', alert)
        setTimeout(() => {
            var isAlert = document.querySelector('.inAlert')
            if (typeof (isAlert) != 'undefined' && isAlert != null) isAlert.classList.add('slide-in')
        }, 100)
    
        setTimeout(() => {
            var isAlert = document.querySelector('.inAlert')
            if (typeof (isAlert) != 'undefined' && isAlert != null) isAlert.classList.remove('slide-in')
            setTimeout(() => {
                document.querySelector('.inAlert').remove()
                removeToast()
            }, 100)
        }, autoClose)
    
        let closeBtn = document.querySelector('.closeAlert')
        closeBtn.addEventListener('click', () => {
            document.querySelector('.inAlert').classList.remove('slide-in')
            setTimeout(() => {
                document.querySelector('.inAlert').remove()
                removeToast()
            }, 100)
        })
    }
    
    const removeToast = () => {
        var container = document.querySelector('.toast-container')
        if (!container.hasChildNodes()) container.remove()
    }
    
    let btn = document.querySelector('.btn')
    
    btn.addEventListener('click', () => {
        let toastType = document.querySelector('#toastType').value
        let toastMessage = document.querySelector('#toastMessage').value.trim()
        if(toastMessage == '') showAlert({
            type: 'error',
            message: 'Toast Message cannot be empty',
        })
    
        showAlert({
            type: toastType,
            message: toastMessage,
        })
    })