Custom-Flashcards/index.html at main · Sandhya80/Custom-Flashcards · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags and page title -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Custom Flashcards</title>
  <!-- Main stylesheet and favicon -->
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
</head>
<body>
  <div class="container">
    <!-- SECTION 1: Header, Theme Toggle, Timer, Score, Category Filter, Shuffle -->
    <h1>Custom Flashcards</h1>
    <div class="toggle-center">
      <!-- Dark/Light mode toggle button -->
      <button id="themeToggleBtn" class="theme-toggle-btn" aria-label="Toggle dark mode">
        🌙 Dark Mode
      </button>
    </div>
    <div class="score-timer-row">
      <!-- Score display and reset -->
      <div class="score" aria-live="polite">
        Score: <span id="score">0</span>
        <button id="scoreResetBtn" title="Reset Score" class="score-reset-btn">⟳</button>
      </div>
      <!-- Timer controls -->
      <div class="timer" aria-live="polite">
        <label for="timerInputMin">Timer:</label>
        <input type="number" id="timerInputMin" min="0" max="59" value="0" aria-label="Minutes"> :
        <input type="number" id="timerInputSec" min="0" max="59" value="0" aria-label="Seconds">
        <button id="timerSetBtn" title="Set Timer" class="timer-set-btn">Set</button>
        <span id="timerDisplay">00:00</span>
        <button id="timerResetBtn" title="Reset Timer" class="score-reset-btn">⟳</button>
      </div>
    </div>
    <div class="category-row">
      <!-- Category filter dropdown -->
      <div class="category-filter">
        <label for="categorySelect">Category:</label>
        <select id="categorySelect">
          <option value="all">All</option>
          <option value="JavaScript">JavaScript</option>
          <option value="HTML5">HTML5</option>
          <option value="CSS3">CSS3</option>
        </select>
      </div>
      <!-- Shuffle flashcards button -->
      <button id="shuffleBtn">Shuffle</button>
    </div>

    <!-- SECTION 2: Flashcard Display, Choices, Navigation Controls -->
    <div class="flashcard-section">
      <!-- Flashcard front/back display -->
      <div id="flashcard" class="card">
        <div class="card-inner">
          <div class="front">Question</div>
          <div class="back">Answer</div>
        </div>
      </div>
      <!-- Multiple choice options -->
      <div class="choices" id="choices"></div>
      <!-- Navigation controls: Previous, Flip, Next -->
      <div class="controls">
        <button id="prevBtn">Previous</button>
        <button id="flipBtn">Flip</button>
        <button id="nextBtn">Next</button>
      </div>
    </div>

    <!-- ACTION BUTTONS: Show Add/Edit Flashcard Forms -->
    <div class="flashcard-actions text-center">
      <button id="showAddFormBtn" type="button">Add New Flashcard</button>
      <button id="showEditFormBtn" type="button">Edit Flashcard</button>
    </div>

    <!-- SECTION 3: Forms for Adding and Editing Flashcards -->
    <div class="forms-section-vertical">
      <!-- Add New Flashcard Form (hidden by default) -->
      <div class="form-part" id="addFormPart">
        <h2>Add New Flashcard</h2>
        <form id="cardForm">
          <input type="text" id="questionInput" placeholder="Question" required>
          <input type="text" id="answerInput" placeholder="Answer" required>
          <label for="categoryInput">Category:</label>
          <select id="categoryInput" required>
            <option value="">Select Category</option>
            <option value="JavaScript">JavaScript</option>
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
          </select>
          <button type="submit">Add Card</button>
        </form>
        <!-- Card management actions -->
        <div class="card-actions">
          <button id="deleteBtn">Delete Current Card</button>
          <button id="resetBtn" class="reset">Reset All Flashcards</button>
          <button id="editBtn">Edit Current Card</button>
        </div>
      </div>
      <!-- Edit Flashcard Form (hidden by default) -->
      <div class="form-part" id="editFormPart">
        <h2>Edit Flashcard</h2>
        <form id="editForm">
          <label for="editCategorySelect">Category:</label>
          <select id="editCategorySelect" required>
            <option value="">Select Category</option>
            <option value="JavaScript">JavaScript</option>
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
          </select>
          <label for="editQuestionSelect">Question:</label>
          <select id="editQuestionSelect" required>
            <option value="">Select Question</option>
            <!-- Questions will be populated dynamically -->
          </select>
          <input type="text" id="editQuestion" placeholder="Edit Question" required>
          <input type="text" id="editAnswer" placeholder="Edit Answer" required>
          <button type="submit">Save Changes</button>
          <button type="button" id="cancelEdit">Cancel</button>
        </form>
      </div>
    </div>
  </div>
  <!-- Main JavaScript file -->
  <script src="script.js"></script>
</body>
</html>