content to recuitment page

src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.css

@@ -1,3 +1,4 @@
 #JoinClub div {
-	background-color: green;
+	/* background-color: green; */
+	width: auto;
 }

src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js

@@ -1,27 +1,56 @@
 import CountDownTimer from "../../CountDown/CountDownTimer.js";
 import "./JoinTheClub.css";
+import "./messageToDisplayAfter.css";
 
 /**
- * @param {Object} inputVar - one argument into the function should be its name
- * @param {number} b - one argument into the function should be its name
- * @returns {Promise<number>} c - what the program returns with type
- * @description A brief description of what the function does
- * @author Name <semiperminant@exmaplemail.com>
-//semi-perminant email, do not need to respond but try to be a good alumni
+ * @param {null} null - requires nothing
+ * @returns {React.JSX.Element} page - returns the page content
+ * @description Recuitment Page on our website
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo css
  */
 const JoinTheClub = () => {
-	const recuitmentDate = new Date(2024, 9, 17, 0, 0, 0, 0).getTime();
-	//september 17 2024
+	const recuitmentDate = new Date(2024, 9, 17, 0, 0, 0, 0).getTime(); //september 17 2024
 
 	return (
 		<div id="JoinClub">
-			<p>Hello World</p>
+			{recuitmentDate && (
+				<p>
+					We Currently are not recuiting please check back when this timer is
+					finished
+				</p>
+			)}
 			<CountDownTimer
 				dateFinished={recuitmentDate}
-				messageDisplayAfter={"Hello World"}
+				messageDisplayAfter={messageToDisplayAfter()}
 			/>
 		</div>
 	);
 };
 
+/**
+ * @param {null} null - requires nothing
+ * @returns {React.JSX.Element} page - component that is displayed after timer is finished
+ * @description shows recuitment link
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+const messageToDisplayAfter = () => {
+	return (
+		<div id="message">
+			<h3>Recuitment Form is OPEN!</h3>
+			<p>Appy using the link below</p>
+			<a
+				href="https://form.jotform.com/232026633865053"
+				target="_blank">
+				<img
+					src="https://www.jotform.com/uploads/darkicewolf50/form_files/232026633865053_1693175101_qrcode_muse.png"
+					width="100%"
+					alt="QR Code for Jotform form"
+				/>
+				<p>Apply Here!</p>
+			</a>
+		</div>
+	);
+};
+
 export default JoinTheClub;

src/Club Membership & Upcoming Events/JoinTheClub/messageToDisplayAfter.css

@@ -0,0 +1,8 @@
+#message img {
+	max-width: 200px;
+}
+
+#message a {
+	/* text-align: center; */
+	width: auto;
+}

src/CountDown/CountDownTimer.css

@@ -0,0 +1,50 @@
+#afterTime {
+	color: red;
+}
+
+#counter {
+	display: flex;
+	flex-direction: row;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	padding-top: 0.5rem;
+	text-align: center;
+	background-color: grey;
+}
+
+#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: 0.25rem;
+	text-decoration: none;
+	color: #000;
+}
+
+#counter .countdown {
+	line-height: 1.25rem;
+	padding: 0 0.75rem 0 0.75rem;
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+}
+
+#counter .countdownDanger {
+	color: #ff0000;
+}
+
+#counter .countdown p {
+	margin: 0;
+}
+
+#counter .countdown span {
+	text-transform: uppercase;
+	font-size: 0.75rem;
+	line-height: 1rem;
+}

src/CountDown/CountDownTimer.js

@@ -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>
-		);
-	} else {
-		return (
+			<div id="afterTime">
 				<ShowCounter
 					days={days}
 					hours={hours}
 					minutes={minutes}
 					seconds={seconds}
 				/>
+				{messageDisplayAfter}
+			</div>
+		);
+	} else {
+		return (
+			<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>