js_interview_questions/CountDown_Timer.html at main · Manisha1998-singh/js_interview_questions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <input id="secs" type="number" min="1" placeholder="Seconds" />
      <p id="timer"></p>
      <button id="start">start</button>
      <button id="stop">Stop</button>
    </div>
  </body>
  <script>
    let secsInput = document.getElementById("secs");
    let timer = document.getElementById("timer");
    let start = document.getElementById("start");
    let end = document.getElementById("stop");
    let id = null;
    let remaining = 0;
    start.addEventListener("click", function () {
      remaining = Number(secsInput.value);
      if (!Number.isFinite(remaining) || remaining <= 0) {
        timer.textContent = "Enter a positive number.";
        return;
      }

      clearInterval(id);
      timer.textContent = `Remaining: ${remaining}s`;
      id = setInterval(() => {
        remaining--;
        timer.textContent = `Remaining: ${remaining}s`;
        if (remaining <= 0) {
          clearInterval(id);
          timer.textContent = "Done!";
        }
      }, 1000);
    });
    end.addEventListener("click", function () {
      clearInterval(id);
      secsInput.value = "";
      timer.textContent = "";
    });
  </script>
</html>