Countdown fix

src/meta/play-meta.js

@@ -1,6 +1,6 @@
 
 import {
-  BasicTree, CountDownTimer,
+  BasicTree, CdTimerComp,
   CurrentTimer,
   MovieContainer,
   WhyReact
@@ -22,7 +22,7 @@ const plays = [
   },
   {
     name: 'Countdown Timer',
-    component: () => {return <CountDownTimer targetDate = {'Feb 25, 2022 15:37:25'} />},
+    component: () => {return <CdTimerComp />},
     path: '/plays/countdown',
     includeInMenu: true,
   },

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

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import CountDownTimer from "./CountDownTimer";
+
+const CdTimerComp = () => {
+  const dateTimeAfterThreeDays = new Date().getTime() + 3 * 24 * 60 * 60 * 1000;
+  const [targetDate, setTargetDate] = useState(
+    new Date(dateTimeAfterThreeDays)
+  );
+
+  const handleChange = (event) => {
+    event.preventDefault();
+    setTargetDate(new Date(event.target.value));
+  };
+
+  return (
+    <div className="countdown-container">
+      <h2>Countdown Timer</h2>
+      <form>
+        <label htmlFor="countdown-date-time">Select a Date and Time:</label>
+        <input
+          type="datetime-local"
+          id="countdown-date-time"
+          name="countdown-date-time"
+          onChange={handleChange}
+        />
+      </form>
+      <CountDownTimer targetDate={targetDate} />
+    </div>
+  );
+};
+
+export default CdTimerComp;

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

@@ -2,44 +2,51 @@ import "./datetime.css";
 import DateTimeDisplay from "./DateTimeDisplay";
 import useCountDown from "./hooks/useCountDown";
 
-const CountDownTimer = ({ targetDate }) => {
-
-  const [days, hours, minutes, seconds] = useCountDown(targetDate);
+const ExpiredNotice = () => {
+  return (
+    <div className="expired-notice">
+      <span>Expired!!!</span>
+      <p>Please select a future date and time.</p>
+    </div>
+  );
+};
 
+const ShowCounter = ({ days, hours, minutes, seconds }) => {
   return (
-    <div className="countdown-container">
+    <div className="show-counter">
       <a
         href="https://tapasadhikary.com"
         target="_blank"
         rel="noopener noreferrer"
         className="countdown-link"
       >
-        <DateTimeDisplay
-          value={days}
-          type={"Days"}
-          isDanger={days <= 3}
-        />
+        <DateTimeDisplay value={days} type={"Days"} isDanger={days <= 3} />
         <p>:</p>
-        <DateTimeDisplay
-          value={hours}
-          type={"Hours"}
-          isDanger={false}
-        />
+        <DateTimeDisplay value={hours} type={"Hours"} isDanger={false} />
         <p>:</p>
-        <DateTimeDisplay
-          value={minutes}
-          type={"Mins"}
-          isDanger={false}
-        />
+        <DateTimeDisplay value={minutes} type={"Mins"} isDanger={false} />
         <p>:</p>
-        <DateTimeDisplay
-          value={seconds}
-          type={"Seconds"}
-          isDanger={false}
-        />
+        <DateTimeDisplay value={seconds} type={"Seconds"} isDanger={false} />
       </a>
     </div>
   );
 };
 
+const CountDownTimer = ({ targetDate }) => {
+  const [days, hours, minutes, seconds] = useCountDown(targetDate);
+
+  if (days < 0) {
+    return <ExpiredNotice />;
+  } else {
+    return (
+      <ShowCounter
+        days={days}
+        hours={hours}
+        minutes={minutes}
+        seconds={seconds}
+      />
+    );
+  }
+};
+
 export default CountDownTimer;

src/plays/date-time-counter/datetime.css

@@ -1,5 +1,38 @@
+.countdown-container {
+  margin: 0.5rem
+}
+
+.countdown-container > form {
+  padding: 0.5rem;
+}
+
+.countdown-container > form > label {
+  margin-right: 0.09rem;
+}
+
+.expired-notice {
+  text-align: center;
+  padding: 2rem;
+  border: 1px solid #ebebeb;
+  border-radius: 0.25rem;
+  margin: 0.5rem;
+}
+
+.expired-notice > span {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: red;
+}
+
+.expired-notice > p {
+  font-size: 1.5rem;
+}
+
+.show-counter {
+  padding: 0.5rem;
+}
 
-.countdown-link {
+.show-counter .countdown-link {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -14,23 +47,23 @@
   color: #000;
 }
 
-.countdown {
+.show-counter .countdown {
   line-height: 1.25rem;
   padding: 0 0.75rem 0 0.75rem;
   align-items: center;
   display: flex;
   flex-direction: column;
 }
 
-.countdown.danger {
+.show-counter .countdown.danger {
   color: #ff0000;
 }
 
-.countdown > p {
+.show-counter .countdown > p {
   margin: 0;
 }
 
-.countdown > span {
+.show-counter .countdown > span {
   text-transform: uppercase;
   font-size: 0.75rem;
   line-height: 1rem;

src/plays/index.js

@@ -1,7 +1,7 @@
 export { default as PageNotFound } from '../common/404/PageNotFound';
 export { default as Home } from '../common/home/Home';
 export { default as CurrentTimer } from './clock/CurrentTimer';
-export { default as CountDownTimer } from './date-time-counter/CountDownTimer';
+export { default as CdTimerComp } from './date-time-counter/CdTimerComp';
 export { default as BasicTree } from './family-tree/BasicTree';
 export { default as MovieContainer } from './movies/MovieContainer';
 export { default as WhyReact } from './why-react/WhyReact';