settingsAccountsettings
Menusettings

Q: Countdown Task in HTML with DOM and JavaScript

+2 votes

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:

countdown with javascript

asked in JavaScript category by user john7

1 Answer

+1 vote

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
...