bug fixes

Author: petergmlui

debugging/book-library/index.html

@@ -27,50 +27,49 @@ <h1>Library</h1>
       Add new book
     </button>
 
-    <div id="demo" class="collapse">
-      <form>
-      <div class="form-group">
-        <label for="title">Title:</label>
+ <div id="demo" class="collapse">
+  <form id="book-form">
+    <div class="form-group">
+      <label for="title">Title:</label>
+      <input
+        type="text"
+        class="form-control"
+        id="title"
+        name="title"
+        required
+      />
+      <label for="author">Author:</label>
+      <input
+        type="text"
+        class="form-control"
+        id="author"
+        name="author"
+        required
+      />
+      <label for="pages">Pages:</label>
+      <input
+        type="number"
+        class="form-control"
+        id="pages"
+        name="pages"
+        required
+      />
+      <label class="form-check-label">
         <input
-          type="text"
-          class="form-control"
-          id="title"
-          name="title"
-          required
-        />
-        <label for="author">Author: </label>
-        <input
-          type="text"
-          class="form-control"
-          id="author"
-          name="author"
-          required
-        />
-        <label for="pages">Pages:</label>
-        <input
-          type="number"
-          class="form-control"
-          id="pages"
-          name="pages"
-          required
-        />
-        <label class="form-check-label">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="check"
-            value=""
-          />Read
-        </label>
-          <input
-            type="submit"
-            value="Submit"
-            class="btn btn-primary"
-            onclick="submit();"
-          />
-        </div>
-      </form>
+          type="checkbox"
+          class="form-check-input"
+          id="check"
+          value=""
+        />Read
+      </label>
+      <input
+        type="submit"
+        value="Submit"
+        class="btn btn-primary"
+      />
     </div>
+  </form>
+</div>
 
     <table class="table" id="display">
       <thead class="thead-dark">

debugging/book-library/script.js

@@ -1,18 +1,31 @@
 let myLibrary = [];
 
-window.addEventListener("load", function (e) {
+window.addEventListener("load", function () {
+  // console.log("Page loaded, initializing library");
   populateStorage();
   render();
 });
 
+// Attach form submit event listener
+document.getElementById("book-form").addEventListener("submit", function (event) {
+  // console.log("Form submit event triggered");
+  event.preventDefault(); // Prevent default form submission
+  submit();
+});
+
 function populateStorage() {
-  if (myLibrary.length === 0) {
+  const storedLibrary = localStorage.getItem("myLibrary");
+  if (storedLibrary) {
+    // console.log("Loading myLibrary from localStorage:", storedLibrary);
+    myLibrary = JSON.parse(storedLibrary);
+  } else {
+    // console.log("No data in localStorage, initializing with default books");
     let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
     let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true);
-    myLibrary.push(book1);
-    myLibrary.push(book2);
-    render();
+    myLibrary.push(book1, book2);
+    localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
   }
+  render();
 }
 
 const title = document.getElementById("title");
@@ -21,21 +34,30 @@ const pages = document.getElementById("pages");
 const check = document.getElementById("check");
 
 function submit() {
-  if (
-    !title.value ||
-    !author.value ||
-    !pages.value
-  ) {
-    alert("Please fill all fields!");
-    return false;
-  } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
-    myLibrary.push(book);
-    render();
-    // Reset form and collapse
-    document.querySelector("form").reset();
-    $("#demo").collapse("hide");
-  }
+  // console.log("submit() function called");
+  // console.log("Input values:", {
+  //   title: title.value,
+  //   author: author.value,
+  //   pages: pages.value,
+  //   read: check.checked
+  // });
+
+  // if (!title.value.trim() || !author.value.trim() || !pages.value || isNaN(parseInt(pages.value))) {
+  //   console.log("Validation failed: One or more fields are empty or invalid");
+  //   alert("Please fill all fields with valid data!");
+  //   return;
+  // }
+
+  let book = new Book(title.value.trim(), author.value.trim(), parseInt(pages.value), check.checked);
+  // console.log("New book created:", book);
+  myLibrary.push(book);
+  // console.log("myLibrary after push:", myLibrary);
+  localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
+  render();
+  document.querySelector("form").reset();
+  // console.log("Form reset");
+  $("#demo").collapse("hide");
+  // console.log("Form collapsed");
 }
 
 function Book(title, author, pages, check) {
@@ -46,15 +68,14 @@ function Book(title, author, pages, check) {
 }
 
 function render() {
+  // console.log("render() called, myLibrary:", myLibrary);
   let table = document.getElementById("display");
   let rowsNumber = table.rows.length;
-  // Delete old table rows (except header)
   for (let n = rowsNumber - 1; n > 0; n--) {
     table.deleteRow(n);
   }
-  // Insert updated rows
   for (let i = 0; i < myLibrary.length; i++) {
-    let row = table.insertRow(-1); // Append at the end of tbody
+    let row = table.insertRow(-1);
     let titleCell = row.insertCell(0);
     let authorCell = row.insertCell(1);
     let pagesCell = row.insertCell(2);
@@ -64,18 +85,17 @@ function render() {
     authorCell.innerHTML = myLibrary[i].author;
     pagesCell.innerHTML = myLibrary[i].pages;
 
-    // Read/Unread button
     let changeBut = document.createElement("button");
     changeBut.id = `read-${i}`;
     changeBut.className = "btn btn-success";
-    wasReadCell.appendChild(changeBut);
     changeBut.innerText = myLibrary[i].check ? "Yes" : "No";
+    wasReadCell.appendChild(changeBut);
     changeBut.addEventListener("click", function () {
       myLibrary[i].check = !myLibrary[i].check;
+      localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
       render();
     });
 
-    // Delete button
     let delButton = document.createElement("button");
     delButton.id = `delete-${i}`;
     delButton.className = "btn btn-warning";
@@ -84,6 +104,7 @@ function render() {
     delButton.addEventListener("click", function () {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);
+      localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
       render();
     });
   }