fixing

resources/js/app.js

@@ -3,54 +3,6 @@ import './bootstrap';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 
 
-//Countdown date (adjust this date to your desired countdown target)
-const countdownDate = new Date('2024-08-17T11:00:00').getTime();
-
-//Update the countdown every second
-const countdownElement = document.getElementById('countdown');
-const countdownTimer = setInterval(() => {
-    //Get the current date and time
-    const now = new Date().getTime();
-
-    //Calculate the time remaining
-    const distance = countdownDate - now;
-
-    //Calculate days, hours, minutes, and seconds
-    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
-    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-    //Format the countdown into a string
-    const countdownHTML = `
-        <div class="flex flex-col">
-            <div class="flex gap-8 justify-center">
-                <div class="font-medium text-gray-500">${days}</div>
-                <div class="font-medium text-gray-500">:</div>
-                <div class="font-medium text-gray-500">${hours.toString().padStart(2, '0')}</div>
-                <div class="font-medium text-gray-500">:</div>
-                <div class="font-medium text-gray-500">${minutes.toString().padStart(2, '0')}</div>
-                <div class="font-medium text-gray-500">:</div>
-                <div class="font-medium text-gray-500">${seconds.toString().padStart(2, '0')}</div>
-            </div>
-            <div class="flex gap-14 justify-center">
-                <div class="font-medium text-gray-600">Hari</div>
-                <div class="font-medium text-gray-600">Jam</div>
-                <div class="font-medium text-gray-600">Minit</div>
-                <div class="font-medium text-gray-600">Saat</div>
-            </div>
-        </div>
-    `;
-
-    //Display the countdown in the element
-    countdownElement.innerHTML = countdownHTML;
-
-    //If the countdown is over, clear the timer and display a message
-    if (distance < 0) {
-        clearInterval(countdownTimer);
-        countdownElement.innerHTML = 'Majlis berlangsung';
-    }
-}, 1000); // Update every second (1000 milliseconds)
 
 document.addEventListener('DOMContentLoaded', function () {
 
@@ -85,6 +37,10 @@ document.addEventListener('click', function () {
         }, 600)
     }
 
+    setTimeout(()=>{
+        eventCountdown();
+    },2000)
+
 });
 
 function smoothScrollBy(distance, duration) {
@@ -105,7 +61,6 @@ function smoothScrollBy(distance, duration) {
     requestAnimationFrame(scroll);
 }
 
-
 // to ensure all images is loaded before starting animation and gimmick
 function imageLoading() {
     const images = document.querySelectorAll("img");
@@ -175,3 +130,55 @@ function playMusic(){
         }
     }
 }
+
+function eventCountdown(){
+
+//Countdown date (adjust this date to your desired countdown target)
+const countdownDate = new Date('2024-08-17T11:00:00').getTime();
+
+//Update the countdown every second
+const countdownElement = document.getElementById('countdown');
+const countdownTimer = setInterval(() => {
+    //Get the current date and time
+    const now = new Date().getTime();
+
+    //Calculate the time remaining
+    const distance = countdownDate - now;
+
+    //Calculate days, hours, minutes, and seconds
+    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    //Format the countdown into a string
+    const countdownHTML = `
+        <div class="flex flex-col">
+            <div class="flex gap-8 justify-center">
+                <div class="font-medium text-gray-500">${days}</div>
+                <div class="font-medium text-gray-500">:</div>
+                <div class="font-medium text-gray-500">${hours.toString().padStart(2, '0')}</div>
+                <div class="font-medium text-gray-500">:</div>
+                <div class="font-medium text-gray-500">${minutes.toString().padStart(2, '0')}</div>
+                <div class="font-medium text-gray-500">:</div>
+                <div class="font-medium text-gray-500">${seconds.toString().padStart(2, '0')}</div>
+            </div>
+            <div class="flex gap-14 justify-center">
+                <div class="font-medium text-gray-600">Hari</div>
+                <div class="font-medium text-gray-600">Jam</div>
+                <div class="font-medium text-gray-600">Minit</div>
+                <div class="font-medium text-gray-600">Saat</div>
+            </div>
+        </div>
+    `;
+
+    //Display the countdown in the element
+    countdownElement.innerHTML = countdownHTML;
+
+    //If the countdown is over, clear the timer and display a message
+    if (distance < 0) {
+        clearInterval(countdownTimer);
+        countdownElement.innerHTML = 'Majlis berlangsung';
+    }
+}, 1000); // Update every second (1000 milliseconds)
+}