Updated frontend logic

Author: Son Nguyen

index.html

@@ -27,6 +27,11 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             The Mo<span class="highlight">vieV</span>erse
         </h1>
 
+        <div>
+            <p id="time-label">Local Time:</p>
+            <h1 id="clock" class="clock"></h1>
+        </div>
+
         <!-- Create a button to toggle the side navigation bar -->
         <button id="nav-toggle" class="nav-toggle" title="Toggle Side Navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>

movie-details.js

@@ -377,5 +377,4 @@ async function showMovieOfTheDay(){
         console.error('Error fetching movie:', error);
         alert('Failed to fetch the movie of the day. Please try again later.');
     }
-
 }

script.js

@@ -1274,5 +1274,25 @@ function showMoviesDirectorSpotlight(movies) {
 
         main20.appendChild(movieE1);
     });
+}
+
+function updateClock() {
+    var now = new Date();
+    var hours = now.getHours();
+    var minutes = now.getMinutes();
+
+    // Add leading zero to minutes if less than 10
+    minutes = minutes < 10 ? '0' + minutes : minutes;
 
+    // Format the time in HH:MM format
+    var timeString = hours + ':' + minutes;
+
+    // Update the clock element
+    document.getElementById('clock').innerHTML = timeString;
 }
+
+// Update the clock every second
+setInterval(updateClock, 1000);
+
+// Initialize the clock on page load
+window.onload = updateClock;

style.css

@@ -705,6 +705,16 @@ p {
     margin: 10px auto;
 }
 
+.clock {
+    text-align: center;
+    font-size: 20px;
+    color: #ff8623;
+}
+
+#time-label {
+    color: #ff8623;
+}
+
 .app-btn:hover {
     background-color: #ff8623;
 }