Skip to content

Commit 09d7544

Browse files
JustinMouaJustinMoua
committed
Updates to comments.
1 parent 6cc2e00 commit 09d7544

File tree

17 files changed

+126
-90
lines changed

17 files changed

+126
-90
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,10 @@ This project was deployed to Github.io by going to the settings of this reposito
155155
* [Static vs Dynamic websites][Static vs Dynamic]
156156
* [How to test a local website on your phone][Testing on phone]
157157
* [What is Tailwind?][What is tailwind]
158+
* [What is a React use state (via React)?][Use states react.dev]
159+
* [What is a React use state (via Geeks4Geeks)?][Use states geeks4geeks]
160+
* [What are React components?][React components]
161+
* [What are React props?][React props]
158162

159163
[Node.js Download Link]: https://nodejs.org/en/download
160164
[Git Download Link]: https://git-scm.com/downloads
@@ -167,3 +171,7 @@ This project was deployed to Github.io by going to the settings of this reposito
167171
[Git Branching Link]: https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging
168172
[Testing on phone]: https://youtu.be/uRYHX4EwYYA?si=tfUiiabqzuqVflxs
169173
[What is tailwind]: https://tailwindcss.com/docs/styling-with-utility-classes
174+
[Use states react.dev]: https://react.dev/reference/react/useState
175+
[Use states geeks4geeks]: https://www.geeksforgeeks.org/reactjs/what-is-usestate-in-react/
176+
[React components]:https://www.geeksforgeeks.org/reactjs/reactjs-components/
177+
[React props]: https://www.w3schools.com/react/react_props.asp

‎src/app/about/page.jsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,17 @@ AUTHOR(S): Justin Moua
44
=====
55
Notes
66
=====
7-
7+
- Placeholder Text
88
=========
99
Resources
1010
=========
1111
- Placeholder Text
1212
*/
1313
import Header from "../components/Header"; // This is a custom component created located in ./components/Header.jsx. This is so we don't have to copy and paste the code for the header in every page. It is similar to creating a function that you call in your code
14-
import Footer from "../components/Footer";
14+
import Footer from "../components/Footer"; // This is another custom component.
1515

1616
// This is called from page.js from src\app.
1717
export default function About() {
18-
// Calendar link goes here. Otherwise, page displays a "under construction" if left empty.
19-
const calendarSrc = "https://outlook.office365.com/owa/calendar/[email protected]/9be922f1620d49a0a01ffdccd22b176913404027681472246621/calendar.html";
20-
// Empty example: const calendarSrc = "";
21-
2218
return (
2319
<div className="flex flex-col min-h-screen">
2420
<Header />

‎src/app/calendar/page.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ Resources
2222
- Placeholder Text
2323
*/
2424
import Header from "../components/Header"; // This is a custom component created located in ./components/Header.jsx. This is so we don't have to copy and paste the code for the header in every page. It is similar to creating a function that you call in your code
25-
import Footer from "../components/Footer";
26-
import UnderConstruction from "../components/UnderConstruction";
25+
import Footer from "../components/Footer"; // This is another custom component.
26+
import UnderConstruction from "../components/UnderConstruction"; // This is another custom component used when a page is under construction. It is located in ./components/UnderConstruction.jsx. This is so we don't have to copy and paste the code for the under construction page in every page.
27+
2728
// This is called from page.js from src\app.
2829
export default function Calendar() {
2930
// Calendar link goes here. Otherwise, page displays a "under construction" if left empty.
3031
const calendarSrc = "";
31-
// Empty example: const calendarSrc = "";
3232

3333
return (
3434
<div className="flex flex-col min-h-screen">
@@ -41,10 +41,12 @@ export default function Calendar() {
4141
{/* Use an iframe to show the shared calendar. If no link, show under construction message. */}
4242

4343
{/*
44-
============
45-
REPLACE ME!!
46-
============
47-
THIS CODE HAS BEEN COMMENTED OUT BECAUSE IT IS CURRENTLY LINKED TO JUSTIN'S OUTLOOK CALENDAR. - Justin Moua (7/7/2025)
44+
==========
45+
RIMPORTANT
46+
==========
47+
CODE BELOW HAS BEEN COMMENTED OUT BECAUSE IT IS CURRENTLY LINKED TO JUSTIN'S OUTLOOK CALENDAR.
48+
PLEASE LINK IT TO THE ACM EVENTS CALENDAR. A CALENDAR MAY NEED TO BE CREATED IF IT DOES NOT EXIST YET.
49+
FEEL FREE TO REVAMP THIS PAGE IF NEEDED. - Justin Moua (7/7/2025)
4850
*/}
4951
{/*calendarSrc ? (
5052
<iframe

‎src/app/components/Accordion.jsx‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,47 +11,52 @@ Notes
1111
=========
1212
Resources
1313
=========
14-
14+
- Placeholder Text
1515
*/
1616
'use client';
1717
import React, {useState} from 'react';
1818
export default function Accordion({title, answer}) {
19+
// This is called a "use state" that controls the accordion open/close state.
20+
// Refer to https://www.geeksforgeeks.org/reactjs/what-is-usestate-in-react/ for more information on use states.
1921
const [accordionOpen, setAccordionOpen] = useState(false);
2022

2123
return (
2224
<>
2325
<div className="py-2">
2426
<button onClick={() => setAccordionOpen(!accordionOpen)} className="flex justify-between w-full">
27+
28+
{/* Renders the title/question of the accordion. */}
2529
<span className="flex-1 text-left text-md sm:text-xl">{title}</span>
26-
{/* {accordionOpen ? <span>-</span> : <span>+</span>} */}
27-
30+
{/* Renders the + and - icon on the far-right of the accordion when opening and closing it. */}
2831
<svg
2932
className="fill-indigo-500 shrink-0 ml-8"
3033
width="16"
3134
height="16"
3235
xmlns="http://www.w3.org/2000/svg"
3336
>
34-
<rect
35-
y="7"
36-
width="16"
37-
height="2"
38-
rx="1"
39-
className={`transform origin-center transition duration-200 ease-out ${
40-
accordionOpen && "!rotate-180"
41-
}`}
42-
/>
43-
<rect
44-
y="7"
45-
width="16"
46-
height="2"
47-
rx="1"
48-
className={`transform origin-center rotate-90 transition duration-200 ease-out ${
49-
accordionOpen && "!rotate-180"
50-
}`}
51-
/>
37+
<rect
38+
y="7"
39+
width="16"
40+
height="2"
41+
rx="1"
42+
className={`transform origin-center transition duration-200 ease-out ${
43+
accordionOpen && "!rotate-180"
44+
}`}
45+
/>
46+
<rect
47+
y="7"
48+
width="16"
49+
height="2"
50+
rx="1"
51+
className={`transform origin-center rotate-90 transition duration-200 ease-out ${
52+
accordionOpen && "!rotate-180"
53+
}`}
54+
/>
5255
</svg>
5356

5457
</button>
58+
59+
{/* This is the answer that is shown when the accordion is open. */}
5560
<div className={`grid overflow-hidden transition-all duration-300 ease-in-out text-slate-600 text-sm md:text-lg ${accordionOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}>
5661
<div className="overflow-hidden">
5762
{answer}

‎src/app/components/Footer.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ AUTHOR(S): Justin Moua
44
=====
55
Notes
66
=====
7-
7+
- Placeholder text
88
=========
99
Resources
1010
=========
11-
11+
- Placeholder text
1212
*/
1313
import Image from "next/image";
1414

‎src/app/components/Header.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ AUTHOR(S): Justin Moua
44
=====
55
Notes
66
=====
7-
7+
- Placeholder text
88
=========
99
Resources
1010
=========
11-
11+
- Placeholder text
1212
*/
1313
"use client";
14-
15-
import { useState } from "react";
14+
import { useState } from "react"; // Refer to https://www.geeksforgeeks.org/reactjs/what-is-usestate-in-react/ for more information on use states.
1615

1716
export default function Header() {
17+
// This is called a "use state" that controls the accordion open/close state.
1818
const [menuOpen, setMenuOpen] = useState(false);
1919

2020
return (
@@ -60,6 +60,7 @@ export default function Header() {
6060
ACM@OkState {/* This is also clickable. It takes the user home. */}
6161
</a>
6262
</div>
63+
6364
{/* Hamburger dropdown menu*/}
6465
<div>
6566
<button
@@ -74,6 +75,7 @@ export default function Header() {
7475
</button>
7576
</div>
7677
</div>
78+
7779
{/* Dropdown Menu */}
7880
<div className="text-stone-700">
7981
<nav

‎src/app/components/OfficerCard.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,23 @@ AUTHOR(S): Justin Moua
44
=====
55
Notes
66
=====
7+
- This component is used to create an officer card that can be used in the Officers page.
8+
It displays the officer's name, title, headshot, and social media links.
9+
Code has been created to account for parameters that are not passed.
10+
You'll want to call this component in the Officers page and pass the parameters to it.
711
812
=========
913
Resources
1014
=========
11-
15+
- Placeholder text
1216
*/
1317
import Image from "next/image";
1418

1519
export default function OfficerCard({ officer_title, officer_name, officer_headshot, officer_linkedin, officer_email, officer_github, officer_website}) {
1620
return (
17-
// for centering
21+
// Centers the officer card and makes it a flex column
1822
<div className="flex flex-col items-center justify-center ">
23+
1924
{/* Officer's Title */}
2025
<div className="text-center">
2126
{officer_title}
@@ -25,10 +30,14 @@ export default function OfficerCard({ officer_title, officer_name, officer_heads
2530
<br />
2631
<br />
2732

33+
{/* Officer's Headshot */}
2834
<div className="relative w-28 h-28 sm:w-36 sm:h-36 md:w-44 md:h-44">
2935
{/* rotates the shape and adds orange glow */}
3036
<div className="absolute inset-0 rotate-45 rounded-[20%] overflow-hidden shadow-[0_0_20px_8px_rgba(255,165,0,0.6)] bg-white">
31-
{/* Rotates image (since the shape -45deg was rotated 45deg) and zooms in on image*/}
37+
{/*
38+
Rotates image (since the shape -45deg was rotated 45deg) and zooms in on image
39+
Officer's headshot gets passed here. If none is provided, it defaults to a silhouette image.
40+
*/}
3241
<Image
3342
src={officer_headshot || "/images/officers/silhouette.png"}
3443
alt="Next.js logo"

‎src/app/components/README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ Header
1414
* Header()
1515
* This component renders the header for the website. You usually will want to call this on every page that is created.
1616

17-
OfficerCard
17+
OfficerCard()
1818
* OfficerCard({ officer_title, officer_name, officer_headshot, officer_linkedin, officer_email, officer_github, officer_website})
19-
* This component takes in multiple values such as an officer's title (President, Vice President, etc.), full name, a filepath to their headshot, linked.in, email, github, and website. This is used to render officer's information in the officers page. Note that this component has been designed to handle missing parameters. For example, if an image is not passed through then a silhouette of a person is used as the officer's headshot. If the officer does not provide any social media handles, email, or website, then those hyperlinks do not appear for the officer.
19+
* This component takes in multiple values such as an officer's title (President, Vice President, etc.), full name, a filepath to their headshot, linked.in, email, github, and website. This is used to render officer's information in the officers page. Note that this component has been designed to handle missing parameters. For example, if an image is not passed through then a silhouette of a person is used as the officer's headshot. If the officer does not provide any social media handles, email, or website, then those hyperlinks do not appear for the officer.
20+
21+
UnderConstruction()
22+
* UnderConstruction({extraText})
23+
* This component takes in one value (extraText). When using this component, it will always state "This page is under construction. Please check back later or contact [email protected]." extraText is then added to it if provided. For example, you may be working on the "About" page and want to let the users know that they can learn more about us by clicking a hyperlink that directs them to our social media accounts (such as via linktr.ee).

‎src/app/components/UnderConstruction.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ AUTHOR(S): Justin Moua
44
=====
55
Notes
66
=====
7+
- This component is used to display a message indicating that the page is under construction.
8+
It can also display additional text if provided through the `extraText` prop.
79
810
=========
911
Resources

‎src/app/faq/page.jsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,49 @@
11
/*
22
AUTHOR(S): Justin Moua
33
4+
=========
5+
IMPORTANT
6+
=========
7+
- The Accordion component is used to display questiona and its answers.
8+
It takes in a title and an answer as props. (Think of it as a function that takes in parameters.)
9+
410
=====
511
Notes
612
=====
713
- This page conists of frequently asked questions (FAQ) about the ACM chapter at Oklahoma State University.
814
It uses the following YouTube tutorial as a reference for creating the Accordion component.
915
- https://youtu.be/oOXExNA8A48?si=N6MM4L4VjxiIC2sE
16+
17+
1018
=========
1119
Resources
1220
=========
1321
- Placeholder Text
1422
*/
15-
import Header from "../components/Header";
16-
import Footer from "../components/Footer";
17-
import Accordion from "../components/Accordion";
18-
23+
import Header from "../components/Header"; // This is a custom reusable component located in ./components/Header.jsx.
24+
import Footer from "../components/Footer"; // This is a custom reusable component.
25+
import Accordion from "../components/Accordion"; // This is a custom reusable component.
1926

27+
// This is called from page.js from src\app.
2028
export default function Faq() {
21-
2229
return (
2330
<div className="flex flex-col min-h-screen">
2431
<Header />
2532
<div className="w-full text-center text-5xl text-black py-9">
2633
Frequently Asked Questions
2734
</div>
2835
<main className="flex flex-col text-black justify-center flex-1 p-8">
29-
{/* <div className="flex justify-center items-center grid grid-cols-1 border border-black">
30-
</div> */}
31-
36+
{/* This is what renders the interactable FAQ. Particularly, the Accordion is what does so. */}
3237
<div className="p-4 bg-gray-200 rounded-lg shadow-lg">
38+
{/* This Accordion component is an example of how you can include a hyperlink in the answer. */}
3339
<Accordion
3440
title='How do I contact the ACM chapter at Oklahoma State University?'
3541
answer={
3642
<>
43+
{/* This is plain text */}
3744
You can contact us at {' '}
45+
46+
{/* This is a hyperlink that is in the answer */}
3847
<a
3948
href="mailto:[email protected]"
4049
target="_blank"
@@ -43,7 +52,11 @@ export default function Faq() {
4352
>
4453
[email protected]
4554
</a>
55+
56+
{/* This is plain text */}
4657
{' '} or through our Discord server that can be found on our {''}
58+
59+
{/* This is a hyperlink that is in the answer */}
4760
<a
4861
href="https://linktr.ee/okstate.acm"
4962
target="_blank"
@@ -55,10 +68,13 @@ export default function Faq() {
5568
</>
5669
}
5770
/>
71+
5872
<Accordion
5973
title='Do I need to be a Computer Science major to join and participate in events?'
6074
answer='No. Although our participants primarily consist of Computer Science majors, any major is welcome!'
6175
/>
76+
77+
{/* This Accordion component is an example of how you can include a hyperlink in the answer. */}
6278
<Accordion
6379
title="How can I join, participate, or stay updated on ACM events?"
6480
answer={

0 commit comments

Comments
 (0)