countdown-timer/script.js at main · ifeanyi234/countdown-timer · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
"use strict";
const daysHtmlEl = document.querySelector("#days");
const hoursHtmlEl = document.querySelector("#hours");
const minutesHtmlEl = document.querySelector("#minutes");
const secondsHtmlEl = document.querySelector("#seconds");

const targetDateInput = document.querySelector("#targetDate");
const finishedMsg = document.querySelector("#finishedMsg");
const error = document.querySelector("#error");
const startBtn = document.querySelector("#startBtn");
const pauseBtn = document.querySelector("#pauseBtn");
const resetBtn = document.querySelector("#resetBtn");

let timeLeft;
let remainingTime;
let intervalId;

let isPaused = false;

const calcRemainingTime = function (target, now) {
  return target.getTime() - now.getTime();
};
const getRemainingDate = function (milliSec) {
  return {
    day: Math.floor(milliSec / (1000 * 60 * 60 * 24)),
    hour: Math.floor((milliSec / (1000 * 60 * 60)) % 24),
    minute: Math.floor((milliSec / (1000 * 60)) % 60),
    second: Math.floor((milliSec / 1000) % 60),
  };
};
const displayTimeLeft = function () {
  daysHtmlEl.innerHTML = String(remainingTime.day).padStart(2, "0");
  hoursHtmlEl.innerHTML = String(remainingTime.hour).padStart(2, "0");
  minutesHtmlEl.innerHTML = String(remainingTime.minute).padStart(2, "0");
  secondsHtmlEl.innerHTML = String(remainingTime.second).padStart(2, "0");
};
const countDown = function () {
  if (!isPaused) {
    timeLeft -= 1000;
    remainingTime = getRemainingDate(timeLeft);
    displayTimeLeft();
  }
  if (timeLeft <= 1000) {
    timeLeft = 0;
    clearInterval(intervalId);
    btnVisibility(true);
    finishedMsg.classList.remove("hidden");
  } else {
    finishedMsg.classList.add("hidden");
  }
};

const btnVisibility = function (bool) {
  //Enable buttons
  pauseBtn.disabled = bool;
  resetBtn.disabled = bool;
};

startBtn.addEventListener("click", function (e) {
  e.preventDefault();
  if (!targetDateInput.value) {
    error.classList.remove("hidden");
    error.textContent = "Please select a target date and time";
    return;
  }
  const targetDate = new Date(targetDateInput.value);
  const now = new Date();

  timeLeft = calcRemainingTime(targetDate, now);
  if (timeLeft <= 0) {
    error.classList.remove("hidden");
    error.textContent = "The selected date/time has passed!";
    return;
  } else {
    error.classList.add("hidden");
  }
  clearInterval(intervalId);
  isPaused = false;

  remainingTime = getRemainingDate(timeLeft);
  intervalId = setInterval(countDown, 1000);

  // Display Remaining date
  displayTimeLeft();

  btnVisibility(false);
});

pauseBtn.addEventListener("click", function () {
  if (!isPaused) {
    // Pause
    isPaused = true;
    clearInterval(intervalId);
    pauseBtn.textContent = "Resume";
  } else {
    // Resume
    isPaused = false;
    intervalId = setInterval(countDown, 1000);
    pauseBtn.textContent = "Pause";
  }
});

resetBtn.addEventListener("click", function () {
  timeLeft = 0;
  remainingTime = getRemainingDate(timeLeft);

  clearInterval(intervalId);

  targetDateInput.value = "";
  finishedMsg.classList.add("hidden");
  pauseBtn.textContent = "Pause";
  btnVisibility(true);
  displayTimeLeft();
});