Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44: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"; 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 //semi-perminant email, do not need to respond but try to be a good alumni
*/ */
const JoinTheClub = () => { const JoinTheClub = () => {
const recuitmentDate = new Date(2024, 9, 17, 0, 0, 0, 0).getTime();
//september 17 2024
return ( return (
<div id='JoinClub'> <div id="JoinClub">
<p>Hello World</p> <p>Hello World</p>
{/* <CountDown></CountDown> */} <CountDownTimer
dateFinished={recuitmentDate}
messageDisplayAfter={"Hello World"}
/>
</div> </div>
); );
}; };

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

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