Add save functionality

Jonatandb · May 24, 2024 · b5b92b5 · b5b92b5
1 parent 58f5034
commit b5b92b5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -16,63 +16,14 @@
       <button id="add-card" title="Add New Card">Add New Card</button>
     </div>
     <div class="cards-list">
-      <div class="card">
-        <p class="que-div">Question</p>
-        <p class="ans-div">Answer</p>
-        <button class="show-hide-btn" title="Show/Hide">Show/Hide</button>
-        <div class="btns-con">
-          <button class="edit" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
-          <button class="delete" title="Delete"><i class="fa-solid fa-trash"></i></button>
-        </div>
-      </div>
-
-      <div class="card">
-        <p class="que-div">Question</p>
-        <p class="ans-div">Answer</p>
-        <button class="show-hide-btn" title="Show/Hide">Show/Hide</button>
-        <div class="btns-con">
-          <button class="edit" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
-          <button class="delete" title="Delete"><i class="fa-solid fa-trash"></i></button>
-        </div>
-      </div>
-
-      <div class="card">
-        <p class="que-div">Question</p>
-        <p class="ans-div">Answer</p>
-        <button class="show-hide-btn" title="Show/Hide">Show/Hide</button>
-        <div class="btns-con">
-          <button class="edit" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
-          <button class="delete" title="Delete"><i class="fa-solid fa-trash"></i></button>
-        </div>
-      </div>
-
-      <div class="card">
-        <p class="que-div">Question</p>
-        <p class="ans-div">Answer</p>
-        <button class="show-hide-btn" title="Show/Hide">Show/Hide</button>
-        <div class="btns-con">
-          <button class="edit" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
-          <button class="delete" title="Delete"><i class="fa-solid fa-trash"></i></button>
-        </div>
-      </div>
-
-      <div class="card">
-        <p class="que-div">Question</p>
-        <p class="ans-div">Answer</p>
-        <button class="show-hide-btn" title="Show/Hide">Show/Hide</button>
-        <div class="btns-con">
-          <button class="edit" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
-          <button class="delete" title="Delete"><i class="fa-solid fa-trash"></i></button>
-        </div>
-      </div>
     </div>
   </div>
 
   <div class="modal hide" id="add-card-modal">
     <h2>Add Flashcard</h2>
     <div class="wrapper">
       <div class="error-con">
-        <span class="hide" id="error">
+        <span class="visible hidden" id="error">
           Input fields cannot be empty!
         </span>
       </div>

diff --git a/scripts.js b/scripts.js
@@ -1,6 +1,7 @@
 const container = document.querySelector(".container");
+const cardList = document.getElementById("cards-list");
 const addQuestionModal = document.getElementById("add-card-modal");
-const cardBtn = document.getElementById("save-btn");
+const saveBtn = document.getElementById("save-btn");
 const addQuestionBtn = document.getElementById("add-card");
 const closeBtn = document.getElementById("close-btn");
 const question = document.getElementById("question");
@@ -22,9 +23,38 @@ addQuestionBtn.addEventListener("click", () => {
 closeBtn.addEventListener("click", () => {
   container.classList.remove('hide');
   addQuestionModal.classList.add('hide');
+  errorMessage.classList.add("hidden");
   if(isEditing) {
     isEditing = false;
   }
 });
 
-
+saveBtn.addEventListener("click", () => {
+  let questionText = question.value.trim();
+  let answerText = answer.value.trim();
+  if(questionText === "" || answerText === "") {
+    errorMessage.classList.remove("hidden");
+    return;
+  }
+  errorMessage.classList.add("hidden");
+  if(isEditing) {
+    flashcards = flashcards.map(card => {
+      if(card.id === originalId) {
+        card.question = questionText;
+        card.answer = answerText;
+      }
+      return card;
+    });
+    isEditing = false;
+  } else {
+    flashcards.push({
+      id: Date.now(),
+      question: questionText,
+      answer: answerText
+    });
+  }
+  localStorage.setItem('flashcards', JSON.stringify(flashcards));
+  container.classList.remove('hide');
+  addQuestionModal.classList.add('hide');
+  //renderFlashcards();
+})
diff --git a/styles.css b/styles.css
@@ -132,10 +132,14 @@ button {
   margin-bottom: 24px;
 }
 
-#error {
+.visible {
   color: var(--main-color);
 }
 
+.hidden {
+  color: transparent;
+}
+
 #close-btn {
   font-size: 14px;
   background-color: var(--main-color);