Add files via upload

pauluwaifo · Sep 10, 2023 · 0fa6f89 · 0fa6f89
1 parent ab6fbe2
commit 0fa6f89
Show file tree

Hide file tree

Showing 3 changed files with 290 additions and 147 deletions.
diff --git a/index.html b/index.html
@@ -1,39 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Frontend course</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-
-    <div class="container">
-        <!-- MAIN CONTENT -->
-        <!-- NAME -->
-        <h3 data-testid="slackUserName">ODION UWAIFO</h3>
-        <!-- IMAGE -->
-        <div class="place_holder">
-            <img data-testid="slackDisplayImage" src="static/user-image.png" alt="odion-uwaifo" />
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Personal Data</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div>
+      <div class="container">
+        <div class="wrapper">
+          <div class="profile">
+            <!-- Slack Name -->
+            <p data-testid="slackUserName" id="slack_username">Odion Uwaifo</p>
+            <!-- Slack Display Picture -->
+            <div class="profile-img-wrapper">
+              <div id="profile-image">
+                <img
+                  src="static/user-image.png"
+                  alt="odionuwaifo"
+                  data-testid="slackDisplayImage"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="live-data">
+            <!-- Current Day of the Week -->
+            <div class="current-day">
+              <p data-testid="currentDayOfTheWeek" class="current-data">
+                Loading...
+              </p>
+            </div>
+            <div class="current-time">
+              <!-- Current UTC Time -->
+              <p data-testid="currentUTCTime" class="current-data">
+                Loading...
+              </p>
+            </div>
+            <!-- Track -->
+            <p data-testid="myTrack" id="my-track">Frontend Track</p>
+          </div>
+          <button>
+            <a
+              href="https://github.com/pauluwaifo/hngx-stage-one"
+              target="_blank"
+              data-testid="githubURL"
+            >
+              Github Repo</a
+            >
+          </button>
         </div>
-        <!-- TIME AND DATE-->
-        <div class="mt-2">
-            <p id="day" data-testid="currentDayOfTheWeek" class="day"></p>
-            <p id="time" data-testid="currentUTCTime" class="time"></p>
-        </div>
-        <!-- MY TRACK -->
-        <p data-testid="myTrack">Track:  Frontend </p>
-        <!-- LINK TO GITHUB -->
-        <a href="https://github.com/pauluwaifo/hngx-stage-one" 
-            class="link" 
-            target="_blank"
-            data-testid="githubURL">
-            Connect on GitHub
-        </a>
-        <!-- BORDER -->
-        <div class="border"></div>
+      </div>
     </div>
-
-    <script src="script.js"></script>
-</body>
+  </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,23 +1,26 @@
-function updateTime() {
-    const currentDate = new Date();
-    const hours = String(currentDate.getUTCHours()).padStart(2, '0');
-    const minutes = String(currentDate.getUTCMinutes()).padStart(2, '0');
-    const seconds = String(currentDate.getUTCSeconds()).padStart(2, '0');
-    const milliseconds = String(currentDate.getUTCMilliseconds()).padStart(3, '0');
-    const timeString = `Current UTC Time: ${hours}:${minutes}:${seconds}.${milliseconds} UTC`;
-    const timeElement = document.getElementById('time');
-    timeElement.textContent = timeString;
-}
+// JavaScript to populate dynamic data
+document.addEventListener("DOMContentLoaded", function() {
+    // Get the current date and time
+    const now = new Date();
 
-function Day() {
-    const currentDate = new Date();
-    const currentDayNumber = currentDate.getUTCDay(); 
+    // Get the day of the week
     const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-    const currentDay = daysOfWeek[currentDayNumber]
-    const dayElement = document.getElementById('day');
-    dayElement.textContent = `Current Day: ${currentDay}`;
-}
+    const currentDay = daysOfWeek[now.getUTCDay()];
 
-updateTime()
-Day()
-setInterval(updateTime, 1)
+    // Update the elements with the dynamic data
+    document.querySelector('[data-testid="currentDayOfTheWeek"]').textContent = ` ${currentDay}`;
+
+    // Initial call to update the UTC time
+    updateUTCTime();
+
+    // Update the UTC time every second (real-time)
+    setInterval(updateUTCTime, 1000);
+});
+
+
+// Function to update the UTC time in milliseconds
+function updateUTCTime() {
+    const now = new Date();
+    const currentUTCTimeInMillis = now.getTime(); // Get time in milliseconds
+    document.querySelector('[data-testid="currentUTCTime"]').textContent = `${currentUTCTimeInMillis}`;
+}