From 3526148f6394bca24a88dfe6abfd11f60d3f5117 Mon Sep 17 00:00:00 2001 From: keneth310 Date: Wed, 16 Aug 2023 06:20:59 -0600 Subject: [PATCH 1/8] created two columns. first one is requirements --- app/page.tsx | 195 +++++++++++++++++++++++++-------------------------- 1 file changed, 95 insertions(+), 100 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 7a8286b..cf2b153 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,112 +2,107 @@ import Image from 'next/image' export default function Home() { return ( -
-
-

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

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

+ Welcome to the Computer Science Major Tracker! +

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

Pomona Computer Science Major Requirements

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

Intro Courses

+
    +
  • CSCI 51 (optional)
    • +
  • CSCI 54
    • +
  • CSCI 62
    • +
+
+ + {/* Section 2: 3 core courses */} +
+

3 Core Courses

+
    +
  • CSCI 101
    • +
  • CSCI 105
    • +
  • CSCI 140
    • +
+
+ + {/* Section 3: 1 math course */} +
+

1 Math Course

+
    +
  • MATH 58
    • +
  • MATH 60
    • +
+
+ + {/* Section 4: 3 elective courses */} +
+

3 Elective Courses

+
    +
  • Elective Course 1
    • +
  • Elective Course 2
    • +
  • Elective Course 3
    • +
  • List of elective courses goes on ...
    • +
+
+
+
+
+ +
+
+ {/* Column 2 */} +
+ + {/* ...more content */} +
+
+
+ - + + + {/*
+
    +
  • Answer school-related questions for educators 24/7
    • +
  • Give suggestions for school-based work and idea generation
    • +
+
*/} +
) -} +} \ No newline at end of file From aa91bc83cc7ef6e125143f1d8745401a1f34b172 Mon Sep 17 00:00:00 2001 From: keneth310 Date: Wed, 16 Aug 2023 14:09:40 -0600 Subject: [PATCH 2/8] made the background white --- app/globals.css | 10 +++-- app/page.tsx | 116 ++++++++++++++++++++++++++++++++---------------- 2 files changed, 84 insertions(+), 42 deletions(-) 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 cf2b153..57b3766 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,10 +2,10 @@ import Image from 'next/image' export default function Home() { return ( -
+

- Welcome to the Computer Science Major Tracker! + Computer Science Major Tracker

@@ -16,6 +16,80 @@ export default function Home() {

Pomona Computer Science Major Requirements

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

Intro Courses

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

Core Courses

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + {/* Section 3: 1 math course */} +
+

1 Math Course

+
    +
  • MATH 58
    • +
  • MATH 60
    • +
+
+ + {/* Section 4: 3 elective courses */} +
+

3 Elective Courses

+
    +
  • Elective Course 1
    • +
  • Elective Course 2
    • +
  • Elective Course 3
    • +
  • List of elective courses goes on ...
    • +
+
+
+
+ + +
+
+ {/* column 2 */} +
+

Your Progres

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

Intro Courses

@@ -58,50 +132,14 @@ export default function Home() {
+ -
-
- {/* Column 2 */} -
- - {/* ...more content */} -
-
-
- - - {/*
-
    -
  • Answer school-related questions for educators 24/7
    • -
  • Give suggestions for school-based work and idea generation
    • -
-
*/}
) From d1d70aae2680d03b54af8c35492ae24259bf869c Mon Sep 17 00:00:00 2001 From: keneth310 Date: Wed, 16 Aug 2023 14:15:57 -0600 Subject: [PATCH 3/8] test1 --- app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index 57b3766..64ccf10 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,7 +2,7 @@ import Image from 'next/image' export default function Home() { return ( -
+

Computer Science Major Tracker From 0ebac1196ecb9596e81e46da92ef835cb098f814 Mon Sep 17 00:00:00 2001 From: keneth310 Date: Wed, 16 Aug 2023 15:20:48 -0600 Subject: [PATCH 4/8] added check box function for one option --- app/checkButton.js | 30 +++++++++++++++++ app/page.tsx | 81 +++++++++++++++------------------------------- 2 files changed, 56 insertions(+), 55 deletions(-) create mode 100644 app/checkButton.js diff --git a/app/checkButton.js b/app/checkButton.js new file mode 100644 index 0000000..98b0f31 --- /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/page.tsx b/app/page.tsx index 64ccf10..fa74ba2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,15 @@ import Image from 'next/image' +"use client"; +import React, { useState } from 'react'; + export default function Home() { + const [isChecked, setIsChecked] = useState(false); + + const toggleCheckbox = () => { + setIsChecked(!isChecked); + }; + return (
    @@ -11,7 +20,7 @@ export default function Home() {
    -
    +
    {/* column 1 */}

    Pomona Computer Science Major Requirements

    @@ -20,11 +29,24 @@ export default function Home() {

    Intro Courses

      -
    • -
    • +
      • +
    -
    -
    - {/* column 2 */} -
    -

    Your Progres

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

    Intro Courses

    -
      -
    • CSCI 51 (optional)
      • -
    • CSCI 54
      • -
    • CSCI 62
      • -
    -
    - - {/* Section 2: 3 core courses */} -
    -

    3 Core Courses

    -
      -
    • CSCI 101
      • -
    • CSCI 105
      • -
    • CSCI 140
      • -
    -
    - - {/* Section 3: 1 math course */} -
    -

    1 Math Course

    -
      -
    • MATH 58
      • -
    • MATH 60
      • -
    -
    - - {/* Section 4: 3 elective courses */} -
    -

    3 Elective Courses

    -
      -
    • Elective Course 1
      • -
    • Elective Course 2
      • -
    • Elective Course 3
      • -
    • List of elective courses goes on ...
      • -
    -
    -
    -
    -
    - - - From 499fe845b102be9b3e85056d08561ece74746482 Mon Sep 17 00:00:00 2001 From: keneth310 Date: Wed, 16 Aug 2023 16:26:23 -0600 Subject: [PATCH 5/8] Implemented first rough draft of landing page --- app/checkButton.js | 6 +-- app/page.tsx | 100 ++++++++++++++++++--------------------------- 2 files changed, 42 insertions(+), 64 deletions(-) diff --git a/app/checkButton.js b/app/checkButton.js index 98b0f31..2e8c550 100644 --- a/app/checkButton.js +++ b/app/checkButton.js @@ -9,11 +9,11 @@ export default function CheckboxButton({ label }) { }; return ( -
  • +

    • -
    +
    {/* column 1 */} @@ -38,7 +54,7 @@ export default function Home() { - {/* Section 3: 1 math course */} + {/* Section 2: 1 math course */}

    Math Course

      @@ -48,7 +64,7 @@ export default function Home() {
    - {/* Section 2: 3 core courses */} + {/* Section 3: 3 core courses */}

    Core Courses

      @@ -68,7 +84,7 @@ export default function Home() { - + @@ -80,6 +96,23 @@ export default function Home() {
    + + + + {/* new section with progress */} +
    +

    Selected Courses

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

    Count: {selectedCourses.length}

    +
    + +
    From a198442ce539723382822f78a459682b13f0f5e9 Mon Sep 17 00:00:00 2001 From: keneth310 Date: Thu, 17 Aug 2023 00:39:00 -0600 Subject: [PATCH 7/8] Made the array and count work when selecting items --- app/checkButton.js | 27 ++++++++++--- app/page.tsx | 98 +++++++++++++++++++++++++++------------------- 2 files changed, 78 insertions(+), 47 deletions(-) diff --git a/app/checkButton.js b/app/checkButton.js index 2e8c550..92d3901 100644 --- a/app/checkButton.js +++ b/app/checkButton.js @@ -1,22 +1,37 @@ "use client"; -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; -export default function CheckboxButton({ label }) { +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 = () => { - setIsChecked(!isChecked); + 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 (
    • From f160456cfe9733e161fa1ab2ef40772a76c51bfd Mon Sep 17 00:00:00 2001 From: keneth310 Date: Thu, 17 Aug 2023 00:59:31 -0600 Subject: [PATCH 8/8] categorizes taken courses. --- app/page.tsx | 85 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 81 insertions(+), 4 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 3b9d0e2..b9f901f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,6 +8,47 @@ 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 = () => { @@ -117,14 +158,50 @@ export default function Home() { {/* new section with progress */}
    -

    Selected Items

    +

    Completed Courses:

      - {selectedItems.map((item, index) => ( -
    • {item}
      • - ))} + {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}