From ee15d7fc490d508e0c643b524938b047344e7091 Mon Sep 17 00:00:00 2001
From: Hazem Hassan Mahmoud <hazemhassan0321@gmail.com>
Date: Thu, 13 Feb 2025 16:09:45 +0200
Subject: [PATCH] Some Changes

---
 css/elzero.css |  3 +++
 index.html     |  8 ++++----
 js/main.js     | 45 ++++++++++++++++++++++++---------------------
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/css/elzero.css b/css/elzero.css
index 26eefa6..3fa57a9 100644
--- a/css/elzero.css
+++ b/css/elzero.css
@@ -956,6 +956,9 @@ ul {
   padding: 15px;
   color: var(--main-color);
   font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .events .info .time .unit span:last-child {
   padding: 8px 10px;
diff --git a/index.html b/index.html
index 2ebbd17..6911485 100644
--- a/index.html
+++ b/index.html
@@ -673,19 +673,19 @@ <h2 class="main-title">Latest Events</h2>
         <div class="info">
           <div class="time">
             <div class="unit">
-              <span class="days">15</span>
+              <span class="days">00</span>
               <span>Days</span>
             </div>
             <div class="unit">
-              <span class="hours">08</span>
+              <span class="hours">00</span>
               <span>Hours</span>
             </div>
             <div class="unit">
-              <span class="minutes">45</span>
+              <span class="minutes">00</span>
               <span>Minutes</span>
             </div>
             <div class="unit">
-              <span class="seconds">55</span>
+              <span class="seconds">00</span>
               <span>Seconds</span>
             </div>
           </div>
diff --git a/js/main.js b/js/main.js
index f4d5e02..861dce9 100644
--- a/js/main.js
+++ b/js/main.js
@@ -6,32 +6,35 @@
 // The End Of The Year Date
 // 1000 milliseconds = 1 Second
 
-let countDownDate = new Date("Dec 31, 2022 23:59:59").getTime();
+let countDownDate = new Date("Dec 31, 2021 23:59:59").getTime();
 // console.log(countDownDate);
 
-let counter = setInterval(() => {
-  // Get Date Now
-  let dateNow = new Date().getTime();
+// Get Date Now
+let dateNow = new Date().getTime();
 
-  // Find The Date Difference Between Now And Countdown Date
-  let dateDiff = countDownDate - dateNow;
+// Find The Date Difference Between Now And Countdown Date
+let dateDiff = countDownDate - dateNow;
 
-  // Get Time Units
-  // let days = Math.floor(dateDiff / 1000 / 60 / 60 / 24);
-  let days = Math.floor(dateDiff / (1000 * 60 * 60 * 24));
-  let hours = Math.floor((dateDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  let minutes = Math.floor((dateDiff % (1000 * 60 * 60)) / (1000 * 60));
-  let seconds = Math.floor((dateDiff % (1000 * 60)) / 1000);
+if (dateDiff > 0) {
+  // If the event haven't started yet
+  setInterval(() => {
+    // Update The Date Now And The Difference
+    dateNow = new Date().getTime();
+    dateDiff = countDownDate - dateNow;
+    // Get Time Units
+    // let days = Math.floor(dateDiff / 1000 / 60 / 60 / 24);
+    let days = Math.floor(dateDiff / (1000 * 60 * 60 * 24));
+    let hours = Math.floor((dateDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    let minutes = Math.floor((dateDiff % (1000 * 60 * 60)) / (1000 * 60));
+    let seconds = Math.floor((dateDiff % (1000 * 60)) / 1000);
 
-  document.querySelector(".days").innerHTML = days < 10 ? `0${days}` : days;
-  document.querySelector(".hours").innerHTML = hours < 10 ? `0${hours}` : hours;
-  document.querySelector(".minutes").innerHTML = minutes < 10 ? `0${minutes}` : minutes;
-  document.querySelector(".seconds").innerHTML = seconds < 10 ? `0${seconds}` : seconds;
-
-  if (dateDiff < 0) {
-    clearInterval(counter);
-  }
-}, 1000);
+    document.querySelector(".days").innerHTML = days < 10 ? `0${days}` : days;
+    document.querySelector(".hours").innerHTML = hours < 10 ? `0${hours}` : hours;
+    document.querySelector(".minutes").innerHTML = minutes < 10 ? `0${minutes}` : minutes;
+    document.querySelector(".seconds").innerHTML = seconds < 10 ? `0${seconds}` : seconds;
+  }, 1000);
+}
+// Else: The date in the html file is already zero
 
 /*
  ** Animate Width On Scrolling