feat(CountDownTimer): added from different branch manually

This commit is contained in:
2025-06-28 13:35:26 -06:00
parent 829871f537
commit 42712746eb
2 changed files with 190 additions and 0 deletions

View File

@ -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;
}

View File

@ -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 <darkicewolf50@gmail.com>
*/
export default function CountDownTimer({
dateFinished,
messageDisplayAfter,
messageDisplayBefore,
}) {
const [days, hours, minutes, seconds] = useCountdown(dateFinished);
if (days + hours + minutes + seconds <= 0) {
return (
<div
id="afterTime"
className="countDownTimer">
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
{messageDisplayAfter}
</div>
);
} else {
return (
<div
id="countDownTimer"
className="countDownTimer">
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
{messageDisplayBefore}
</div>
);
}
}
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 (
<div
className={dangerDays}
id="counter">
<DateTimeDisplay
valueAwayFrom={days}
discriptor={"Days"}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={hours}
discriptor={"Hours"}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={minutes}
discriptor={"Mins"}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={seconds}
discriptor={"Seconds"}
/>
</div>
);
};
const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => {
return (
<div>
<p>{valueAwayFrom}</p>
<p>{discriptor}</p>
</div>
);
};