fix: update real time date and hour

index.html

@@ -51,7 +51,9 @@
           </form>
           <div class="overview">
             <h1 id="city"></h1>
-            <p class="current-date"></p>
+            <ul>
+              <li id="date"></li>
+            </ul>
           </div>
           <div class="row">
             <div class="col-3 d-flex justify-content-start weather-temperature">

script.js

@@ -1,5 +1,6 @@
 // get real-time and date
-function formatDate(currentDate) {
+function formatDate(timestamp) {
+  let currentDate = new Date(timestamp);
   let hour = currentDate.getHours();
   hour < 10 ? (hour = `0${hour}`) : false;
   let minutes = currentDate.getMinutes();
@@ -16,13 +17,9 @@ function formatDate(currentDate) {
   ];
 
   let day = days[currentDate.getDay()];
-  let fullDate = `${day}, ${hour}:${minutes}`;
-  let fullCurrentDate = (document.querySelector(".current-date").innerHTML =
-    fullDate);
+  return `${day} ${hour}:${minutes}`;
 }
 
-formatDate(new Date());
-
 // get temperature by searching for a city
 function showTemp(response) {
   let city = (document.querySelector(
@@ -40,6 +37,7 @@ function showTemp(response) {
   let wind = (document.querySelector(".wind").innerHTML = `${Math.round(
     response.data.wind.speed
   )} km/h`);
+  let date = document.querySelector("#date").innerHTML = formatDate(response.data.dt * 1000);
 }
 
 function search(city) {

style.css

@@ -46,6 +46,18 @@ h2 {
   font-size: 8.5rem;
 }
 
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style: none;
+  font-weight: 100;
+  line-height: 19px;
+  font-size: 16px;
+}
+
 img {
   height: 70px;
   width: 70px;
@@ -83,6 +95,7 @@ a {
   text-decoration: none;
   color: inherit;
 }
+
 .btn {
   font-size: 1.6rem;
 }