mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-10 13:17:13 -06:00
feat(CountDownTimer): added from different branch manually
This commit is contained in:
66
src/CountDown/CountDownTimer.css
Normal file
66
src/CountDown/CountDownTimer.css
Normal 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;
|
||||||
|
}
|
124
src/CountDown/CountDownTimer.jsx
Normal file
124
src/CountDown/CountDownTimer.jsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
Reference in New Issue
Block a user