reafctor: semantic html

solygambas · solygambas · commit cb1d0b3a1582 · 2025-08-14T14:12:10.000+02:00
diff --git a/019-theme clock/index.html b/019-theme clock/index.html
@@ -8,16 +8,16 @@
   </head>
   <body>
     <button class="toggle">Dark mode</button>
-    <div class="clock-container">
-      <div class="clock">
-        <div class="needle hour"></div>
-        <div class="needle minute"></div>
-        <div class="needle second"></div>
-        <div class="center-point"></div>
-      </div>
-      <div class="time"></div>
+    <section class="clock-container">
+      <figure class="clock" aria-label="Analog clock">
+        <span class="needle hour"></span>
+        <span class="needle minute"></span>
+        <span class="needle second"></span>
+        <span class="center-point"></span>
+      </figure>
+      <time class="time" aria-live="polite"></time>
       <div class="date"></div>
-    </div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/019-theme clock/script.js b/019-theme clock/script.js
@@ -4,6 +4,7 @@ const secondElement = document.querySelector(".second");
 const timeElement = document.querySelector(".time");
 const dateElement = document.querySelector(".date");
 const toggle = document.querySelector(".toggle");
+const html = document.querySelector("html");
 
 const days = [
   "Sunday",
@@ -30,7 +31,6 @@ const months = [
 ];
 
 toggle.addEventListener("click", (e) => {
-  const html = document.querySelector("html");
   if (html.classList.contains("dark")) {
     html.classList.remove("dark");
     e.target.innerHTML = "Dark mode";
diff --git a/019-theme clock/style.css b/019-theme clock/style.css
@@ -16,9 +16,6 @@ html {
 html.dark {
   --primary-color: #fff;
   --secondary-color: #333;
-}
-
-html.dark {
   background-color: #111;
   color: var(--primary-color);
 }
