countdown-timer/script.js at main · Dhabaldeep/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
let countdown;
let timerDisplay = document.querySelector(".countdown-timer");
let timeRemaining;

function formatTime(time) {
  const days = Math.floor(time / (3600 * 24));
  const hours = Math.floor((time % (3600 * 24)) / 3600);
  const minutes = Math.floor((time % 3600) / 60);
  const seconds = time % 60;

  return `${days > 0 ? days + "d " : ""}${hours > 0 ? hours + "h " : ""}${
    minutes < 10 ? "0" : ""
  }${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
}

function updateCountdown() {
  timerDisplay.innerHTML = formatTime(timeRemaining);

  if (timeRemaining <= 0) {
    clearInterval(countdown);
    timerDisplay.innerHTML = '0:00:00:00';
    showOverlay();
  } else {
    timeRemaining--;
  }
}

function startTimer() {
  const days = parseInt(document.querySelector("#days").value) || 0;
  const hours = parseInt(document.querySelector("#hours").value) || 0;
  const minutes = parseInt(document.querySelector("#minutes").value) || 0;
  const seconds = parseInt(document.querySelector("#seconds").value) || 0;
  const totalTime = days * 24 * 3600 + hours * 3600 + minutes * 60 + seconds;

  const inputFields = document.querySelectorAll(".form-input");
  inputFields.forEach((input) => {
    if (input.value.trim() !== "") {
      input.classList.add("hidden");
    }
  });

  if (isNaN(totalTime) || totalTime <= 0) {
    alert("Please enter a valid time");
    return;
  }

  timeRemaining = totalTime;
  clearInterval(countdown);
  updateCountdown();
  countdown = setInterval(updateCountdown, 1000);

  // Store the countdown time in a cookie
  document.cookie = `countdownTime=${timeRemaining}; expires=${new Date(
    Date.now() + totalTime * 1000
  ).toUTCString()}`;
}

function showOverlay() {
  const overlay = document.createElement("div");
  overlay.classList.add("black-bg");
  document.body.appendChild(overlay);
}

function hideOverlay() {
  const overlay = document.querySelector(".black-bg");
  if (overlay) {
    overlay.remove();
  }
}


function resetTimer() {
  clearInterval(countdown);
  timerDisplay.innerHTML = "0:00:00:00";
  document.querySelector("#days").value = "";
  document.querySelector("#hours").value = "";
  document.querySelector("#minutes").value = "";
  document.querySelector("#seconds").value = "";
  timeRemaining = 0;

  const inputFields = document.querySelectorAll(".form-input");
  inputFields.forEach((input) => {
    input.classList.remove("hidden");
  });

  // Clear the countdown time cookie
  document.cookie =
    "countdownTime=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

document.querySelector(".start-btn").addEventListener("click", startTimer);
document.querySelector(".reset-btn").addEventListener("click", resetTimer);

// Check if there is a stored countdown time in the cookie
const storedTime = document.cookie.replace(
  /(?:(?:^|.*;\s*)countdownTime\s*\=\s*([^;]*).*$)|^.*$/,
  "$1"
);
if (storedTime) {
  timeRemaining = parseInt(storedTime);
  const days = Math.floor(timeRemaining / (3600 * 24));
  const hours = Math.floor((timeRemaining % (3600 * 24)) / 3600);
  const minutes = Math.floor((timeRemaining % 3600) / 60);
  const seconds = timeRemaining % 60;
  document.querySelector("#days").value = days;
  document.querySelector("#hours").value = hours;
  document.querySelector("#minutes").value = minutes;
  document.querySelector("#seconds").value = seconds;
  countdown = setInterval(updateCountdown, 1000);
}