Skip to content

Keneth/adding-submit-button #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
keneth310 wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Keneth/adding-submit-button #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3526148
created two columns. first one is requirements
keneth310 Aug 16, 2023
aa91bc8
made the background white
keneth310 Aug 16, 2023
d1d70aa
test1
keneth310 Aug 16, 2023
0ebac11
added check box function for one option
keneth310 Aug 16, 2023
499fe84
Implemented first rough draft of landing page
keneth310 Aug 16, 2023
55ce851
Added a submit button as a draft
keneth310 Aug 17, 2023
a198442
Made the array and count work when selecting items
keneth310 Aug 17, 2023
f160456
categorizes taken courses.
keneth310 Aug 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions app/checkButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
"use client";
import React, { useState, useEffect } from 'react';

export default function CheckboxButton({ label, selectedItems, setSelectedItems }) {
const [isChecked, setIsChecked] = useState(false);

useEffect(() => {
// When the selectedItems array changes, update the isChecked state accordingly
setIsChecked(selectedItems.includes(label));
}, [selectedItems, label]);

const toggleCheckbox = () => {
const newSelectedItems = [...selectedItems];
// add it to the general array:
if (isChecked) {
const index = newSelectedItems.indexOf(label);
if (index !== -1) {
newSelectedItems.splice(index, 1);
}
} else {
newSelectedItems.push(label);
}
setSelectedItems(newSelectedItems);
};

return (
<li className="border border-black mb-2">
<label
className={`block cursor-pointer p-2 border border-black ${
isChecked
? 'bg-[#5DF91482]'
: 'bg-white hover:bg-gray-100'
}`}
>
<input
className="hidden"
type="checkbox"
checked={isChecked}
onChange={toggleCheckbox}
/>{' '}
{label}
</label>
</li>
);
}
10 changes: 7 additions & 3 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,22 @@

:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}

html {
background-color: white
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
Expand Down
314 changes: 211 additions & 103 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,221 @@
import Image from 'next/image'
"use client";
import React, { useState } from 'react';
import CheckboxButton from './checkButton';


export default function Home() {
const [isChecked, setIsChecked] = useState(false);
const [selectedItems, setSelectedItems] = useState([]);
const selectedItemCount = selectedItems.length;
const IntroList = [
"CSCI51: Intro to CS",
"CSCI54: Discrete Math and Functional Programming",
"CSCI62: Data Structures and Advanced Programming"
];
const mathList = [
"MATH58: Intro to Statistics",
"MATH60: Linear Algebra"
];
const coreList = [
"CSCI101: Intro to Languages and Theory of Computation",
"CSCI105: Computer Systems",
"CSCI140: Algorithms"
];
const electiveList = [
"CSCI124: User Interfaces and User Experience",
"CSCI131: Programming Languages",
"CSCI133: Database Systems",
"CSCI134: Operating Systems Principles",
"CSCI143: Applied Algorithms",
"CSCI151: Artificial Intelligence",
"CSCI152: Neural Networks",
"CSCI158: Machine Learning",
"CSCI159: Natural Language Processing",
"CSCI181G: Real-Time Graphics and Game Engine Programming",
"CSCI181N: Advanced Functional Programming",
"CSCI181OR: Computer Organization and Design",
"CSCI181Q: Graph Algorithm and Application",
"CSCI181S: System Security",
"CSCI181SL: Managing Complex Systems Lab",
"CSCI181VL: Principles of Programming Languages: Object-Oriented",
"CSCI181W: Usable Security and Privacy",
"CSCI188L: Computer Science Colloquium",
"CSCI190: Computer Science Senior Seminar",
"CSCI191: Senior Research/Thesis",
"CSCI192: Senior Project",
"CSCI199DR: Computer Science: Directed Readings",
"CSCI199IR: Computer Science: Independent Research",
"CSCI199RA: Computer Science: Research Assistantship"
];



const toggleCheckbox = () => {
setIsChecked(!isChecked);
};

// const handleSubmit = () => {

// };


return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">app/page.tsx</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
<main className="flex flex-col justify-between bg-white font-mono">
<div className="relative w-full flex justify-center mb-4">
<h2 className="text-xl font-semibold mt-10 flex items-center justify-center">
Pomona Computer Science Major Tracker
</h2>
</div>

<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
<div className="flex flex-row space-x-4 mb-10">
<div className="flex-1 flex items-center justify-center">
<div className="ml-4 mr-4 p-2 bg-transparent my-4 border border-black h-full w-[700px] flex items-center justify-center">
{/* column 1 */}
<div className="flex flex-col space-y-2">
<h2 className='font-bold'>Pomona Computer Science Major Requirements</h2>

{/* Section 1: 2-3 intro courses */}
<div>
<h3 className="font-semibold">Intro Courses</h3>
<ul className="pl-6">
<CheckboxButton label="CSCI51: Intro to CS" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI54: Discrete Math and Functional Programming" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI62: Data Structures and Advanced Programming" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
</ul>
</div>



{/* Section 2: 1 math course */}
<div>
<h3 className="font-semibold">Math Course</h3>
<ul className="list-none pl-6">
<CheckboxButton label="MATH58: Intro to Statistics" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="MATH60: Linear Algebra" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>

</ul>
</div>

{/* Section 3: 3 core courses */}
<div>
<h3 className="font-semibold">Core Courses</h3>
<ul className="list-none pl-6">
<CheckboxButton label="CSCI101: Intro to Languages and Theory of Computation" selectedItems={selectedItems}
setSelectedItems={setSelectedItems} />
<CheckboxButton label="CSCI105: Computer Systems" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI140: Algorithms" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>

</ul>
</div>

{/* Section 4: 3 elective courses */}
<div>
<h3 className="font-semibold">3 Elective Courses</h3>
<ul className="list-none pl-6">
<CheckboxButton label="CSCI124: User Interfaces and User Experience" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI131: Programming Languages" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI133: Database Systems" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI134: Operating Systems Principles" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI143: Applied Algorithms" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI151: Artificial Intelligence" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI152: Neural Networks" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI158: Machine Learning" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI159: Natural Language Processing" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI181G: Real-Time Graphics and Game Engine Programming" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI181N: Advanced Functional Programming" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI181OR: Computer Organization and Design" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI181Q: Graph Algorithm and Application" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>
<CheckboxButton label="CSCI181S: System Security" selectedItems={selectedItems}
setSelectedItems={setSelectedItems}/>

</ul>
</div>

{/* <button className="bg-blue-500 text-white px-4 py-2 rounded-lg mt-4" onClick={handleSubmit}>
Submit
</button> */}

{/* new section with progress */}
<div className="mt-6">
<h3 className="font-semibold">Completed Courses:</h3>
<ul className="list-none pl-6">
{selectedItems.map((item, index) => {
if (IntroList.includes(item)) {
return (
<React.Fragment key={index}>
<h3 className="font-semibold">Intro Courses</h3>
<li>{item}</li>
</React.Fragment>
);
} else if (mathList.includes(item)) {
return (
<React.Fragment key={index}>
<h3 className="font-semibold">Math Courses</h3>
<li>{item}</li>
</React.Fragment>
);
} else if (coreList.includes(item)) {
return (
<React.Fragment key={index}>
<h3 className="font-semibold">Core Courses</h3>
<li>{item}</li>
</React.Fragment>
);
} else if (electiveList.includes(item)) {
return (
<React.Fragment key={index}>
<h3 className="font-semibold">Elective Courses</h3>
<li>{item}</li>
</React.Fragment>
);
}




else {
return <li key={index}>{item}</li>;
}
})}
</ul>
</div>


<p className="mt-2">Count: {selectedItemCount}</p>



</div>
</div>
</div>





<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore the Next.js 13 playground.
</p>
</a>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>

</main>
)
}
}