Automatically Convert User Inputted Seconds To HH:MM:SS Countdown Timer

Question

So, I have this very simple Vanilla JS + HTML code wherein I can input my desired number of seconds and it will countdown on button click. I need help improving this code wherein, instead of counting down the inputted seconds, it will convert the seconds to hours, minutes, and seconds on button click and it will countdown the result at the same time. Think of it as a seconds to HH:MM:SS converter + Countdown.

Note: I want to run this code offline without dependencies. So, I will greatly appreciate it if we can come up with a solution using Vanilla JS. As simple as this may be for most, my knowhow in JS programming is really mediocre. Sorry. Thanks for the help and suggestions in advance.

HTML

<form>
    <p>Input Seconds:</p>
    <input id="number" type="text" autocomplete="off"/>
    <button type="button" id="start">Start Timer</button>
</form>
<div id="area"><p id="text1" style="color: red;">Click Start</p></div>

Vanilla Javascript

<script>
window.onload = init;
function init(){
    var start = document.getElementById("start");
    start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown(),1000);}

function countDown(){
    var number = document.getElementById("number");
    var value = parseInt(number.value, 10);
    var area = document.getElementById("text1");
    var audio = new Audio('audioURL.mp3');
    var interval = setInterval(function() {
        if (value > 1) {
            area.innerText = value-1;
            value--;
        } else {
            clearInterval(interval);
            area.innerText = "Countdown Ended";
            audio.play()
        }
    }, 1000);
}
</script>

Duplicate (down to the answer) of [Convert seconds to HH-MM-SS with JavaScript?](https://stackoverflow.com/questions/1322732/convert-seconds-to-hh-mm-ss-with-javascript) — Heretic Monkey, Jan 29 '21 at 18:00

score 0 · Accepted Answer · answered Jan 19 '21 at 11:08

You can simply do it by using the below line.

 var timer = new Date(value * 1000).toISOString().substr(11, 8)

and use the timer value in the innerHtml

window.onload = init;
function init(){
    var start = document.getElementById("start");
    start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown(),1000);}

function countDown(){
    var number = document.getElementById("number");
    var value = parseInt(number.value, 10);
            
    var area = document.getElementById("text1");
            
    var audio = new Audio('audioURL.mp3');
    var interval = setInterval(function() {
    
    var timer  = new Date(value * 1000).toISOString().substr(11, 8)

        if (value > 1) {
            area.innerText = timer 
            value--;
        } else {
            clearInterval(interval);
            area.innerText = "Countdown Ended";
            audio.play()
        }
    }, 1000);
}

<form>
    <p>Input Seconds:</p>
    <input id="number" type="text" autocomplete="off"/>
    <button type="button" id="start">Start Timer</button>
</form>
<div id="area"><p id="text1" style="color: red;">Click Start</p></div>

Automatically Convert User Inputted Seconds To HH:MM:SS Countdown Timer

1 Answers1