Update Home.vue

src/views/Home.vue

@@ -1,12 +1,9 @@
 <template>
   <!--  Navigation Section-->
-
   <Nav/>
 
 
   <!--  Landing Section-->
-
-
   <div class="home" id="home">
     <div class="container">
       <p id="heading">Aperta Fons</p>
@@ -29,15 +26,21 @@
       <p id="start">The contest is now live until</p>
       <div class="timer" id="timer">
         <Confetti/>
-        <span
-        ><span> {{days}} </span> Days</span
-        ><span>
-          <span> {{hours}} </span> Hours</span
-      ><span>
-          <span> {{mins}} </span> Minutes</span
-      ><span>
-          <span> {{secs}} </span> Seconds</span
-      >
+
+        <span>
+  <span>{{ String(days).padStart(2, '0') }}</span> Days
+</span>
+<span>
+  <span>{{ String(hours).padStart(2, '0') }}</span> Hours
+</span>
+<span>
+  <span>{{ String(mins).padStart(2, '0') }}</span> Minutes
+</span>
+<span>
+  <span>{{ String(secs).padStart(2, '0') }}</span> Seconds
+  // this code will always show 2 digits in the timer even when it is less than 10
+</span>
+
       </div>
     </div>
   </div>
@@ -426,6 +429,41 @@ export default {
     return {days, hours, mins, secs, user};
   },
 };
+// code to prevent negative timer
+  export default {
+  data() {
+    return {
+      days: 0,
+      hours: 0,
+      mins: 0,
+      secs: 0,
+      eventDate: new Date('2024-01-05T12:00:00'), // Updated event date to January 5th
+    };
+  },
+  mounted() {
+    this.updateTimer();
+    setInterval(this.updateTimer, 1000); // Update every second
+  },
+  methods: {
+    updateTimer() {
+      const currentDate = new Date();
+      const timeDifference = this.eventDate - currentDate;
+
+      if (timeDifference < 0) {
+        // Event has ended
+        this.days = 0;
+        this.hours = 0;
+        this.mins = 0;
+        this.secs = 0;
+      } else {
+        this.days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+        this.hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        this.mins = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+        this.secs = Math.floor((timeDifference % (1000 * 60)) / 1000);
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>