made countdown timer project & added readme

sagarmittal1 · sagarmittal1 · commit 8e1792367f6c · 2022-10-08T02:20:53.000+05:30
diff --git a/29-Countdown-Timer/README.md b/29-Countdown-Timer/README.md
@@ -0,0 +1,14 @@
+# 29 - Countdown Timer
+
+> Also added sound alert when the time get's up & made it responsive.
+
+## Things I learned
+- `Date.now()` method returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.**Useful for making countdown timer**
+- In `setInterval()` if we use it to countdown then sometimes it will stop on browser & iPhone for performance issues. So call it in a varibale instead of calling on self.
+- Make the structure & identify for which to make function.
+- `clearInterval()` to stop the interval.
+- Also learned about `new Date(timestamp)` that we can pass timestamp to Date object. 
+- In this I learn how to deal with JavaScript parts with how to make functions & used them accordingly.
+
+## Some important things
+- If remaining seconds or minutes are less than 10 then add 0 before it. `remainderSeconds < 10 ? '0' : ''`
diff --git a/29-Countdown-Timer/assets/alert.mp3 b/29-Countdown-Timer/assets/alert.mp3
diff --git a/29-Countdown-Timer/assets/stopwatch.png b/29-Countdown-Timer/assets/stopwatch.png
diff --git a/29-Countdown-Timer/index.html b/29-Countdown-Timer/index.html
@@ -7,26 +7,28 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Countdown Timer</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="shortcut icon" href="./assets/stopwatch.png" type="image/x-icon">
   <script src="main.js" defer></script>
 </head>
 
 <body>
   <div class="timer">
     <div class="timer__controls">
-      <button data-time="20" class="timer__button color">20 Secs</button>
-      <button data-time="300" class="timer__button color">Work 5</button>
-      <button data-time="900" class="timer__button color">Quick 15</button>
-      <button data-time="1200" class="timer__button color">Snack 20</button>
-      <button data-time="3600" class="timer__button color">Lunch Break</button>
+      <button data-time="20" class="timer__button">20 Secs</button>
+      <button data-time="300" class="timer__button">Work 5</button>
+      <button data-time="900" class="timer__button">Quick 15</button>
+      <button data-time="1200" class="timer__button">Snack 20</button>
+      <button data-time="3600" class="timer__button">Lunch Break</button>
       <form name="customForm" id="custom">
         <input type="text" name="minutes" placeholder="Enter Minutes">
       </form>
     </div>
     <div class="display">
-      <h1 class="display__time-left">Fuck You</h1>
-      <p class="display__end-time">Some random text</p>
+      <h1 class="display__time-left"></h1>
+      <p class="display__end-time"></p>
     </div>
   </div>
+  <audio class="alert" src="./assets/alert.mp3" hidden></audio>
 </body>
 
 </html>
diff --git a/29-Countdown-Timer/main.js b/29-Countdown-Timer/main.js
@@ -0,0 +1,56 @@
+let countDown;
+const displayTime = document.querySelector('.display__time-left');
+const endTime = document.querySelector('.display__end-time');
+const buttons = document.querySelectorAll('[data-time]');
+const alert = document.querySelector('.alert');
+
+function timer(seconds) {
+    clearInterval(countDown);
+
+    const now = Date.now();
+    const then = now + (seconds*1000);
+    displayTimeLeft(seconds);
+    displayEndTime(then);
+
+    countDown = setInterval(() => {
+        const secondsLeft = Math.round((then - Date.now())/1000);
+        if(secondsLeft < 0) {
+            alert.currentTime = 0;
+            alert.play();
+            clearInterval(countDown);
+            return;
+        }
+        displayTimeLeft(secondsLeft);
+    }, 1000);
+}
+
+function displayTimeLeft(seconds) {
+    const minutes = Math.floor(seconds/60);
+    const remainderSeconds = seconds%60;
+    // if remaining seconds are less than 10 then add 0 before it.
+    const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
+    document.title = `Time Left: ${display}`;   
+    displayTime.textContent = display;
+}
+
+function displayEndTime(timestamp) {
+    const end = new Date(timestamp);
+    const hours = end.getHours();
+    const minutes = end.getMinutes();
+    const adjustHours = hours > 12 ? hours - 12 : hours;
+    endTime.textContent = `Be back at ${adjustHours}:${minutes < 10 ? '0':''}${minutes}`;
+}
+
+function startTimer() {
+    const seconds = parseInt(this.dataset.time);
+    timer(seconds);
+}
+
+buttons.forEach(button => button.addEventListener('click', startTimer));
+
+document.customForm.addEventListener('submit', function(e) {
+    e.preventDefault();
+    const minutes = parseInt(this.minutes.value);
+    timer(minutes*60);
+    this.reset();
+})
diff --git a/29-Countdown-Timer/style.css b/29-Countdown-Timer/style.css
@@ -55,6 +55,10 @@ body {
   padding: 2rem;
 }
 
+input {
+  font-size: 1.5rem;
+}
+
 .timer__button {
   background: none;
   border: 0;
@@ -81,4 +85,14 @@ body {
   align-items: center;
   flex-direction: column;
   flex: 1;
+}
+
+/* added for making it responsive */
+@media (max-width: 50rem) {
+  .timer__controls {
+    flex-direction: column;
+  }
+  .display h1{
+    font-size: 15rem;
+  }
 }
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@
 | 20 | &#128483; Speech Detection | [GitHub][20] | [Link](https://sagarmittal1.github.io/JavaScript30/20-Speech-Detection/)|
 | 21 | &#128204; Geolocation | [GitHub][21] | [Link](https://sagarmittal1.github.io/JavaScript30/21-Geolocation/)|
 | 23 | &#128172; Speech Synthesis | [GitHub][23] | [Link](https://sagarmittal1.github.io/JavaScript30/23-Speech-Synthesis/)|
+| 29 | &#9201; Countdown Timer | [GitHub][29] | [Link](https://sagarmittal1.github.io/JavaScript30/29-Countdown-Timer/)|
 
 
 [1]: /01-JavaScript-Drum-Kit/
@@ -40,4 +41,5 @@
 [19]: /19-Webcam-Fun/
 [20]: /20-Speech-Detection/
 [21]: /21-Geolocation/
-[23]: /23-Speech-Synthesis/
+[23]: /23-Speech-Synthesis/
+[29]: /29-Countdown-Timer/
