Added timer feature to analog clock and improved UI (#437)

Added a count down timer feature to the analog clock project, also improved the UI. Allows users to set a timer in hrs, min, and sec. Plays audio when the timer is up and displays a time's up text. ![image](https://github.com/user-attachments/assets/1066f213-ae8b-4b55-9f8e-a0d0012b6c54)
dhairyagothi · Jan 10, 2025 · 5bd4ea5 · 5bd4ea5
2 parents c93d570 + 497410a
commit 5bd4ea5
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 5 deletions.
diff --git a/public/AnalogClock/index.css b/public/AnalogClock/index.css
@@ -1,17 +1,31 @@
+html {
+    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Gradient background */
+    font-family: Arial, sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: space-between; /* Align clock to the left and timer to the right */
+    padding: 20px;
+}
+
 #clockContainer{  
     position: relative;
-    margin: auto;
+    margin: 20px;
     height: 40vw;
     width: 40vw; 
     background: url(clock.png) no-repeat;
     background-size: 100%;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
 }
 
 #hour, #minute, #second{
     position: absolute;
     background: black;
     border-radius: 10px; 
     transform-origin: bottom;
+    transition: transform 0.1s ease; /* Smooth transition for rotations */
 }
 #hour{
     width: 1.8%;
@@ -34,4 +48,56 @@
     left: 49.25%;
     opacity: 0.8; 
 
+}
+
+#timerContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 340px;
+    border-radius: 8px;
+    padding: 20px;
+    margin-left: 5px;
+    margin-right: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Adding shadow to the timer container */
+}
+
+#timeInput {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+input {
+    width: 100px;
+    padding: 5px;
+    font-size: 16px;
+    text-align: center;
+    margin: 2px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #ff7e5f;
+    border: none;
+    border-radius: 5px;
+    color: white;
+}
+
+button:hover {
+    background-color: #feb47b;
+}
+
+#countdownDisplay {
+    font-size: 32px;
+    font-weight: bold;
+}
+
+#timerUpMsg{
+    font-size: 35px;
+    text-align: center;
+    color: rgb(98, 0, 255);
 }
diff --git a/public/AnalogClock/index.html b/public/AnalogClock/index.html
@@ -1,17 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Analog Clock</title>
     <link rel="stylesheet" href="index.css">
     <script src="index.js"></script>
 </head>
+
 <body>
     <div id="clockContainer">
         <div id="hour"></div>
         <div id="minute"></div>
         <div id="second"></div>
     </div>
+
+    <div id="timerContainer">
+        <div id="timeInput">
+            <input type="number" id="hours" placeholder="HH" min="0" max="23" />
+            <input type="number" id="minutes" placeholder="MM" min="0" max="59" />
+            <input type="number" id="seconds" placeholder="SS" min="0" max="59" />
+        </div>
+        <button onclick="startCountdown()">Start Countdown</button>
+        <div id="countdownDisplay">00:00:00</div>
+
+        <div id="timerUpMsg"  style="display: none;">
+            <p><b>Time's Up!</b></p>
+        </div>
+    </div>
+
+    <!-- Audio Element -->
+    <audio id="timerSound" src="timer.mp3"></audio>
+
+
 </body>
+
 </html>
diff --git a/public/AnalogClock/index.js b/public/AnalogClock/index.js
@@ -3,11 +3,49 @@ setInterval(() => {
     htime = d.getHours();
     mtime = d.getMinutes();
     stime = d.getSeconds();
-    hrotation = 30*htime + mtime/2;
-    mrotation = 6*mtime;
-    srotation = 6*stime;
+    hrotation = 30 * htime + mtime / 2;
+    mrotation = 6 * mtime;
+    srotation = 6 * stime;
 
     hour.style.transform = `rotate(${hrotation}deg)`;
     minute.style.transform = `rotate(${mrotation}deg)`;
     second.style.transform = `rotate(${srotation}deg)`;
-}, 1000);
+}, 1000);
+
+// Countdown Timer
+let countdownInterval;
+let countdownTime;
+
+function startCountdown() {
+    let hours = document.getElementById('hours').value || 0;
+    let minutes = document.getElementById('minutes').value || 0;
+    let seconds = document.getElementById('seconds').value || 0;
+
+    countdownTime = (hours * 3600) + (minutes * 60) + seconds;
+
+    clearInterval(countdownInterval); // Clear any previous countdowns
+
+    countdownInterval = setInterval(() => {
+        if (countdownTime <= 0) {
+            clearInterval(countdownInterval);
+
+            //show pop up msg
+
+            document.getElementById('timerUpMsg').style.display = 'block';
+
+
+            // Play alarm sound
+            const timerSound = document.getElementById('timerSound');
+            timerSound.play();
+
+
+        } else {
+            countdownTime--;
+            let hoursLeft = Math.floor(countdownTime / 3600);
+            let minutesLeft = Math.floor((countdownTime % 3600) / 60);
+            let secondsLeft = countdownTime % 60;
+            document.getElementById('countdownDisplay').textContent =
+                `${String(hoursLeft).padStart(2, '0')}:${String(minutesLeft).padStart(2, '0')}:${String(secondsLeft).padStart(2, '0')}`;
+        }
+    }, 1000);
+}
diff --git a/public/AnalogClock/timer.mp3 b/public/AnalogClock/timer.mp3