Set Timer Dynamically & SetInterval Update

Author: VertikaJain

countdown-timer/app.js

@@ -26,56 +26,64 @@ const deadline = document.querySelector(".deadline");
 const presentation = document.querySelector(".presentation");
 const deadlineFormats = document.querySelectorAll(".deadline-format h4");
 
-let pptDate = new Date(2020, 5, 26, 5, 30);
+// taking dates dynamically: whenever the application is opened, it sets timer to 10 days after the current date.
+let tempDate = new Date();
+let tempYear = tempDate.getFullYear();
+let tempMonth = tempDate.getMonth();
+let tempDay = tempDate.getDate();
+const pptDate = new Date(tempYear, tempMonth, tempDay + 10, 15, 30, 0);
+
+// let pptDate = new Date(2020, 5, 27, 15, 30, 0); // static date values
+
 const year = pptDate.getFullYear();
 const day = pptDate.getDate();
 const month = months[pptDate.getMonth()];
 const weekday = weekdays[pptDate.getDay()];
 let hours = pptDate.getHours();
-let text = "am";
-if (hours > 12) {
+if (hours >= 12) {
   hours -= 12;
-  text = "pm";
 }
-const minutes = pptDate.getMinutes();
-presentation.textContent = `PPT begins on ${weekday} ${day} ${month} ${year}, ${hours}:${minutes}${text}`;
+let minutes = pptDate.getMinutes();
+if (hours < 10) {
+  hours = `0${hours}`;
+}
+if (minutes < 10) {
+  minutes = `0${minutes}`;
+}
+presentation.textContent = `PPT begins on ${weekday} ${day} ${month} ${year}, ${hours}:${minutes} hrs.`;
 
-const pptTime = pptDate.getTime();
-getRemaindingTime = () => {
-  const currentTime = new Date().getTime();
+const pptTime = pptDate.getTime(); // returns miliseconds
 
-  const time = pptTime - currentTime; // returns miliseconds
+let countdown = setInterval(getRemainingTime = () => {
+  const currentTime = new Date().getTime();
+  const time = pptTime - currentTime; 
 
+  // convert miliseconds to required values
   const oneDay = 24 * 60 * 60 * 1000;
   const oneHour = 60 * 60 * 1000;
   const oneMinute = 60 * 1000;
-
   const daysLeft = Math.floor(time / oneDay);
   const hoursLeft = Math.floor((time % oneDay) / oneHour);
   const minsLeft = Math.floor((time % oneHour) / oneMinute);
   const secsLeft = Math.floor((time % oneMinute) / 1000);
 
   const values = [daysLeft, hoursLeft, minsLeft, secsLeft];
-
-  deadlineFormats.forEach((text, index) => {
-    text.innerHTML = format(values[index]);
-  })
-  function format(item) {
+  format = (item) => {
     if (item < 10) {
       return (item = `0${item}`);
     }
     return item;
   }
-
+  deadlineFormats.forEach((text, index) => {
+    text.innerHTML = format(values[index]);
+  })
   if (time < 0) {
     clearInterval(countdown);
-    deadline.innerHTML = `<h4 class="expired">sorry, this giveaway has expired!</h4>`;
+    deadline.innerHTML = `<h4 class="expired">Presentation already given!</h4>`;
   }
-}
-let countdown = setInterval(getRemaindingTime, 1000);
-getRemaindingTime();
+}, 1000);
 
 /* Learnings:
     1. date() and its methods
-    2. SetInterval() method
+    2. SetInterval() & clearInterval() method
 */

countdown-timer/index.html

@@ -15,7 +15,7 @@
       </article>
       <article class="gift-info">
         <h3>TDD Presentation Countdown</h3>
-        <h4 class="presentation">PPT begins on Monday, 03 July, 2020 11:00am</h4>
+        <h4 class="presentation">PPT begins.</h4>
         <p>Topics to prepare for the ppt:</p>
         <ol>
           <li>What is TDD?</li>
@@ -26,16 +26,16 @@ <h4 class="presentation">PPT begins on Monday, 03 July, 2020 11:00am</h4>
         </ol>
         <div class="deadline">
           <div class="deadline-format">
-            <div><h4 class="days">34</h4><span>days</span></div>
+            <div><h4 class="days">00</h4><span>days</span></div>
           </div>
           <div class="deadline-format">
-            <div><h4 class="hours">2</h4><span>hours</span></div>
+            <div><h4 class="hours">00</h4><span>hours</span></div>
           </div>
           <div class="deadline-format">
-            <div><h4 class="mins">45</h4><span>mins</span></div>
+            <div><h4 class="mins">00</h4><span>mins</span></div>
           </div>
           <div class="deadline-format">
-            <div><h4 class="secs">45</h4><span>secs</span></div>
+            <div><h4 class="secs">00</h4><span>secs</span></div>
           </div>
         </div>
       </article>