Apr 27, 2022

Simple Countdown

JavaScript 1541 views

Part 1:


Part 2:

<!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>JavaScript Countdown</title>
    <style>
        body {
            background-color: #383838;
        }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
        }

        h1 {
            font-size: 180px;
            color: #fff;
            text-shadow: 0 0 15px #ff8800;
        }
    </style>
    <script>
        let i = 100;
        let timer;

        function counter() {
            timer = setInterval(() => {
                i--;
                let extraZ = (i < 10) ? '0' : '';
                document.getElementById("counter").innerHTML = extraZ + i;
                if(i <= 0) {
                    clearInterval(timer);
                    document.getElementById("startBtn").disabled = false;
                    document.getElementById("stopBtn").disabled = true;
                    document.getElementById("pauseBtn").disabled = true;
                    document.getElementById("resumeBtn").disabled = true;
                }
            }, 1000);
        }

        function start() {
            document.getElementById("startBtn").disabled = true;
            document.getElementById("stopBtn").disabled = false;
            document.getElementById("pauseBtn").disabled = false;
            document.getElementById("resumeBtn").disabled = true;
            i = 100;
            counter();
        }

        function pause() {
            clearInterval(timer);
            document.getElementById("pauseBtn").disabled = true;
            document.getElementById("resumeBtn").disabled = false;
        }

        function resume() {
            counter();
            document.getElementById("pauseBtn").disabled = false;
            document.getElementById("resumeBtn").disabled = true;
        }

        function stop() {
            i = 0;
            clearInterval(timer);
            document.getElementById("counter").innerHTML = "00";

            document.getElementById("startBtn").disabled = false;
            document.getElementById("stopBtn").disabled = true;
            document.getElementById("pauseBtn").disabled = true;
            document.getElementById("resumeBtn").disabled = true;
        }
    </script>
</head>
<body>
    <section>
        <h1 id="counter">00</h1>
        <div class="btn">
            <button type="button" id="startBtn" onclick="start()">Start</button>
            <button type="button" disabled id="pauseBtn" onclick="pause()">Pause</button>
            <button type="button" disabled id="resumeBtn" onclick="resume()">Resume</button>
            <button type="button" disabled id="stopBtn" onclick="stop()">Stop</button>
        </div>
    </section>
</body>
</html>
                                Copy Code

Result Screenshot(s)

Simple CountdownWorking Sample0