Digital_Clock/script.js at main · Crafted-By-Nouman/Digital_Clock · 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
115
116
117
118
119
120
121
122
123
// Create particles
const particlesContainer = document.getElementById("particles");
const particleCount = 50;

for (let i = 0; i < particleCount; i++) {
  const particle = document.createElement("div");
  particle.classList.add("particle");
  particle.style.left = `${Math.random() * 100}%`;
  particle.style.top = `${Math.random() * 100}%`;
  particle.style.width = `${Math.random() * 3 + 1}px`;
  particle.style.height = particle.style.width;
  particle.style.animationDuration = `${Math.random() * 10 + 10}s`;
  particle.style.animationDelay = `${Math.random() * 5}s`;
  particlesContainer.appendChild(particle);
}

// Clock functionality
const hoursElement = document.getElementById("hours");
const minutesElement = document.getElementById("minutes");
const secondsElement = document.getElementById("seconds");
const ampmElement = document.getElementById("ampm");
const dateElement = document.getElementById("date");
const toggleFormatBtn = document.getElementById("toggleFormat");
const toggleGlowBtn = document.getElementById("toggleGlow");

let is24HourFormat = false;
let isGlowEnabled = true;

const days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

function updateClock() {
  const now = new Date();
  let hours = now.getHours();
  const minutes = now.getMinutes().toString().padStart(2, "0");
  const seconds = now.getSeconds().toString().padStart(2, "0");

  let ampm = "AM";
  if (!is24HourFormat) {
    ampm = hours >= 12 ? "PM" : "AM";
    hours = hours % 12;
    hours = hours ? hours : 12; // Convert 0 to 12
  }

  hoursElement.textContent = hours.toString().padStart(2, "0");
  minutesElement.textContent = minutes;
  secondsElement.textContent = seconds;

  if (!is24HourFormat) {
    ampmElement.textContent = ampm;
    ampmElement.style.display = "block";
  } else {
    ampmElement.style.display = "none";
  }

  // Add animation class for seconds change
  secondsElement.classList.add("changing");
  setTimeout(() => {
    secondsElement.classList.remove("changing");
  }, 300);

  // Update date
  const dayName = days[now.getDay()];
  const monthName = months[now.getMonth()];
  const date = now.getDate();
  const year = now.getFullYear();
  dateElement.textContent = `${dayName}, ${monthName} ${date}, ${year}`;

  requestAnimationFrame(updateClock);
}

toggleFormatBtn.addEventListener("click", () => {
  is24HourFormat = !is24HourFormat;
  toggleFormatBtn.classList.toggle("active");
  toggleFormatBtn.textContent = is24HourFormat ? "12HR" : "24HR";
});

toggleGlowBtn.addEventListener("click", () => {
  isGlowEnabled = !isGlowEnabled;
  toggleGlowBtn.classList.toggle("active");
  toggleGlowBtn.textContent = isGlowEnabled ? "Glow OFF" : "Glow ON";

  document.documentElement.style.setProperty(
    "--glow-intensity",
    isGlowEnabled ? "1" : "0"
  );

  const timeSegments = document.querySelectorAll(".time-segment:not(.colon)");
  timeSegments.forEach((segment) => {
    if (isGlowEnabled) {
      segment.style.textShadow = `
                        0 0 10px rgba(0, 255, 255, 0.7),
                        0 0 20px rgba(0, 255, 255, 0.5)
                    `;
    } else {
      segment.style.textShadow = "none";
    }
  });
});

// Initialize
updateClock();