<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="countdowntimer.css" rel="stylesheet" />
    <script src="countdowntimer.js" defer></script>
    <title></title>
</head>
<body>
    <section class="container">
        <h1> Countdown timer</h1>


        <section class="buttons-container">
            <input type="number" placeholder="HH" maxlength="2" min="0" max="99"  id="hours" oninput="this.value=this.value.slice(0,this.maxLength)" />
            <input type="number" placeholder="MM" maxlength="2" min="0" max="59" id="minutes"  oninput="this.value=this.value.slice(0,this.maxLength)"/>
            <input type="number" placeholder="SS" maxlength="2" min="0" max="59" id="seconds" oninput="this.value=this.value.slice(0,this.maxLength)" />
            <button type="button" onclick="start()" id="start">Start</button>
            <button type="button" onclick="pause()" id="pause" hidden >Pause</button>
            <button type="button" onclick="reset()" id="reset" hidden>Reset</button>

        </section>

    </section>

</body>
</html>
.container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


.buttons-container {
    display-flex;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
}


button {
    width: 50px;
}

input {
    width: 40px;
}
let seconds = 0;
let dispseconds = 0;
let dispminutes = 0;
let disphours = 0;



let inphours = document.getElementById("hours");
let inpminutes = document.getElementById("minutes");
let inpseconds = document.getElementById("seconds");

let btnstart = document.getElementById("start");
let btnpause = document.getElementById("pause");
let btnreset = document.getElementById("reset");
let interval;

function start() {

    dispseconds = inpseconds.value;
    dispminutes = inpminutes.value;
    disphours = inphours.value;

    seconds += inphours.value * 3600;
    seconds += inpminutes.value * 60;
    seconds += inpseconds.value * 1;
    
    interval = setInterval(finished, 1000);
    btnstart.hidden = true;
    btnpause.hidden = false;
    btnreset.hidden = false;
  

}

function reset() {
    btnstart.hidden = false;
    btnpause.hidden = true;
    btnreset.hidden = true;
    seconds = 0;
    clearInterval(interval);
    inphours.value = "HH";
    inpminutes.value = "MM";
    inpseconds.value = "SS";
}


function pause() {

    clearInterval(interval);
    btnpause.hidden = true;
    btnstart.hidden = false;



}


function finished() {
    seconds--;
    if (seconds <= 0) {
        clearInterval(interval);
        alert("finished!");
    }
    dispseconds--;
    if (dispseconds < 0) {
        if (dispminutes == 0) {
            if (disphours > 0) {
                disphours--;
                dispminutes = 59;
                dispseconds = 59;

            }
        }
        else {
            dispminutes--;
            dispseconds = 59;
        }
        

    }
    inphours.value = String(disphours).padStart(2, '0');
    inpminutes.value = String(dispminutes).padStart(2, '0');
    inpseconds.value = String(dispseconds).padStart(2, '0');

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.