12_async_func_1.html

<!-- frist example on async for countdown timer --> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Count down timer </title>
</head>
<body>
    <h1 id="display">10</h1>
    <button id="startbtn">Start</button>
    <button id="stopbtn">Stop</button>
    <button id="resetbtn">Reset</button>
    <br/>
    <br/>
    <!--  html for popup notification -->
    <button id="showbtn"> Show Notification </button>
    <button id="cancelbtn"> canceal Auto-hide</button>
    <div id="toast" style="display: none;"> Task Saved Successfully</div>
    <script >
        let timeout = 10;
        let intervalid = null;
       
        const display = document.getElementById("display");

        function startTime (){
            if (intervalid !== null) return ;  // already run then not start again
            intervalid = setInterval(()=>{
                timeout--;
                if(timeout <= 0){
                    clearInterval (intervalid);//close interval after time ends 
                    intervalid = null;
                    display.textContent = "Time`s up";
                    return;
                }
                display.textContent = timeout;
                

            },1000);
        }
        function stopTimer(){
            clearInterval(intervalid);
            intervalid = null;
        }
        function  resetTimer(){
            clearInterval (intervalid);
            intervalid = null;
            timeout = 10;
            display.textContent = timeout;
        }
        document.getElementById("startbtn").addEventListener("click",startTime);
        document.getElementById("stopbtn").addEventListener("click",stopTimer);
        document.getElementById("resetbtn").addEventListener("click",resetTimer);



        // js for second project 

        const toast =  document.getElementById("toast");
        let timeoutId = null;
        function showTest(){
            toast.style.display="block";
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                toast.style.display="none";
                timeoutId = null;
            }, 3000);
        }
            function cancelHide(){
                clearTimeout(timeoutId);
                toast.style.display="none";
                timeoutId = null;
                console.log("auto-hide cancealled");
            }
            document.getElementById("showbtn").addEventListener("click",showTest);
            document.getElementById("cancelbtn").addEventListener("click",cancelHide);
        
    </script>
</body>
</html>