Merge pull request #68 from software-students-spring2024/card-change-…

…buttons Add styling and functionality for prev and next buttons for a specific deck
software-students-spring2024 · Mar 2, 2024 · b349fc8 · b349fc8
2 parents 6896212 + 2345e31
commit b349fc8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 7 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -62,6 +62,26 @@ h3 {
   margin-bottom: 10%; 
 }
 
+.card-question {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  width: 90%;
+  aspect-ratio: 8 / 5;
+  border-radius: 7rem;
+  background: #fafafa;
+  padding: 10px;
+}
+
+.question-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  margin-bottom: 10%; 
+}
+
 .main-deck,
 .personal-deck,
 .add-deck {
@@ -182,6 +202,20 @@ h3 {
   font-size: 50px;
 }
 
+.card-button {
+  padding: 20px;
+  background-color: #5e4d47;
+  border: 1px solid #5e4d47;
+  cursor: pointer;
+  box-sizing: border-box;
+  font-weight: bold;
+  color: #FAFAFA;
+  font-size: 75px;
+  padding: 5px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
 .user-input {
   width: 100%;
   height: 20%;

diff --git a/templates/card.html b/templates/card.html
@@ -5,9 +5,15 @@
     <div class="box">
         <h2> {{ deckTitle }}</h2>
     </div>
-
-    <div id="card" class="card">
-        <h3 id="next-question"> START </h3>
+
+    <div class="question-box">
+        <button id="prevButton" class="card-button">&#8249;</button>
+
+        <div id="card" class="card-question">
+            <h3 id="next-question"> START </h3>
+        </div>
+
+        <button id="nextButton" class="card-button">&#8250;</button>
     </div>
 
     <a href="{{ url_for('addCard', username=username, deckTitle=deckTitle) }}" style="text-decoration:none">
@@ -20,17 +26,39 @@ <h3 id="next-question"> START </h3>
     <script>
         const nextQuestion = document.querySelector("#next-question");
         const card = document.querySelector("#card");
-        var cardIndex = 0;
+        const prev = document.querySelector("#prevButton");
+        const next = document.querySelector("#nextButton");
+
+        var cardIndex = -1;
         var questions = '{{ cardList }}'
+
         questions = questions.replaceAll("&#39;","\"")
         var cardList = Array.from(JSON.parse(questions))
         cardList.push("END OF DECK")
-        card.addEventListener("click", function() {
-            nextQuestion.textContent = cardList[cardIndex];
+
+        // event listener for prev button click
+        function prevCard() {
+            if (cardIndex > 0) {
+                cardIndex -= 1;
+                nextQuestion.textContent = cardList[cardIndex];
+            } else {
+                nextQuestion.textContent = "START";
+            }
+        }
+
+        prev.addEventListener("click", prevCard);
+
+        // event listener for both card click and next button click
+        function nextCard() {
             if (cardIndex < cardList.length-1) {
                 cardIndex += 1;
+                nextQuestion.textContent = cardList[cardIndex];
             }
-        });
+        }
+
+        card.addEventListener("click", nextCard);
+        next.addEventListener("click", nextCard);
+
     </script>
 
 {% endblock %}