Add files via upload

pauluwaifo · Sep 8, 2023 · dd0c097 · dd0c097
1 parent 3508078
commit dd0c097
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!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">
+        <!-- DATE -->
+        <div>
+            <p id="day" data-testid="currentDayOfTheWeek" class="day"></p>
+        </div>
+
+        <!-- MAIN CONTENT -->
+        <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/slackProject" 
+                class="link" 
+                target="_blank"
+                data-testid="githubURL">
+                Connect on GitHub
+            </a>
+        </div>
+
+        <!-- TIME -->
+        <div>
+            <p id="time" data-testid="currentUTCTime" class="time"></p>
+        </div>
+
+        <!-- BORDER -->
+        <div class="border"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,23 @@
+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 timeString = `Current UTC Time: ${hours}:${minutes}:${seconds} 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 daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    const currentDay = daysOfWeek[currentDayNumber]
+    const dayElement = document.getElementById('day');
+    dayElement.textContent = `Current Day: ${currentDay}`;
+}
+
+updateTime()
+Day()
+setInterval(updateTime, 1000)
diff --git a/static/user-image.png b/static/user-image.png
diff --git a/style.css b/style.css
@@ -0,0 +1,104 @@
+* {
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.container {
+    display: block;
+    width: 300px;
+    max-width: 300px;
+    height: auto;
+    padding: 10px 10px 10px 10px;
+    background-color: #ffffff;
+    margin: 15% auto;
+    box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
+    position: relative;
+    line-height: .2;
+    overflow: hidden;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-left-radius: 10px;
+}
+.container:hover .border {
+    width: 100%;
+    border-bottom: 1px solid #18154c;
+    transition: all .5s ease-in;
+}
+.place_holder {
+    background-color: grey;
+    overflow: hidden;
+    position: relative;
+    width: 100px;
+    height: 100px;
+    border-bottom-left-radius: 50%;
+    border-bottom-right-radius: 50%;
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    margin: auto auto;
+    display: inline-block;
+    border: 1px solid #ffffff;
+    transition: all .3s ease-out; 
+    padding: 0 !important;
+}
+.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;
+}
+.place_holder > img {
+    width: 100%;
+}
+.text_holder {
+    display: inline-block;
+    position: absolute;
+    top: 0 !important;
+    padding: 40px 0px 10px 10px;
+}
+.border {
+    width: 0%;
+    height: 1px;
+    position: absolute;
+    border-bottom: 1px solid 18154c;
+    bottom: 0;
+    left: 0;
+    margin: auto auto;
+    transition: all .5s ease-out;
+}
+.link {
+    text-decoration: none;
+    font-size: .9rem;
+    background-color: #18154c;
+    color: #ffffff;
+    font-weight: 500;
+    padding: 15px 15px;
+    display: inline-block;
+    box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
+    border-radius: 5px;
+    transition: all .3s ease-out;
+}
+.link:hover {
+    background-color: #16134b;
+    transition: all .3s ease-in;
+    color: #ffffff;
+    padding: 15px 16px;
+}
+.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;
+}
+.day {
+    color: #545454;
+    font-size: .8rem;
+    padding-bottom: px ;
+    display: block;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 500;
+}