content to recuitment page

This commit is contained in:
2024-03-02 12:05:26 -07:00
parent 4cf8f309f1
commit d7116b3819
5 changed files with 143 additions and 33 deletions

View File

@ -1,22 +1,38 @@
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,
* @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 [days, hours, minutes, seconds] = useCountdown(dateFinished);
if (days + hours + minutes + seconds <= 0) {
return (
<div>
{ShowCounter(days, hours, minutes, seconds)}
<p>{messageDisplayAfter}</p>
<div id="afterTime">
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
{messageDisplayAfter}
</div>
);
} else {
return (
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
<div>
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
</div>
);
}
};
@ -39,50 +55,56 @@ const useCountdown = (DateDone) => {
};
const getReturnValues = (countDown) => {
const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
const hours = Math.floor(
let days = Math.floor(countDown / (1000 * 60 * 60 * 24));
let hours = Math.floor(
(countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
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 danger = days <= 3;
return (
<div>
<div id="counter">
<DateTimeDisplay
valueAwayFrom={days}
discriptor={"Days"}
isInDanger={danger}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={hours}
discriptor={"Hours"}
isInDanger={false}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={minutes}
discriptor={"Mins"}
isInDanger={false}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={seconds}
discriptor={"Seconds"}
isInDanger={false}
/>
</div>
);
};
const DateTimeDisplay = ({ valueAwayFrom, discriptor, isInDanger }) => {
const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => {
return (
<div className={isInDanger ? "countdown danger" : "countdown"}>
<div>
<p>{valueAwayFrom}</p>
<span>{discriptor}</span>
</div>