ODION UWAIFO
- -
- 
+
+
+
+ My Personal Data
+
+
+
+
+
+
+
+
+
+
-
-
-
+
\ No newline at end of file
diff --git a/script.js b/script.js
index 944d5f9..9900875 100644
--- 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)
\ No newline at end of file
+ // 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}`;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 36fbaa6..2ca9ef6 100644
--- a/style.css
+++ b/style.css
@@ -1,101 +1,223 @@
* {
box-sizing: border-box;
-}
-body {
+ }
+ body {
margin: 0;
padding: 0;
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-}
-.container {
- text-align: center !important;
- display: block;
- width: 300px;
- max-width: 400px;
- 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 {
+ font-family: Arial, sans-serif;
+ background-color: #414b56;
+ color: white;
+ }
+ .container {
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: 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: 3px solid #18154c;
-}
-.place_holder > img {
+ height: 90vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .wrapper {
+ background-color: #0d1520;
+ width: 20%;
+ height: 320px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+ .profile {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ line-height: 1px;
+ }
+ .profile-img-wrapper {
+ width: 90px;
+ height: 90px;
+ background-color: transparent;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ border: 3px solid #786d89;
+ margin-bottom: 10px;
+ }
+ #profile-image {
+ width: 80px;
+ height: 80px;
+ }
+ #profile-image img {
width: 100%;
-}
-.mt-2 {
+ height: 100%;
+ object-fit: cover;
+ border-radius: 50%;
+ }
+ .live-data {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ line-height: 1px;
+ }
+ button {
margin-top: 20px;
-}
-.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 {
+ padding: 12px 25px;
+ background-color: black;
+ border: 0;
+ border-radius: 20px;
+ background-image: linear-gradient(
+ to right,
+ #2b5876 0%,
+ #4e4376 51%,
+ #2b5876 100%
+ );
+ }
+ button a {
text-decoration: none;
- font-size: .9rem;
- background-color: #18154c;
- color: #ffffff;
- font-weight: 500;
- padding: 15px 15px;
- display: 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;
- 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;
-}
\ No newline at end of file
+ color: white;
+ }
+ #slack_username {
+ font-size: 14px;
+ font-weight: 700;
+ }
+ #my-track {
+ font-size: 14px;
+ font-weight: 700;
+ }
+ .current-data {
+ font-size: 14px;
+ font-weight: 700;
+ text-transform: uppercase;
+ }
+ @media only screen and (max-width: 1024px) {
+
+ .wrapper {
+ background-color: #0d1520;
+ width:25%;
+ height: 320px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+ @media only screen and (max-width: 768px) {
+
+ .wrapper {
+ background-color: #0d1520;
+ width:90%;
+ height: 350px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+ .profile-img-wrapper {
+ width: 80px;
+ height: 80px;
+ background-color: transparent;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ border: 3px solid #786d89;
+ }
+ #profile-image {
+ width: 70px;
+ height: 70px;
+ }
+
+ }
+ @media only screen and (max-width: 375px) {
+
+ .wrapper {
+ background-color: #0d1520;
+ width:90%;
+ height: 350px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+ .profile-img-wrapper {
+ width: 80px;
+ height: 80px;
+ background-color: transparent;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ border: 3px solid #786d89;
+ }
+ #profile-image {
+ width: 70px;
+ height: 70px;
+ }
+ button {
+ margin-top: 20px;
+ padding: 12px 15px;
+ background-color: black;
+ border: 0;
+ color: white;
+ border-radius: 20px;
+ background-image: linear-gradient(
+ to right,
+ #2b5876 0%,
+ #4e4376 51%,
+ #2b5876 100%
+ );
+ }
+ .live-data{
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ }
+ }
+ @media only screen and (max-width: 320px) {
+
+ .wrapper {
+ background-color: #0d1520;
+ width:95%;
+ height: 320px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+ .profile-img-wrapper {
+ width: 70px;
+ height: 70px;
+ background-color: transparent;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ border: 3px solid #786d89;
+ }
+ #profile-image {
+ width: 60px;
+ height: 60px;
+ }
+ button {
+ margin-top: 20px;
+ padding: 10px 12px;
+ background-color: black;
+ border: 0;
+ color: white;
+ border-radius: 20px;
+ background-image: linear-gradient(
+ to right,
+ #2b5876 0%,
+ #4e4376 51%,
+ #2b5876 100%
+ );
+ }
+ .live-data{
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ }
+ }
\ No newline at end of file
+
+
-
-
+
+
+ Odion Uwaifo
+ +
+
+
+
+
+
+
+
+
+
+
+ + Loading... +
+
+
+
+
+ + Loading... +
+Frontend Track
+
-
-
-
-
- Track: Frontend
- - - Connect on GitHub - - - +