Task K: Course Selector

src/components/CourseList.css

@@ -1,27 +1,34 @@
 .course-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, 14rem);
-    gap: 1rem; /* Adds some space between the cards */
+    gap: 1rem;
 }
 
 .card {
     display: flex;
     flex-direction: column;
-    height: 100%; /* Ensures consistent card height */
-    padding: 1rem;
-    box-sizing: border-box; /* Includes padding in height calculation */
+    height: 100%;
+    padding: 0; /* Remove internal padding if necessary */
+    box-sizing: border-box;
+    border: 1px solid #ddd; /* Set a border to make unselected cards visible */
+    transition: background-color 0.3s; /* Smooth transition for color change */
+}
+
+.card.selected {
+    background-color: rgb(64, 165, 241);
+    color: rgb(255, 255, 255);
+    border: 1px solid rgb(64, 165, 241); /* Match border color with background */
 }
 
 .card-body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     flex-grow: 1;
-    height: 100%; /* Ensures the card body takes full height of the card */
 }
 
 .course-info-divider {
     display: flex;
     flex-direction: column;
-    margin-top: auto; /* Pushes this section to the bottom of the card-body */
+    margin-top: auto;
 }

src/components/CourseList.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import './CourseList.css';
 
-const CourseList = ({ courses, selectedTerm }) => {
-    const filteredCourses = Object.values(courses).filter(
-        (course) => course.term === selectedTerm
-    );
+const CourseList = ({ courses, selectedTerm, selectedCourse, toggleSelectedCourse}) => {
+    const filteredCourses = Object.entries(courses).filter(([key, course]) => course.term === selectedTerm);
+
     return(
         <div className='course-list'>
-        {filteredCourses.map((course) => (
-            <div key={`${course.term}-${course.number}`} className="card m-1 p-2">
+        {filteredCourses.map(([key, course]) => (
+            <div 
+                key={key} 
+                className={`card m-1 p-2" ${selectedCourse.includes(key) ? 'selected' : ''}`}
+                onClick={() => toggleSelectedCourse(key)}
+            >
                 <div className="card-body">
                     <h5 className="card-title">{course.term} CS {course.number}</h5>
                     <p className="card-text">{course.title}</p>

src/components/TermPage.jsx

@@ -3,14 +3,19 @@ import TermSelector from './TermSelector';
 import CourseList from './CourseList';
 
 const TermPage = ({ courses }) => {
-  const [selectedTerm, setSelectedTerm] = useState("Fall"); // Default to "Fall"
-
-return (
-    <div>
-        <TermSelector selectedTerm={selectedTerm} setSelectedTerm={setSelectedTerm} />
-        <CourseList courses={courses} selectedTerm={selectedTerm} />
-    </div>
-);
+    const [selectedTerm, setSelectedTerm] = useState("Fall"); // Default to "Fall"
+    const [selectedCourse, setSelectedCourse] = useState([]);
+    const toggleSelectedCourse = (item) => setSelectedCourse(
+        selectedCourse.includes(item)
+        ? selectedCourse.filter(x => x !== item)
+        : [...selectedCourse, item]
+    );// store selected items in selected array
+    return (
+        <div>
+            <TermSelector selectedTerm={selectedTerm} setSelectedTerm={setSelectedTerm} />
+            <CourseList courses={courses} selectedTerm={selectedTerm} selectedCourse={selectedCourse} toggleSelectedCourse={toggleSelectedCourse} />
+        </div>
+    );
 };
 
 export default TermPage;