feat(Countdown): final css may be required but finished

This commit is contained in:
2025-06-28 12:01:17 -06:00
parent 92d6fd7ca9
commit dd60effc91
3 changed files with 33 additions and 16 deletions

View File

@ -3,6 +3,6 @@
}
#message a {
/* text-align: center; */
width: auto;
text-decoration: none;
color: inherit;
}

View File

@ -1,5 +1,5 @@
#afterTime {
color: darkred;
#afterTime #counter {
color: black;
background-color: red;
}
@ -10,14 +10,12 @@
#counter {
display: flex;
flex-direction: row;
padding-left: 1svw;
padding-right: 1svw;
padding-top: 1svw;
padding: 0.5svh 1svw;
text-align: center;
background-color: whitesmoke;
border: 2px solid black;
border-radius: 5px;
justify-content: space-between;
border-radius: 1rem;
justify-content: space-evenly;
font-size: x-large;
}
@ -40,14 +38,14 @@
line-height: 1.75rem;
padding: 0.5rem;
border: 1px solid #ebebeb;
border-radius: 0.25rem;
border-radius: 1rem;
text-decoration: none;
color: #000;
}
#counter .countdown {
line-height: 1.25svb;
padding: 0 0.75rem 0 0.75rem;
padding: 0.75rem 0.75rem;
align-items: center;
display: flex;
flex-direction: column;
@ -56,3 +54,13 @@
#counter .countdownDanger {
color: #ff0000;
}
.countDownTimer a {
color: inherit;
text-decoration: none;
}
.countDownTimer {
width: fit-content;
margin: 0.5svh 1svw;
}

View File

@ -3,17 +3,23 @@ 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} 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>
* @todo change messageDisplayAfter to take in another page
*/
const CountDownTimer = ({ dateFinished, messageDisplayAfter }) => {
const CountDownTimer = ({
dateFinished,
messageDisplayAfter,
messageDisplayBefore,
}) => {
const [days, hours, minutes, seconds] = useCountdown(dateFinished);
if (days + hours + minutes + seconds <= 0) {
return (
<div id="afterTime">
<div
id="afterTime"
className="countDownTimer">
<ShowCounter
days={days}
hours={hours}
@ -25,13 +31,16 @@ const CountDownTimer = ({ dateFinished, messageDisplayAfter }) => {
);
} else {
return (
<div>
<div
id="countDownTimer"
className="countDownTimer">
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
{messageDisplayBefore}
</div>
);
}