Timer-JavaScript/code.js at main · oxica/Timer-JavaScript · 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
48
49
50
51
52
53
54
55
56
57
58
59
let finalDate = null;
let timerId = null;

document
  .getElementById("countdown-button")
  .addEventListener("click", function () {
    initTimer();
  });

function initTimer() {
  clearInterval(timerId);

  finalDate = document.getElementById("final-date-input").value;
  console.log(finalDate);

  if (finalDate == "") return;
  finalDate = new Date(finalDate);

  document.getElementById("message").style.display = "none";

  timer();
  timerId = setInterval(timer, 1000);
}

function timer() {
  const now = new Date().getTime();

  let interval = (finalDate.getTime() - now) / 1000;
  interval = Math.floor(interval);
  console.log(interval);

  if (interval <= 0) {
    document.getElementById("message").style.display = "block";
    clearInterval(timerId);
    clearTimer();
    return;
  }

  let days = Math.floor(interval / (60 * 60 * 24));
  let hours = Math.floor((interval % (60 * 60 * 24)) / (60 * 60));
  let minutes = Math.floor((interval % (60 * 60)) / 60);
  let seconds = Math.floor(interval % 60);

  setHtmlBySelector("#days", days);
  setHtmlBySelector("#hours", hours);
  setHtmlBySelector("#minutes", minutes);
  setHtmlBySelector("#seconds", seconds);
}

function setHtmlBySelector(selector, value) {
  document.querySelector(selector).innerHTML = value;
}

function clearTimer() {
  setHtmlBySelector("#days", "-");
  setHtmlBySelector("#hours", "-");
  setHtmlBySelector("#minutes", "-");
  setHtmlBySelector("#seconds", "-");
}