Add files via upload

pauluwaifo · Sep 9, 2023 · ab6fbe2 · ab6fbe2
1 parent 59f9577
commit ab6fbe2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -9,33 +9,27 @@
 <body>
 
     <div class="container">
-        <!-- DATE -->
-        <div>
-            <p id="day" data-testid="currentDayOfTheWeek" class="day"></p>
-        </div>
-
         <!-- 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" />
         </div>
-
-        <!-- SLACK NAME -->
-        <div class="text_holder">
-            <h3 data-testid="slackUserName">ODION UWAIFO</h3>
-            <p data-testid="myTrack">Track:  Frontend </p>
-            <a href="https://github.com/pauluwaifo/hngx-stage-one" 
-                class="link" 
-                target="_blank"
-                data-testid="githubURL">
-                Connect on GitHub
-            </a>
-        </div>
-
-        <!-- TIME -->
-        <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>

diff --git a/script.js b/script.js
@@ -3,15 +3,15 @@ function updateTime() {
     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 timeString = `Current UTC Time: ${hours}:${minutes}:${seconds} UTC`;
+    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;
-
 }
 
 function Day() {
     const currentDate = new Date();
-    const currentDayNumber = currentDate.getUTCDay(); // Use getUTCDay() to get UTC day
+    const currentDayNumber = currentDate.getUTCDay(); 
     const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
     const currentDay = daysOfWeek[currentDayNumber]
     const dayElement = document.getElementById('day');
@@ -20,4 +20,4 @@ function Day() {
 
 updateTime()
 Day()
-setInterval(updateTime, 1000)
+setInterval(updateTime, 1)
diff --git a/style.css b/style.css
@@ -7,9 +7,10 @@ body {
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }
 .container {
+    text-align: center !important;
     display: block;
     width: 300px;
-    max-width: 300px;
+    max-width: 400px;
     height: auto;
     padding: 10px 10px 10px 10px;
     background-color: #ffffff;
@@ -38,24 +39,22 @@ body {
     border-top-left-radius: 50%;
     border-top-right-radius: 50%;
     margin: auto auto;
-    display: inline-block;
-    border: 1px solid #ffffff;
+    display: block;
+    border: 2px solid #18154c;
     transition: all .3s ease-out; 
     padding: 0 !important;
+    box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
 }
 .container:hover .place_holder {
     box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
     transition: all .3s ease-in;
-    border: 1.5px solid #18154c;
+    border: 3px solid #18154c;
 }
 .place_holder > img {
     width: 100%;
 }
-.text_holder {
-    display: inline-block;
-    position: absolute;
-    top: 0 !important;
-    padding: 40px 0px 10px 10px;
+.mt-2 {
+    margin-top: 20px;
 }
 .border {
     width: 0%;
@@ -74,7 +73,7 @@ body {
     color: #ffffff;
     font-weight: 500;
     padding: 15px 15px;
-    display: inline-block;
+    display: block;
     box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
     border-radius: 5px;
     transition: all .3s ease-out;
@@ -87,9 +86,7 @@ body {
 }
 .time {
     color: #545454;
-    text-align: right;
     font-size: .8rem;
-
     padding-top: 5px ;
     display: block;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;