diff --git a/src/plays/date-time-counter/CdTimerComp.js b/src/plays/date-time-counter/CdTimerComp.js index aa0e3b6813..d00b0908dd 100644 --- a/src/plays/date-time-counter/CdTimerComp.js +++ b/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 ( diff --git a/src/plays/date-time-counter/CountDownTimer.js b/src/plays/date-time-counter/CountDownTimer.js index 4153d82787..f3eb96a056 100644 --- a/src/plays/date-time-counter/CountDownTimer.js +++ b/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 ; } else { return ( diff --git a/src/plays/movies/movies.css b/src/plays/movies/movies.css index a0494786df..3cc0461e85 100644 --- a/src/plays/movies/movies.css +++ b/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 {