Task L: schedule pop-up

src/components/Modal.css

@@ -0,0 +1,24 @@
+.modal {
+    display: block;
+    visibility: hidden;
+}
+
+.modal-show {
+    visibility:visible;
+    background-color: rgba(169, 169, 169, 0.8);
+    transition: opacity 0.2s linear; 
+} 
+
+.modal-content  {
+    opacity: 0; 
+}
+
+.modal-show .modal-content  {
+    opacity: 1; 
+    transition: 0.2s linear; 
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+}

src/components/Modal.jsx

@@ -0,0 +1,42 @@
+import './Modal.css';
+
+const Modal = ({ CoursePlan, open, close }) => (
+    <div
+        className={`modal ${open ? 'modal-show' : 'modal'}`}
+        tabIndex="-1"
+        role="dialog"
+        onClick={(evt) => { if (evt.target === evt.currentTarget) close(); }}
+    >
+        <div className="modal-dialog" role="document">
+        <div className="modal-content">
+            <div className="modal-header">
+                <h5 className="modal-title">Course Plan</h5>
+                <button type="button" className="btn-close" aria-label="Close"
+                    onClick={close}
+                />
+            </div>
+            <div className="modal-body">
+                {CoursePlan.length === 0 ? (
+                <p>
+                    No courses selected.
+                    <br/>
+                    Please select courses by clicking on the cards.
+                </p>
+                ) : (
+                <ul>
+                    {CoursePlan.map((course) => (
+                    <li key={course.number}>
+                        <strong>{course.term} CS {course.number}: {course.title}</strong>
+                        <br/>
+                        {course.meets}
+                    </li>
+                    ))}
+                </ul>
+                )}
+            </div>
+        </div>
+        </div>
+    </div>
+    );
+
+export default Modal;

src/components/TermPage.jsx

@@ -1,18 +1,32 @@
 import React, { useState } from 'react';
 import TermSelector from './TermSelector';
 import CourseList from './CourseList';
+import Modal from './Modal';
 
 const TermPage = ({ courses }) => {
     const [selectedTerm, setSelectedTerm] = useState("Fall"); // Default to "Fall"
     const [selectedCourse, setSelectedCourse] = useState([]);
+
+    // Modal state and functions
+    const [open, setOpen] = useState(false);
+    const openModal = () => setOpen(true);
+    const closeModal = () => setOpen(false);
+
     const toggleSelectedCourse = (item) => setSelectedCourse(
         selectedCourse.includes(item)
         ? selectedCourse.filter(x => x !== item)
         : [...selectedCourse, item]
     );// store selected items in selected array
+
+    const CoursePlan = selectedCourse.map(key => courses[key]);
+
     return (
         <div>
-            <TermSelector selectedTerm={selectedTerm} setSelectedTerm={setSelectedTerm} />
+            <div className="d-flex">
+                <TermSelector selectedTerm={selectedTerm} setSelectedTerm={setSelectedTerm} />
+                <button className="ms-auto btn btn-outline-dark" onClick={openModal}>Course Plan</button>
+            </div>
+            <Modal CoursePlan={CoursePlan} open={open} close={closeModal}></Modal>
             <CourseList courses={courses} selectedTerm={selectedTerm} selectedCourse={selectedCourse} toggleSelectedCourse={toggleSelectedCourse} />
         </div>
     );