feat: day 19

solygambas · solygambas · commit 429d85081c2e · 2025-06-24T17:09:42.000+02:00
diff --git a/019-theme clock/index.html b/019-theme clock/index.html
@@ -3,11 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
     <link rel="stylesheet" href="style.css" />
     <title>Theme Clock</title>
   </head>
   <body>
     <button class="toggle">Dark mode</button>
+    <button class="sound-toggle">
+      <i class="fas fa-volume-mute"></i>
+    </button>
     <div class="clock-container">
       <div class="clock">
         <div class="needle hour"></div>
@@ -18,6 +27,8 @@
       <div class="time"></div>
       <div class="date"></div>
     </div>
+    <!-- Add a Ticking Sound -->
+    <audio class="tick-sound" src="sounds/tick.mp3"></audio>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/019-theme clock/script.js b/019-theme clock/script.js
@@ -4,6 +4,10 @@ const secondElement = document.querySelector(".second");
 const timeElement = document.querySelector(".time");
 const dateElement = document.querySelector(".date");
 const toggle = document.querySelector(".toggle");
+const soundToggle = document.querySelector(".sound-toggle");
+const tickSound = document.querySelector(".tick-sound");
+
+let audioEnabled = false;
 
 const days = [
   "Sunday",
@@ -29,14 +33,45 @@ const months = [
   "Dec",
 ];
 
+const loadSavedTheme = () => {
+  const savedTheme = localStorage.getItem("theme");
+  const html = document.querySelector("html");
+
+  if (savedTheme === "dark") {
+    html.classList.add("dark");
+    toggle.innerHTML = "Light mode";
+  } else {
+    html.classList.remove("dark");
+    toggle.innerHTML = "Dark mode";
+  }
+};
+
+soundToggle.addEventListener("click", () => {
+  audioEnabled = !audioEnabled;
+  const icon = soundToggle.querySelector("i");
+
+  if (audioEnabled) {
+    icon.className = "fas fa-volume-up";
+    soundToggle.title = "Disable sound";
+  } else {
+    icon.className = "fas fa-volume-mute";
+    soundToggle.title = "Enable sound";
+    tickSound.pause();
+    tickSound.currentTime = 0;
+  }
+});
+
 toggle.addEventListener("click", (e) => {
   const html = document.querySelector("html");
   if (html.classList.contains("dark")) {
     html.classList.remove("dark");
     e.target.innerHTML = "Dark mode";
+    // Save the User's Theme
+    localStorage.setItem("theme", "light");
   } else {
     html.classList.add("dark");
     e.target.innerHTML = "Light mode";
+    localStorage.setItem("theme", "dark");
   }
 });
 
@@ -82,8 +117,16 @@ const setTime = () => {
     minutes < 10 ? `0${minutes}` : minutes
   } ${ampm}`;
   dateElement.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
+
+  // Add a Ticking Sound
+  if (audioEnabled) {
+    tickSound.currentTime = 0;
+    tickSound.play().catch((e) => console.log("Audio play failed:", e));
+  }
 };
 
+loadSavedTheme();
+
 setTime();
 
 setInterval(setTime, 1000);
diff --git a/019-theme clock/sounds/tick.mp3 b/019-theme clock/sounds/tick.mp3
diff --git a/019-theme clock/style.css b/019-theme clock/style.css
@@ -4,18 +4,20 @@
   box-sizing: border-box;
 }
 
+/* Create Your Own Theme */
 :root {
-  --primary-color: #000;
-  --secondary-color: #fff;
+  --primary-color: #0f0f26;
+  --secondary-color: #f2f0f0;
+  --accent-color: #3498db;
 }
 
 html {
   transition: all 0.5s ease-in;
 }
 
 html.dark {
-  --primary-color: #fff;
-  --secondary-color: #333;
+  --primary-color: #f2f0f0;
+  --secondary-color: #0f0f26;
 }
 
 html.dark {
@@ -33,16 +35,25 @@ body {
   margin: 0;
 }
 
-.toggle {
+.toggle,
+.sound-toggle {
   background-color: var(--primary-color);
   color: var(--secondary-color);
   border: 0;
   border-radius: 4px;
   padding: 8px 12px;
   position: absolute;
+  cursor: pointer;
+}
+
+.toggle {
   top: 10px;
   right: 10px;
-  cursor: pointer;
+}
+
+.sound-toggle {
+  bottom: 10px;
+  left: 10px;
 }
 
 .toggle:focus {
@@ -82,14 +93,15 @@ body {
   height: 100px;
 }
 
+/* Change the Clock Hand Colors */
 .needle.second {
-  background-color: #e74c3c;
+  background-color: var(--accent-color);
   transform: translate(-50%, -100%) rotate(0deg);
   height: 100px;
 }
 
 .center-point {
-  background-color: #e74c3c;
+  background-color: var(--accent-color);
   width: 10px;
   height: 10px;
   position: absolute;
