diff --git a/app/checkButton.js b/app/checkButton.js new file mode 100644 index 0000000..92d3901 --- /dev/null +++ b/app/checkButton.js @@ -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 ( +
  • + +
    • + ); +} diff --git a/app/globals.css b/app/globals.css index fd81e88..4077a51 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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( diff --git a/app/page.tsx b/app/page.tsx index 7a8286b..b9f901f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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 ( -
    -
    -

    - Get started by editing  - app/page.tsx -

    -
    - - By{' '} - Vercel Logo - -
    +
    +
    +

    + Pomona Computer Science Major Tracker +

    -
    - Next.js Logo -
    +
    +
    +
    + {/* column 1 */} +
    +

    Pomona Computer Science Major Requirements

    + + {/* Section 1: 2-3 intro courses */} +
    +

    Intro Courses

    +
      + + + +
    +
    + + + + {/* Section 2: 1 math course */} +
    +

    Math Course

    +
      + + + +
    +
    + + {/* Section 3: 3 core courses */} +
    +

    Core Courses

    +
      + + + + +
    +
    + + {/* Section 4: 3 elective courses */} +
    +

    3 Elective Courses

    +
      + + + + + + + + + + + + + + + +
    +
    + + {/* */} + + {/* new section with progress */} +
    +

    Completed Courses:

    +
      + {selectedItems.map((item, index) => { + if (IntroList.includes(item)) { + return ( + +

      Intro Courses

      +
    • {item}
      • +       + ); + } else if (mathList.includes(item)) { + return ( + +

      Math Courses

      +
    • {item}
      • +       + ); + } else if (coreList.includes(item)) { + return ( + +

      Core Courses

      +
    • {item}
      • +       + ); + } else if (electiveList.includes(item)) { + return ( + +

      Elective Courses

      +
    • {item}
      • +       + ); + } + + + + + else { + return
    • {item}
      • ; + } + })} +
    +
    + + +

    Count: {selectedItemCount}

    + + + +
    +
    +
    + + + + -
    - -

    - Docs{' '} - - -> - -

    -

    - Find in-depth information about Next.js features and API. -

    -     - - -

    - Learn{' '} - - -> - -

    -

    - Learn about Next.js in an interactive course with quizzes! -

    -     - - -

    - Templates{' '} - - -> - -

    -

    - Explore the Next.js 13 playground. -

    -     - - -

    - Deploy{' '} - - -> - -

    -

    - Instantly deploy your Next.js site to a shareable URL with Vercel. -

    -
    +
    ) -} +} \ No newline at end of file