Countdown Task in HTML with DOM and JavaScript

Write a JS program that implements a web countdown timer that supports minutes and seconds. The user should be able to set the time by calling you function with the number of seconds required. The time begins to count down as soon as the function is called. Using the sample code, your function will be called as soon as the page finishes loading and will begin to count down from 10 minutes.

Input:
Your function will receive a number parameter, representing the starting number of seconds.

Output:
There will be no output, your program should instead modify the DOM of the given HTML document.

Sample HTML:

<input type="text" id="time" style="border:3px solid blue; text-align:center; font-size:2em;" disabled="true"/>
<script>window.onload = function() { countdown(600); }</script>

Examples:

1 Answer

Here is my solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="time" style="border: 3px solid blue; text-align: center; font-size: 2em;" disabled="true"/>

<script>window.onload = function () {
    countdown(600);//begins from the 10tn minute
}</script>

<script>
    function countdown(startTime) {
        let time = startTime;
        let output = document.getElementById("time");

        let timer = setInterval(tick, 1000);

        function tick() {
            time--;
            if (time <= 0) {
                clearInterval(timer);
            }
            output.value = `${Math.floor(time / 60)}:${('0' + time % 60).slice(-2)}`;
        }
    }
</script>

</body>
</html>

answered by user icabe

Q: Countdown Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Countdown Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions