Sam & Rohan

src/flashcardapp/src/App.css

@@ -54,26 +54,4 @@
   gap: 20px;
   justify-content: flex-start; /* Align flashcards to the left */
   padding: 10px; /* Optional padding inside the container */
-}
-
-/* So back and front of the card don't offset each other*/
-.card .front,
-.card .back {
-  position: absolute; /* Stack .front and .back on top of each other */
-  width: 100%;
-  height: 100%;
-  top: 0; /* Align to the top of the card */
-  left: 0; /* Align to the left of the card */
-  backface-visibility: hidden; /* Hide the back when the front is visible */
-  display: flex; /* Align text and options */
-  justify-content: center; /* Center content horizontally */
-  align-items: center; /* Center content vertically */
-  text-align: center;
-  font-size: 18px;
-  padding: 10px;
-  box-sizing: border-box; /* Include padding in width/height */
-}
-
-.card .back {
-  transform: rotateY(180deg);
-}
+}

src/flashcardapp/src/Components/flashcard/Flashcard.module.css

@@ -98,4 +98,4 @@
   .card .back {
     transform: rotateY(180deg);
   }
-
+

src/flashcardapp/src/Views/accounts/Account.js

@@ -33,6 +33,11 @@ const BADGES = [
 ];
 
 export default function ProfilePage() {
+    const [setName, setSetName] = useState('');
+    const [setDescription, setSetDescription] = useState('');
+    const [selectedCourse, setSelectedCourse] = useState('');
+    const [flashcards, setFlashcards] = useState([{ question: '', answer: '' }]);
+    const [showCreateSetModal, setShowCreateSetModal] = useState(false);
     const [activeSection, setActiveSection] = useState("profile");
     const [showModal, setShowModal] = useState(false);
     const [username, setUsername] = useState(""); // State for username input
@@ -58,6 +63,16 @@ export default function ProfilePage() {
         }
     };
 
+    const handleAddFlashcard = () => {
+        setFlashcards([...flashcards, { question: '', answer: '' }]);
+    };
+
+    const handleFlashcardChange = (index, field, value) => {
+        const updatedFlashcards = [...flashcards];
+        updatedFlashcards[index][field] = value;
+        setFlashcards(updatedFlashcards);
+    };
+
     return (
         <Container fluid>
             {/* Profile Header */}
@@ -133,6 +148,106 @@ export default function ProfilePage() {
                 </Modal.Footer>
             </Modal>
 
+            {/* Create Set Modal */}
+            <Modal show={showCreateSetModal} onHide={() => setShowCreateSetModal(false)} centered size="lg">
+                <Modal.Header closeButton>
+                    <Modal.Title>Create New Flashcard Set</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Form>
+                            {/* Set Name */}
+                            <Form.Group className="mb-3">
+                                <Form.Label>Set Name</Form.Label>
+                                <Form.Control
+                                    type="text"
+                                    placeholder="Enter set name"
+                                    value={setName}
+                                    onChange={(e) => setSetName(e.target.value)}
+                                />
+                            </Form.Group>
+                        {/* Description */}
+                        <Form.Group className="mb-3">
+                            <Form.Label>Description</Form.Label>
+                            <Form.Control 
+                                as="textarea" 
+                                rows={2} 
+                                placeholder="Enter set description"
+                                value={setDescription}
+                                onChange={(e) => setSetDescription(e.target.value)} 
+                            />
+                        </Form.Group>
+
+                        {/* Course Selection */}
+                        <Form.Group className="mb-4">
+                            <Form.Label>Course</Form.Label>
+                            <Form.Select 
+                                value={selectedCourse} 
+                                onChange={(e) => setSelectedCourse(e.target.value)}
+                            >
+                                <option value="">Select a course</option>
+                                {SAMPLE_COURSES.map((course) => (
+                                    <option key={course.id} value={course.course}>
+                                        {course.course}
+                                    </option>
+                                ))}
+                            </Form.Select>
+                        </Form.Group>
+
+                        {/* Flashcards Entry */}
+                        <div className="mb-3">
+                            <h6>Flashcards</h6>
+                            {flashcards.map((card, index) => (
+                                <Row key={index} className="mb-2">
+                                    <Col md={6}>
+                                        <Form.Control
+                                            placeholder={`Question #${index + 1}`}
+                                            value={card.question}
+                                            onChange={(e) => 
+                                                handleFlashcardChange(index, 'question', e.target.value)
+                                            }
+                                        />
+                                    </Col>
+                                    <Col md={6}>
+                                        <Form.Control
+                                            placeholder={`Answer #${index + 1}`}
+                                            value={card.answer}
+                                            onChange={(e) => 
+                                                handleFlashcardChange(index, 'answer', e.target.value)
+                                            }
+                                        />
+                                    </Col>
+                                </Row>
+                            ))}
+                            <Button 
+                                variant="outline-primary" 
+                                size="sm" 
+                                onClick={handleAddFlashcard}
+                                className="mt-2"
+                            >
+                                + Add Flashcard
+                            </Button>
+                        </div>
+                    </Form>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={() => setShowCreateSetModal(false)}>
+                        Cancel
+                    </Button>
+                    <Button variant="primary" onClick={() => {
+                        // Handle submission here
+                        console.log({
+                            setName,
+                            setDescription,
+                            selectedCourse,
+                            flashcards
+                        });
+                        setShowCreateSetModal(false);
+                    }}>
+                        Create Set
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+
             <Row>
                 {/* Sidebar Column */}
                 {/* Sidebar */}
@@ -200,7 +315,9 @@ export default function ProfilePage() {
                                             <a href="#">View all</a>
                                             <p className="mt-2">You don't have any projects yet.</p>
                                             <div className="mt-4"> {/* Pushes this to the bottom */}
-                                                <Button variant="primary">Create a Set</Button>
+                                            <Button variant="primary" onClick={() => setShowCreateSetModal(true)}>
+                                                Create a Set
+                                            </Button>
                                             </div>
                                         </Card>
                                     </Col>