From e4480cf144b0910de8f95d6334c1cf71a3c3ba23 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Mon, 31 Jan 2022 12:29:16 +0530
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20Added=20a=20datetime=20picker?=
 =?UTF-8?q?=20for=20countdown=20timer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/meta/play-meta.js                         |  4 +-
 src/plays/date-time-counter/CdTimerComp.js    | 33 +++++++++++
 src/plays/date-time-counter/CountDownTimer.js | 55 +++++++++++--------
 src/plays/date-time-counter/datetime.css      | 43 +++++++++++++--
 src/plays/index.js                            |  2 +-
 5 files changed, 105 insertions(+), 32 deletions(-)
 create mode 100644 src/plays/date-time-counter/CdTimerComp.js

diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index 3fb6ec4fd4..d15f03dab2 100644
--- a/src/meta/play-meta.js
+++ b/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,
   },
diff --git a/src/plays/date-time-counter/CdTimerComp.js b/src/plays/date-time-counter/CdTimerComp.js
new file mode 100644
index 0000000000..9edd26092a
--- /dev/null
+++ b/src/plays/date-time-counter/CdTimerComp.js
@@ -0,0 +1,33 @@
+import { useState } from "react";
+import CountDownTimer from "./CountDownTimer";
+
+const CdTimerComp = () => {
+  const dateTimeAfterThreeDays = new Date().getTime() + 259200000;
+  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 for="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;
diff --git a/src/plays/date-time-counter/CountDownTimer.js b/src/plays/date-time-counter/CountDownTimer.js
index b5027598df..4153d82787 100644
--- a/src/plays/date-time-counter/CountDownTimer.js
+++ b/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;
diff --git a/src/plays/date-time-counter/datetime.css b/src/plays/date-time-counter/datetime.css
index 4aafe77a4b..3e81e99433 100644
--- a/src/plays/date-time-counter/datetime.css
+++ b/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,7 +47,7 @@
   color: #000;
 }
 
-.countdown {
+.show-counter .countdown {
   line-height: 1.25rem;
   padding: 0 0.75rem 0 0.75rem;
   align-items: center;
@@ -22,15 +55,15 @@
   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;
diff --git a/src/plays/index.js b/src/plays/index.js
index 1af057259a..ceb3d70104 100644
--- a/src/plays/index.js
+++ b/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';

From dcca27fa7c1396420590759d0c4592ab73b408e0 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Mon, 31 Jan 2022 12:39:27 +0530
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20htmlFor=20instead=20of=20for?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plays/date-time-counter/CdTimerComp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plays/date-time-counter/CdTimerComp.js b/src/plays/date-time-counter/CdTimerComp.js
index 9edd26092a..876ba9949a 100644
--- a/src/plays/date-time-counter/CdTimerComp.js
+++ b/src/plays/date-time-counter/CdTimerComp.js
@@ -17,7 +17,7 @@ const CdTimerComp = () => {
     <div className="countdown-container">
       <h2>Countdown Timer</h2>
       <form>
-        <label for="countdown-date-time">Select a Date and Time:</label>
+        <label htmlFor="countdown-date-time">Select a Date and Time:</label>
         <input
           type="datetime-local"
           id="countdown-date-time"

From 023d1c29dc14662a01cb64f2ddd4f4deaa492307 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Mon, 31 Jan 2022 12:45:19 +0530
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20improve=20the=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plays/date-time-counter/CdTimerComp.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/plays/date-time-counter/CdTimerComp.js b/src/plays/date-time-counter/CdTimerComp.js
index 876ba9949a..aa0e3b6813 100644
--- a/src/plays/date-time-counter/CdTimerComp.js
+++ b/src/plays/date-time-counter/CdTimerComp.js
@@ -2,12 +2,11 @@ import { useState } from "react";
 import CountDownTimer from "./CountDownTimer";
 
 const CdTimerComp = () => {
-  const dateTimeAfterThreeDays = new Date().getTime() + 259200000;
+  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));