diff --git a/app/checkButton.js b/app/checkButton.js new file mode 100644 index 0000000..2e8c550 --- /dev/null +++ b/app/checkButton.js @@ -0,0 +1,30 @@ +"use client"; +import React, { useState } from 'react'; + +export default function CheckboxButton({ label }) { + const [isChecked, setIsChecked] = useState(false); + + const toggleCheckbox = () => { + setIsChecked(!isChecked); + }; + + 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..8d4066f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,113 +1,128 @@ 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 [selectedCourses, setSelectedCourses] = useState([]); + + + + const toggleCheckbox = () => { + setIsChecked(!isChecked); + }; + + const handleSubmit = () => { + const newSelectedCourses = []; + // Loop through the checkboxes and add selected courses to the array + checkboxes.forEach((checkbox) => { + if (checkbox.isChecked) { + newSelectedCourses.push(checkbox.label); + } + }); + + setSelectedCourses(newSelectedCourses); + }; + + 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 */} +
    +

    Selected Courses

    +
      + {selectedCourses.map((course, index) => ( +
    • {course}
      • + ))} +
    +

    Count: {selectedCourses.length}

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

    - 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