countdown logic

Author: zhuk1707

blocks/countdown.css

@@ -3,26 +3,20 @@
   display: grid;
   place-items: center;
 
-  &__inner {
-  }
-
   &__title {
     margin-bottom: 30px;
   }
-
-  &__counter {
-  }
 }
 
 .countdown {
   padding: 60px;
   &__title {
-    background: white;
-    padding: 10px;
-    border-radius: 10px;
+    text-align: center;
+    padding: 20px 30px;
     margin-bottom: 40px;
+    border-radius: 10px;
+    background: white;
     box-shadow: -11px -11px 20px rgba(255, 255, 255, 0.272044), -8px -40px 22px rgba(246, 251, 255, 0.384288), -8px 0px 8px rgba(244, 248, 251, 0.50254), 19px 21px 50px rgba(176, 195, 210, 0.727846);
-
   }
 
   &__deadline {
@@ -31,6 +25,15 @@
     padding-bottom: 10px;
   }
 
+  &__over {
+    padding: 20px 30px;
+    border-radius: 15px;
+    background-color: white;
+    width: 100%;
+    text-align: center;
+    box-shadow: -11px -11px 20px rgba(255, 255, 255, 0.272044), -8px -40px 22px rgba(246, 251, 255, 0.384288), -8px 0px 8px rgba(244, 248, 251, 0.50254), 19px 21px 50px rgba(176, 195, 210, 0.727846);
+  }
+
   &__format {
     border-radius: 15px;
     background-color: white;
@@ -42,11 +45,4 @@
     text-align: center;
     box-shadow: -11px -11px 20px rgba(255, 255, 255, 0.272044), -8px -40px 22px rgba(246, 251, 255, 0.384288), -8px 0px 8px rgba(244, 248, 251, 0.50254), 19px 21px 50px rgba(176, 195, 210, 0.727846);
   }
-
-  &__num {
-  }
-
-  &__time-unit {
-  }
-
 }

blocks/countdown.css.map

@@ -3,9 +3,12 @@
 }
 
 .counter {
+
   background-color: white;
   border-radius: 30px;
   padding: 30px;
+  margin: 60px;
+  box-shadow: -11px -11px 20px rgba(255, 255, 255, 0.272044), -8px -40px 22px rgba(246, 251, 255, 0.384288), -8px 0px 8px rgba(244, 248, 251, 0.50254), 19px 21px 50px rgba(176, 195, 210, 0.727846);
   &__output {
     text-align: center;
     font-size: 72px;

blocks/countdown.scss

@@ -21,15 +21,16 @@ <h1 class="main__title">Small JavaScript Projects</h1>
                         </a>
                         <a href="pages/counter.html" class="cards-block__title">Counter</a>
                         <p class="cards-block__subtitle">Simple counter.
-                            User can decrement, reset and increment counter.</p>
+                            The user can decrement, reset and increment counter
+                            .</p>
                     </div>
 
                     <div class="cards-block__item">
                         <a href="pages/counter.html" class="cards-block__image">
                             <img src="images/main-page/02.png" alt="Reviews">
                         </a>
                         <a href="pages/counter.html" class="cards-block__title">Reviews</a>
-                        <p class="cards-block__subtitle">Reviews block. User
+                        <p class="cards-block__subtitle">Reviews block. The user
                             can scroll horizontally different reviews or get
                             random content.
                         </p>
@@ -41,7 +42,7 @@ <h1 class="main__title">Small JavaScript Projects</h1>
                         </a>
                         <a href="pages/counter.html"
                            class="cards-block__title">Sidebar</a>
-                        <p class="cards-block__subtitle">Side menu. User can
+                        <p class="cards-block__subtitle">Side menu. The user can
                             open and close it at any time.
                         </p>
                     </div>
@@ -85,12 +86,14 @@ <h1 class="main__title">Small JavaScript Projects</h1>
                     </div>
 
                     <div class="cards-block__item">
-                        <a href="pages/counter.html" class="cards-block__image">
-                            <img src="images/main-page/07.png" alt="Reviews">
+                        <a href="pages/countdown.html" class="cards-block__image">
+                            <img src="images/main-page/07.png" alt="Countdown">
                         </a>
                         <a href="pages/counter.html"
                            class="cards-block__title">Countdown</a>
-                        <p class="cards-block__subtitle">...</p>
+                        <p class="cards-block__subtitle">Countdown. The user
+                            can find out how much time is left for a certain
+                            date.</p>
                     </div>
 
                     <div class="cards-block__item">

blocks/counter.css

@@ -16,8 +16,9 @@
                 <h1 class="main__title">Countdown</h1>
 
                 <div class="main__counter countdown">
-                    <h2 class="countdown__title">Something will happen on
-                        Monday 6th May at 12:30</h2>
+                    <h2 class="countdown__title">Something will happen on <br>
+                        <span>Monday 6th May at 12:30</span>
+                    </h2>
                     <div class="countdown__deadline">
                         <div class="countdown__format">
                             <div class="">

blocks/counter.css.map

@@ -0,0 +1,87 @@
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+]
+
+const weekdays = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+]
+
+const endDateSpan = document.querySelector('.countdown__title span')
+const deadline = document.querySelector('.countdown__deadline')
+const items = document.querySelectorAll('.countdown__format h1')
+console.log(items)
+
+let futureDate = new Date(2022,11,21, 21, 21,21);
+const year = futureDate.getFullYear()
+const hours = futureDate.getHours()
+const minutes = futureDate.getMinutes()
+let month = futureDate.getMonth()
+month = months[month]
+const day = futureDate.getDate()
+let weekday = weekdays[futureDate.getDay()]
+
+endDateSpan.innerText = `${weekday}, ${day} of ${month} ${year} ${hours}:${minutes}`
+
+//
+const futureTime = futureDate.getTime()
+
+function getRemainingTime() {
+  const currentTime = new Date().getTime()
+  let time = futureTime - currentTime
+
+  const oneDay = 24 * 60 * 60 * 1000
+  const oneHour = 60 * 60 * 1000
+  const oneMinute = 60 * 1000
+
+  let days = time / oneDay;
+  days = Math.floor(days);
+  let hours = Math.floor((time % oneDay) / oneHour);
+  let minutes = Math.floor((time % oneHour) / oneMinute);
+  let seconds = Math.floor((time % oneMinute) / 1000);
+  
+  const remainingTimeValues = [
+    Math.floor(days),
+    Math.floor(hours),
+    Math.floor(minutes),
+    Math.floor(seconds)
+  ]
+
+  function format(item) {
+    if (item < 10) {
+      item = `0${item}`
+    } 
+    return  item
+    
+  }
+  
+  items.forEach( (item, index) => {
+    item.innerHTML = format(remainingTimeValues[index])
+  })
+  
+  console.log(time)
+  if (time < 0) {
+    clearInterval(countdown)
+    deadline.innerHTML = `<h3 class="countdown__over">
+                            Congratulations the countdown is over!!!</h3>`
+  }
+}
+
+let countdown = setInterval(getRemainingTime, 1000)
+getRemainingTime()