Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 21:34:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

added functionality of Count Down Timer

Browse Source
This commit is contained in:
darkicewolf50 2024-02-24 18:11:08 -07:00
parent 4367c527a2
commit 4cf8f309f1
2 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js
View File

@ -1,4 +1,4 @@
//import CountDown from "../../CountDown/CountDown";
import CountDownTimer from "../../CountDown/CountDownTimer.js";
import "./JoinTheClub.css";
/**
@ -10,10 +10,16 @@ import "./JoinTheClub.css";
//semi-perminant email, do not need to respond but try to be a good alumni
*/
const JoinTheClub = () => {
const recuitmentDate = new Date(2024, 9, 17, 0, 0, 0, 0).getTime();
//september 17 2024
return (
<div id='JoinClub'>
<div id="JoinClub">
<p>Hello World</p>
{/* <CountDown></CountDown> */}
<CountDownTimer
dateFinished={recuitmentDate}
messageDisplayAfter={"Hello World"}
/>
</div>
);
};

55
src/CountDown/CountDown.js → src/CountDown/CountDownTimer.js
View File

@ -1,12 +1,12 @@
import { useEffect, useState } from "react";
const CountDownTimer = ({ DateFinished, MessageDisplayAfter }) => {
const [days, hours, minutes, seconds] = 0;
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>
<p>{messageDisplayAfter}</p>
</div>
);
} else {
@ -44,36 +44,47 @@ const getReturnValues = (countDown) => {
(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);
const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
return [days, hours, minutes, seconds];
};
const ShowCounter = ({ days, hours, minutes, seconds }) => {
let danger = days <= 3;
return (
<div className="show-counter">
<a
href="https://tapasadhikary.com"
target="_blank"
rel="noopener noreferrer"
className="countdown-link">
{DateTimeDisplay(days, "Days", days <= 3)}
<p>:</p>
{DateTimeDisplay(hours, "Hours", false)}
<p>:</p>
{DateTimeDisplay(minutes, "Mins", false)}
<p>:</p>
{DateTimeDisplay(seconds, "Seconds", false)}
</a>
<div>
<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 = ({ value, type, isDanger }) => {
const DateTimeDisplay = ({ valueAwayFrom, discriptor, isInDanger }) => {
return (
<div className={isDanger ? "countdown danger" : "countdown"}>
<p>{value}</p>
<span>{type}</span>
<div className={isInDanger ? "countdown danger" : "countdown"}>
<p>{valueAwayFrom}</p>
<span>{discriptor}</span>
</div>
);
};