mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-11 13:47:13 -06:00
content to recuitment page
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user