From 42712746eb747fc6bc968ec4e5bc73f512c47140 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 28 Jun 2025 13:35:26 -0600 Subject: [PATCH] feat(CountDownTimer): added from different branch manually --- src/CountDown/CountDownTimer.css | 66 ++++++++++++++++ src/CountDown/CountDownTimer.jsx | 124 +++++++++++++++++++++++++++++++ 2 files changed, 190 insertions(+) create mode 100644 src/CountDown/CountDownTimer.css create mode 100644 src/CountDown/CountDownTimer.jsx diff --git a/src/CountDown/CountDownTimer.css b/src/CountDown/CountDownTimer.css new file mode 100644 index 0000000..7c89d58 --- /dev/null +++ b/src/CountDown/CountDownTimer.css @@ -0,0 +1,66 @@ +#afterTime #counter { + color: black; + background-color: red; +} + +#counter.dangerDays { + background-color: red; +} + +#counter { + display: flex; + flex-direction: row; + padding: 0.5svh 1svw; + text-align: center; + background-color: whitesmoke; + border: 2px solid black; + border-radius: 1rem; + justify-content: space-evenly; + font-size: x-large; +} + +#counter div { + display: flex; + flex-direction: row; +} + +#counter div p { + padding-left: 1svw; +} + +#counter .countdown-link { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + font-weight: 700; + font-size: 1.25rem; + line-height: 1.75rem; + padding: 0.5rem; + border: 1px solid #ebebeb; + border-radius: 1rem; + text-decoration: none; + color: #000; +} + +#counter .countdown { + line-height: 1.25svb; + padding: 0.75rem 0.75rem; + align-items: center; + display: flex; + flex-direction: column; +} + +#counter .countdownDanger { + color: #ff0000; +} + +.countDownTimer a { + color: inherit; + text-decoration: none; +} + +.countDownTimer { + width: fit-content; + margin: 0.5svh 1svw; +} diff --git a/src/CountDown/CountDownTimer.jsx b/src/CountDown/CountDownTimer.jsx new file mode 100644 index 0000000..3ddbe31 --- /dev/null +++ b/src/CountDown/CountDownTimer.jsx @@ -0,0 +1,124 @@ +import { useEffect, useState } from "react"; +import "./CountDownTimer.css"; + +/** + * @param {Date} dateFinished - Date object with time that it finishes Date(year, monthNumber, day, hour, minute, second) + * @param {React.JSX.Element} messageDisplayAfter - Message to display afterwards + * @param {React.JSX.Element} messageDisplayBefore - The Message to display while it is counting down + * @returns {React.JSX.Element} page - returns the page content + * @description A fun countdown timer of how many days, minutesz and seconds until x happens + * @author Brock + */ +export default function CountDownTimer({ + dateFinished, + messageDisplayAfter, + messageDisplayBefore, +}) { + const [days, hours, minutes, seconds] = useCountdown(dateFinished); + if (days + hours + minutes + seconds <= 0) { + return ( +
+ + {messageDisplayAfter} +
+ ); + } else { + return ( +
+ + {messageDisplayBefore} +
+ ); + } +} + +const useCountdown = (DateDone) => { + const countDownDate = new Date(DateDone).getTime(); + + const [countDown, setCountDown] = useState( + countDownDate - new Date().getTime() + ); + useEffect(() => { + const interval = setInterval(() => { + setCountDown(countDownDate - new Date().getTime()); + }, 1000); + + return () => clearInterval(interval); + }, [countDownDate]); + + return getReturnValues(countDown); +}; + +const getReturnValues = (countDown) => { + let days = Math.floor(countDown / (1000 * 60 * 60 * 24)); + let hours = Math.floor( + (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) + ); + let minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60)); + let seconds = Math.floor((countDown % (1000 * 60)) / 1000); + if (days < 0) { + days = 0; + } + if (hours < 0) { + hours = 0; + } + if (minutes < 0) { + minutes = 0; + } + if (seconds < 0) { + seconds = 0; + } + return [days, hours, minutes, seconds]; +}; + +const ShowCounter = ({ days, hours, minutes, seconds }) => { + let dangerDays = days > 10 ? "" : "dangerDays"; + return ( +
+ +

:

+ +

:

+ +

:

+ +
+ ); +}; + +const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => { + return ( +
+

{valueAwayFrom}

+

{discriptor}

+
+ ); +};