Snackbar

                
                    <div class="snack-container">
                        <p>Your photo has been archived.</p>
                        <a href="#" class="snack-link">UNDO</a>
                        <i class="btn-close fa fa-close"></i>
                    </div>
                
            

            
                <button id="snackbar-display-btn">Show snackbar</button>
                <div class="snack-container appear" id="basic-snackbar">
                    <p>Your photo has been archived.</p>
                    <a href="#" class="snack-link">UNDO</a>
                    <i class="btn-close fa fa-close" id="close-snackbar"></i>
                </div>
            
        

     
            
                const snackbarDisplay = document.querySelector("#snackbar-display-btn")
                const snackbarClose = document.querySelector("#close-snackbar")
                const snackbar = document.querySelector("#basic-snackbar")

                snackbarDisplay.addEventListener("click", () => {
                    let x = document.getElementById("basic-snackbar");
                    x.className = "show";
                    setTimeout(()=> x.className = x.className.replace("show", "appear"), 3000);
                })

                snackbarClose.addEventListener("click", () => {
                    snackbar.style.visibility="hidden";
                })