Fixed sahandghavidel#9 ampm is not working

Akshat162001 · Akshat162001 · commit b16df210a591 · 2023-07-13T00:16:49.000+05:30
diff --git a/projects/digital-clock/index.html b/projects/digital-clock/index.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Digital Clock</title>
+    <title>Rolex Clock</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h2>Digital Clock</h2>
+    <h2 style="text-align: center;">Digital Clock</h2>
     <div class="clock">
       <div>
         <span id="hour">00</span>
diff --git a/projects/digital-clock/index.js b/projects/digital-clock/index.js
@@ -1,3 +1,33 @@
+// const hourEl = document.getElementById("hour");
+// const minuteEl = document.getElementById("minutes");
+// const secondEl = document.getElementById("seconds");
+// const ampmEl = document.getElementById("ampm");
+
+// function updateClock() {
+//   let h = new Date().getHours();
+//   let m = new Date().getMinutes();
+//   let s = new Date().getSeconds();
+//   let ampm = "AM";
+
+//   if (h > 12) {
+//     h = h - 12;
+//     ampm = "PM";
+//   }
+
+//   h = h < 10 ? "0" + h : h;
+//   m = m < 10 ? "0" + m : m;
+//   s = s < 10 ? "0" + s : s;
+
+//   hourEl.innerText = h;
+//   minuteEl.innerText = m;
+//   secondEl.innerText = s;
+//   ampmEl.innerText = ampm;
+//   setTimeout(() => {
+//     updateClock();
+//   }, 1000);
+// }
+
+// updateClock();
 const hourEl = document.getElementById("hour");
 const minuteEl = document.getElementById("minutes");
 const secondEl = document.getElementById("seconds");
@@ -7,12 +37,10 @@ function updateClock() {
   let h = new Date().getHours();
   let m = new Date().getMinutes();
   let s = new Date().getSeconds();
-  let ampm = "AM";
+  let ampm = h >= 12 ? "PM" : "AM";
 
-  if (h > 12) {
-    h = h - 12;
-    ampm = "PM";
-  }
+  h = h % 12;
+  h = h ? h : 12; // Convert 0 to 12 for 12-hour format
 
   h = h < 10 ? "0" + h : h;
   m = m < 10 ? "0" + m : m;
@@ -22,9 +50,8 @@ function updateClock() {
   minuteEl.innerText = m;
   secondEl.innerText = s;
   ampmEl.innerText = ampm;
-  setTimeout(() => {
-    updateClock();
-  }, 1000);
+
+  setTimeout(updateClock, 1000);
 }
 
-updateClock();
+updateClock();
diff --git a/projects/digital-clock/style.css b/projects/digital-clock/style.css
@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  /* margin: 0; */
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
@@ -8,7 +8,7 @@ body {
   justify-content: center;
   background: url("https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");
   background-size: cover;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 h2 {
