update

js/script.js

@@ -1,21 +1,21 @@
 const countDown = () => {
-  // Set the date for the launch (e.g., December 31, 2024)
+  // Set the date for the launch (e.g., October 12, 2024)
   let launchDate = new Date("oct 12, 2024 00:00:00").getTime();
   // // let launchDate = new Date().getTime()+ (14 * 24 * 60 * 60 * 1000);
 
-  // Get the cuurent Date
+  // Get the current date
   let currentDate = new Date().getTime();
 
-  // Get the Difference btw the launchDate from currentDate
+  // Get the difference between the launchDate and currentDate
   let timeLeft = launchDate - currentDate;
 
-  // Get the second, minute, hour, day
-  let seconds = 1000; // sec in millisec
-  let minutes = 60 * seconds;
-  let hours = 60 * minutes;
-  let days = 24 * hours;
+  // Get the seconds, minutes, hours, days in milliseconds
+  let seconds = 1000; // 1 second = 1000 milliseconds
+  let minutes = 60 * seconds; // 1 minute = 60 seconds
+  let hours = 60 * minutes; // 1 hour = 60 minutes
+  let days = 24 * hours; // 1 day = 24 hours
 
-  // Time calculations for days, hours, minutes and seconds
+  // Time calculations for days, hours, minutes, and seconds
   let daysNum = Math.floor(timeLeft / days);
   let hoursNum = Math.floor((timeLeft % days) / hours);
   let minutesNum = Math.floor((timeLeft % hours) / minutes);
@@ -31,15 +31,16 @@ const countDown = () => {
   document.getElementById("seconds").textContent =
     (secondsNum < 10 ? "0" : "") + secondsNum;
 
-  // If the count down is over, display some text
+  // If the countdown is over, display a message
   if (timeLeft < 0) {
+    // Clear interval to call countDown
     clearInterval(countDown);
 
     const countdownElement = document.querySelector(".countdown");
     countdownElement.innerHTML = "we have launched!";
-    //     countdownElement.classList.add("launched-message");  // Add the styling class
+    countdownElement.classList.add("launched-message"); // Add the styling class
   }
 };
 
-// set Interval after 1000millsec
+// Set interval to call countDown every 1000 milliseconds (1 second)
 setInterval(countDown, 1000);

styles/sass/style.scss

@@ -31,7 +31,7 @@ $primary-font-Weight: 700;
   $size,
   $weight,
   $wordSpacing,
-  $letterSpacing,
+  $letterSpacing
 ) {
   text-transform: $textTransform;
   font-size: $size;
@@ -62,7 +62,7 @@ main {
   text-align: center;
   padding-inline: 1rem;
   max-width: 1400px;
-   // styling for countdown-section class name within main elements
+  // styling for countdown-section class name within main elements
   .countdown-section {
     height: 70vh;
 
@@ -163,24 +163,18 @@ main {
   }
 }
 
-// // /* Add this new style for the LAUNCHED! message */
-// .launched-message {
-//   font-size: 5rem;
-//   color: $Soft-red;  /* Bright orange color */
-//   font-weight: bold;
-//   text-transform: uppercase;
-//   animation: blinker 1s infinite;  /* Make it blink */
-// }
-// @keyframes blinker {
-//   50% {
-//     opacity: 0;
-//   }
-// }
-
-
-
-
-
+/* Add this new style for the LAUNCHED! message */
+.launched-message {
+  color: $Soft-red; /* Bright orange color */
+  // Using mixin to style h1 font
+  @include font-content(uppercase, 5rem, 700, normal, normal);
+  animation: blinker 1s infinite; /* Make it blink */
+}
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
 
 // media query
 
@@ -223,9 +217,10 @@ main {
     }
   }
 
-  //   .launched-message {
-  //     font-size: 3.8rem;
-  //   }
+    .launched-message {
+       // Using mixin to style h1 font
+  @include font-content(uppercase, 3.8rem, 700, normal, normal);
+    }
 }
 
 // /* Extra small devices (phones, 600px and down) */
@@ -245,7 +240,7 @@ main {
         .time {
           height: 55px;
           width: 55px;
-          margin-bottom: .6rem;
+          margin-bottom: 0.6rem;
           h2 {
             line-height: 55px;
             @include font-content(uppercase, 1.6rem, 700, normal, normal);
@@ -273,9 +268,8 @@ main {
     }
   }
 
-  //   .launched-message {
-  //     font-size: 2.1rem;
-  //   }
+    .launched-message {
+         // Using mixin to style h1 font
+  @include font-content(uppercase, 1.6rem, 700, normal, normal);
+    }
 }
-
-