Merge pull request #10 from atapas/countdown-fix

Countdown fix

src/plays/date-time-counter/CdTimerComp.js

@@ -2,14 +2,21 @@ import { useState } from "react";
 import CountDownTimer from "./CountDownTimer";
 
 const CdTimerComp = () => {
-  const dateTimeAfterThreeDays = new Date().getTime() + 3 * 24 * 60 * 60 * 1000;
+  const THREE_DAYS_IN_MS = 3 * 24 * 60 * 60 * 1000;
+  const NOW_IN_MS = new Date().getTime();
+
+  const dateTimeAfterThreeDays = NOW_IN_MS + THREE_DAYS_IN_MS;
   const [targetDate, setTargetDate] = useState(
     new Date(dateTimeAfterThreeDays)
   );
 
   const handleChange = (event) => {
     event.preventDefault();
-    setTargetDate(new Date(event.target.value));
+    if (event.target.value) {
+      setTargetDate(new Date(event.target.value));
+    } else {
+      setTargetDate(new Date(dateTimeAfterThreeDays));
+    }
   };
 
   return (

src/plays/date-time-counter/CountDownTimer.js

@@ -35,7 +35,7 @@ const ShowCounter = ({ days, hours, minutes, seconds }) => {
 const CountDownTimer = ({ targetDate }) => {
   const [days, hours, minutes, seconds] = useCountDown(targetDate);
 
-  if (days < 0) {
+  if (days + hours + minutes + seconds <= 0) {
     return <ExpiredNotice />;
   } else {
     return (

src/plays/movies/movies.css

@@ -24,6 +24,10 @@ li {
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: #fff;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
 }
 
 .movie img {