From 286b82e8d007a52904c7fff0d971308564c268c9 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:25:04 +0100
Subject: [PATCH 01/39] Fix syntax error in for loop for row deletion

---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 75ce6c1d3..eed706fdc 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -54,7 +54,7 @@ function render() {
   let table = document.getElementById("display");
   let rowsNumber = table.rows.length;
   //delete old table
-  for (let n = rowsNumber - 1; n > 0; n-- {
+  for (let n = rowsNumber - 1; n > 0; n--) {
     table.deleteRow(n);
   }
   //insert updated row and cells

From fbcee089a994126e224507e729bb574ec3f3bed1 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:27:25 +0100
Subject: [PATCH 02/39] Change library to mylibrary for book storage

for the function submit
---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index eed706fdc..9b732fc67 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -38,7 +38,7 @@ function submit() {
     return false;
   } else {
     let book = new Book(title.value, title.value, pages.value, check.checked);
-    library.push(book);
+    mylibrary.push(book);
     render();
   }
 }

From 1da4c076947e9234289f34974703f5db1de42146 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:28:51 +0100
Subject: [PATCH 03/39] Fix book constructor to use author value

for typo mistake
---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 9b732fc67..4bc162f07 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -37,7 +37,7 @@ function submit() {
     alert("Please fill all fields!");
     return false;
   } else {
-    let book = new Book(title.value, title.value, pages.value, check.checked);
+    let book = new Book(title.value, author.value, pages.value, check.checked);
     mylibrary.push(book);
     render();
   }

From 6350c1aa93e0af22bb34e7cfd541069170c10a16 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:31:27 +0100
Subject: [PATCH 04/39] Correct delete button variable name

Fix variable name for delete button in script.js
---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 4bc162f07..27b545d31 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -90,7 +90,7 @@ function render() {
 
     //add delete button to every row and render again
     let delButton = document.createElement("button");
-    delBut.id = i + 5;
+    delButton.id = i + 5;
     deleteCell.appendChild(delBut);
     delBut.className = "btn btn-warning";
     delBut.innerHTML = "Delete";

From d030a556f94fe1db91306e10aa8e182ba76b907f Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:32:34 +0100
Subject: [PATCH 05/39] Fix event listener typo for delete button

There is no event called clicks
---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 27b545d31..5324e4098 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -94,7 +94,7 @@ function render() {
     deleteCell.appendChild(delBut);
     delBut.className = "btn btn-warning";
     delBut.innerHTML = "Delete";
-    delBut.addEventListener("clicks", function () {
+    delBut.addEventListener("click", function () {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);
       render();

From 780b6ac69ea9ece153b81b3ca7e1dd5418179003 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:37:51 +0100
Subject: [PATCH 06/39] Change row insertion to append at the end of table

for wrong insertion order
---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 5324e4098..6211cc130 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -60,7 +60,7 @@ function render() {
   //insert updated row and cells
   let length = myLibrary.length;
   for (let i = 0; i < length; i++) {
-    let row = table.insertRow(1);
+    let row = table.insertRow(-1);
     let titleCell = row.insertCell(0);
     let authorCell = row.insertCell(1);
     let pagesCell = row.insertCell(2);

From ef6d410a30a564390da0b97b4f487b1db002ce2c Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:39:27 +0100
Subject: [PATCH 07/39] Fix read status check in script.js

Read/unread saves the wrong answer
---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 6211cc130..10f7fb011 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -76,7 +76,7 @@ function render() {
     changeBut.className = "btn btn-success";
     wasReadCell.appendChild(changeBut);
     let readStatus = "";
-    if (myLibrary[i].check == false) {
+    if (myLibrary[i].check == true) {
       readStatus = "Yes";
     } else {
       readStatus = "No";

From b74b56289990c1c8e6f7c8ae1850fe0cb8fd51d3 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:42:26 +0100
Subject: [PATCH 08/39] Table deletion broken

Fix the sequence
---
 debugging/book-library/script.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 10f7fb011..8bcf3ac69 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -91,7 +91,7 @@ function render() {
     //add delete button to every row and render again
     let delButton = document.createElement("button");
     delButton.id = i + 5;
-    deleteCell.appendChild(delBut);
+
     delBut.className = "btn btn-warning";
     delBut.innerHTML = "Delete";
     delBut.addEventListener("click", function () {
@@ -99,5 +99,6 @@ function render() {
       myLibrary.splice(i, 1);
       render();
     });
+    deleteCell.appendChild(delBut);
   }
 }

From f1bcc2aec41c70315b667da55544c164468a5966 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 17:59:15 +0100
Subject: [PATCH 09/39] Refactor book creation and storage in populateStorage

Remove newline characters;
Change "127" to 127 ;
Simplify two push statement to one push statement
---
 debugging/book-library/script.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 8bcf3ac69..280307468 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -8,14 +8,8 @@ window.addEventListener("load", function (e) {
 function populateStorage() {
   if (myLibrary.length == 0) {
     let book1 = new Book("Robison 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);
+    let book2 = new Book("The Old Man and the Sea","Ernest Hemingway",127,true);
+    myLibrary.push(book1, book2);
     render();
   }
 }

From f447b3d10fd6ebc9e39266ccad96b2496f83c7c1 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 18:02:43 +0100
Subject: [PATCH 10/39] Enhance input validation in submit function

Refactor submit function to improve input validation.
---
 debugging/book-library/script.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 280307468..18646bc9b 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -23,17 +23,17 @@ const check = document.getElementById("check");
 //via Book function and start render function
 function submit() {
   if (
-    title.value == null ||
-    title.value == "" ||
-    pages.value == null ||
-    pages.value == ""
+    title.value.trim() === "" ||
+    pages.value.trim() === "" ||
+    author.value.trim() === ""
   ) {
     alert("Please fill all fields!");
-    return false;
-  } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
-    mylibrary.push(book);
-    render();
+    return;
+  } 
+  
+  let book = new Book(title.value, author.value, pages.value, check.checked);
+  mylibrary.push(book);
+  render();
   }
 }
 

From 35a279310471a1e6e4e4ef3836e7c0ac7bde4aa4 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 18:11:14 +0100
Subject: [PATCH 11/39] Fix empty table shown initially

Refactor row deletion logic to use while loop for clarity.
---
 debugging/book-library/script.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 18646bc9b..8b576e781 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -48,8 +48,8 @@ function render() {
   let table = document.getElementById("display");
   let rowsNumber = table.rows.length;
   //delete old table
-  for (let n = rowsNumber - 1; n > 0; n--) {
-    table.deleteRow(n);
+  while (table.rows.length > 1) {
+    table.deleteRow(1);
   }
   //insert updated row and cells
   let length = myLibrary.length;

From d620ffbb48d9c243ba380ea16ce3790253d2f4f8 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 18:16:20 +0100
Subject: [PATCH 12/39] Simplify rendering of library rows and buttons

Refactor loop to directly use myLibrary.length and simplify read status button logic.
---
 debugging/book-library/script.js | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 8b576e781..59e7d8417 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -52,35 +52,30 @@ function render() {
     table.deleteRow(1);
   }
   //insert updated row and cells
-  let length = myLibrary.length;
-  for (let i = 0; i < length; i++) {
+  
+  for (let i = 0; i < myLibrary.length; i++) {
     let row = table.insertRow(-1);
+  
     let titleCell = row.insertCell(0);
     let authorCell = row.insertCell(1);
     let pagesCell = row.insertCell(2);
     let wasReadCell = row.insertCell(3);
     let deleteCell = row.insertCell(4);
+    
     titleCell.innerHTML = myLibrary[i].title;
     authorCell.innerHTML = myLibrary[i].author;
     pagesCell.innerHTML = myLibrary[i].pages;
 
     //add and wait for action for read/unread button
     let changeBut = document.createElement("button");
-    changeBut.id = i;
+    
     changeBut.className = "btn btn-success";
-    wasReadCell.appendChild(changeBut);
-    let readStatus = "";
-    if (myLibrary[i].check == true) {
-      readStatus = "Yes";
-    } else {
-      readStatus = "No";
-    }
-    changeBut.innerText = readStatus;
-
-    changeBut.addEventListener("click", function () {
+    changeBut.innerText = myLibrary[i].check ? "Yes" : "No";
+    changeBut.addEventListener("click", () => {
       myLibrary[i].check = !myLibrary[i].check;
       render();
     });
+    wasReadCell.appendChild(changeBut);
 
     //add delete button to every row and render again
     let delButton = document.createElement("button");

From a8f4d2cfea242b064f20106996414f5e7ed12494 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 18:17:44 +0100
Subject: [PATCH 13/39] Fix delete button creation and event listener

---
 debugging/book-library/script.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 59e7d8417..55adf2dfd 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -79,15 +79,13 @@ function render() {
 
     //add delete button to every row and render again
     let delButton = document.createElement("button");
-    delButton.id = i + 5;
-
-    delBut.className = "btn btn-warning";
-    delBut.innerHTML = "Delete";
-    delBut.addEventListener("click", function () {
+    delButton.className = "btn btn-warning";
+    delButton.innerText = "Delete";
+    delButton.addEventListener("click", () => {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);
       render();
     });
-    deleteCell.appendChild(delBut);
+    deleteCell.appendChild(delButton);
   }
 }

From 374ddfdd4071256b38b6d2494809ba7ac8af8d8b Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Fri, 7 Aug 2026 18:19:47 +0100
Subject: [PATCH 14/39] Remove render call during library initialization

Removed the call to render() when initializing the library.
---
 debugging/book-library/script.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 55adf2dfd..f9ec27c0b 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -10,7 +10,6 @@ function populateStorage() {
     let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
     let book2 = new Book("The Old Man and the Sea","Ernest Hemingway",127,true);
     myLibrary.push(book1, book2);
-    render();
   }
 }
 

From 456c37ad03cfe845e815893d2b70f8ce5dac31bc Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Sun, 9 Aug 2026 18:27:10 +0100
Subject: [PATCH 15/39] Add comments to explain detail changes

Fix multiple issues in book library functionality, including correcting variable names, logic for read status, and ensuring proper rendering of books.
---
 debugging/book-library/script.js | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index f9ec27c0b..37e88a205 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -9,6 +9,11 @@ function populateStorage() {
   if (myLibrary.length == 0) {
     let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
     let book2 = new Book("The Old Man and the Sea","Ernest Hemingway",127,true);
+
+// Changed by Chun Yan Wong
+// Date : 9/8/2026
+// Purpose : Fix the problem "2. Error in console when you try to add a book"
+// Change : replace Librarty with the correct variable myLibrary    
     myLibrary.push(book1, book2);
   }
 }
@@ -29,7 +34,12 @@ function submit() {
     alert("Please fill all fields!");
     return;
   } 
-  
+
+
+  // Changed by Chun Yan Wong
+  // Date : 9/8/2026
+  // Purpose : Fix the problem "3. It uses the title name as the author name"
+  // Change : replace the second title with author.value to fix the bug 
   let book = new Book(title.value, author.value, pages.value, check.checked);
   mylibrary.push(book);
   render();
@@ -50,8 +60,11 @@ function render() {
   while (table.rows.length > 1) {
     table.deleteRow(1);
   }
-  //insert updated row and cells
-  
+
+  // Changed by Chun Yan Wong
+  // Date : 9/8/2026
+  // Purpose : Fix the problem "1. Website loads but doesn't show any books"
+  // Change : Missing ) → script stops executing → nothing renders and add back the closing ) to fix it    
   for (let i = 0; i < myLibrary.length; i++) {
     let row = table.insertRow(-1);
   
@@ -67,8 +80,12 @@ function render() {
 
     //add and wait for action for read/unread button
     let changeBut = document.createElement("button");
-    
     changeBut.className = "btn btn-success";
+
+    // Changed by Chun Yan Wong
+    // Date : 9/8/2026
+    // Purpose : Fix the problem "5. When I add a book that I say I've read - it saves the wrong answer"
+    // Change : Correct the logic - if check == true, that means the book was read, so it should show Yes.
     changeBut.innerText = myLibrary[i].check ? "Yes" : "No";
     changeBut.addEventListener("click", () => {
       myLibrary[i].check = !myLibrary[i].check;
@@ -78,6 +95,10 @@ function render() {
 
     //add delete button to every row and render again
     let delButton = document.createElement("button");
+    // Changed by Chun Yan Wong
+    // Date : 9/8/2026
+    // Purpose : Fix the problem "4. Delete button is broken"
+    // Change : Fix the incorrect nanmes "delBut" button and "clicks" event to the correct one "delButton" and "click" respectively     
     delButton.className = "btn btn-warning";
     delButton.innerText = "Delete";
     delButton.addEventListener("click", () => {

From 023159bdd0a7c78a698bb8273638088e0e5d1b10 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 18:58:40 +0100
Subject: [PATCH 16/39] Update HTML structure and input types for html
 validation

Updated title and meta tags in the head section. Changed input types for title and author fields to 'text'.
---
 debugging/book-library/index.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 23acfa71e..806604ac4 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -1,11 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title> </title>
-    <meta
-      charset="utf-8"
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
+    <title>Virtual Library</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"
     />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
@@ -31,7 +29,7 @@ <h1>Library</h1>
       <div class="form-group">
         <label for="title">Title:</label>
         <input
-          type="title"
+          type="text"
           class="form-control"
           id="title"
           name="title"
@@ -39,7 +37,7 @@ <h1>Library</h1>
         />
         <label for="author">Author: </label>
         <input
-          type="author"
+          type="text"
           class="form-control"
           id="author"
           name="author"

From 1e71bf3a608bacd05ca89d9a821e80b0f229c22e Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 19:03:09 +0100
Subject: [PATCH 17/39] Fix book1 page number type in populateStorage

---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 37e88a205..c8fc4231d 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -7,7 +7,7 @@ window.addEventListener("load", function (e) {
 
 function populateStorage() {
   if (myLibrary.length == 0) {
-    let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
+    let book1 = new Book("Robison Crusoe", "Daniel Defoe", 252, true);
     let book2 = new Book("The Old Man and the Sea","Ernest Hemingway",127,true);
 
 // Changed by Chun Yan Wong

From 1cf530ce89c2f63835f6a17a4ebc06b3cdd9e95b Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 19:05:43 +0100
Subject: [PATCH 18/39] Remove developer name comment

Remove my name in the comment as I am the only one developer in the project
---
 debugging/book-library/script.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index c8fc4231d..f89642aa4 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -10,7 +10,7 @@ function populateStorage() {
     let book1 = new Book("Robison Crusoe", "Daniel Defoe", 252, true);
     let book2 = new Book("The Old Man and the Sea","Ernest Hemingway",127,true);
 
-// Changed by Chun Yan Wong
+
 // Date : 9/8/2026
 // Purpose : Fix the problem "2. Error in console when you try to add a book"
 // Change : replace Librarty with the correct variable myLibrary    
@@ -36,7 +36,6 @@ function submit() {
   } 
 
 
-  // Changed by Chun Yan Wong
   // Date : 9/8/2026
   // Purpose : Fix the problem "3. It uses the title name as the author name"
   // Change : replace the second title with author.value to fix the bug 
@@ -61,7 +60,6 @@ function render() {
     table.deleteRow(1);
   }
 
-  // Changed by Chun Yan Wong
   // Date : 9/8/2026
   // Purpose : Fix the problem "1. Website loads but doesn't show any books"
   // Change : Missing ) → script stops executing → nothing renders and add back the closing ) to fix it    
@@ -82,7 +80,6 @@ function render() {
     let changeBut = document.createElement("button");
     changeBut.className = "btn btn-success";
 
-    // Changed by Chun Yan Wong
     // Date : 9/8/2026
     // Purpose : Fix the problem "5. When I add a book that I say I've read - it saves the wrong answer"
     // Change : Correct the logic - if check == true, that means the book was read, so it should show Yes.
@@ -95,7 +92,6 @@ function render() {
 
     //add delete button to every row and render again
     let delButton = document.createElement("button");
-    // Changed by Chun Yan Wong
     // Date : 9/8/2026
     // Purpose : Fix the problem "4. Delete button is broken"
     // Change : Fix the incorrect nanmes "delBut" button and "clicks" event to the correct one "delButton" and "click" respectively     

From bb941e078852c83d228c08e2b32a7b1fdb92b1e5 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 19:12:49 +0100
Subject: [PATCH 19/39] Fix rendering issue by clearing table content

Clear the table's inner HTML to remove old rows.
---
 debugging/book-library/script.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index f89642aa4..722abf825 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -56,9 +56,7 @@ function render() {
   let table = document.getElementById("display");
   let rowsNumber = table.rows.length;
   //delete old table
-  while (table.rows.length > 1) {
-    table.deleteRow(1);
-  }
+  table.innerHTML = "";
 
   // Date : 9/8/2026
   // Purpose : Fix the problem "1. Website loads but doesn't show any books"

From 7f0c9c1b8ad0d64880e9e1e888378a5d931f9e56 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 19:14:28 +0100
Subject: [PATCH 20/39] Remove unused variable in render function

Remove unused variable 'rowsNumber' in render function.
---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 722abf825..0a232c6b4 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -54,7 +54,7 @@ function Book(title, author, pages, check) {
 
 function render() {
   let table = document.getElementById("display");
-  let rowsNumber = table.rows.length;
+
   //delete old table
   table.innerHTML = "";
 

From 65c0c359027e795e1449a1d3c2d245808e80985c Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 19:24:42 +0100
Subject: [PATCH 21/39] Use trimmed values instead of untrimmed values for
 updating

Updated the submit function to use the correct trimmed value
---
 debugging/book-library/script.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 0a232c6b4..0fda62078 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -26,20 +26,25 @@ const check = document.getElementById("check");
 //check the right input from forms and if its ok -> add the new book (object in array)
 //via Book function and start render function
 function submit() {
+
+  // Date : 9/8/2026
+  // Purpose : Fix the problem "3. It uses the title name as the author name"
+  // Change : replace the second title with author.value to fix the bug 
+  let titleValue = title.value.trim();
+  let authorValue = author.value.trim();
+  let pagesValue = pages.value.trim();
+ 
   if (
-    title.value.trim() === "" ||
-    pages.value.trim() === "" ||
-    author.value.trim() === ""
+    titleValue === "" ||
+    authorValue === "" ||
+    pagesValue === ""
   ) {
     alert("Please fill all fields!");
     return;
-  } 
+  }
 
+  let book = new Book(titleValue, authorValue, pagesValue, check.checked);
 
-  // Date : 9/8/2026
-  // Purpose : Fix the problem "3. It uses the title name as the author name"
-  // Change : replace the second title with author.value to fix the bug 
-  let book = new Book(title.value, author.value, pages.value, check.checked);
   mylibrary.push(book);
   render();
   }

From c0684e9b31c7cb835c1a9a54b42d905c7deff199 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 20:48:56 +0100
Subject: [PATCH 22/39] Implement status message display and fix variable name

Added a helper function to display status messages in the UI and updated the submit function to use it. Also fixed variable name from 'mylibrary' to 'myLibrary'.
---
 debugging/book-library/script.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 0fda62078..df5766782 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -23,6 +23,26 @@ const author = document.getElementById("author");
 const pages = document.getElementById("pages");
 const check = document.getElementById("check");
 
+// Helper function to display messages to the user in the UI
+function displayStatusMessage(message, isError = false) {
+  const statusContainer = document.getElementById("status-message") || createStatusContainer();
+  statusContainer.textContent = message;
+  statusContainer.style.color = isError ? "red" : "black";
+}
+
+function createStatusContainer() {
+  const container = document.createElement("div");
+  container.id = "status-message";
+  container.style.padding = "1rem";
+  container.style.fontSize = "1.2rem";
+  container.style.textAlign = "center";
+  
+  // Prepend to body or main container
+  document.body.prepend(container);
+  return container;
+}
+
+
 //check the right input from forms and if its ok -> add the new book (object in array)
 //via Book function and start render function
 function submit() {
@@ -39,15 +59,15 @@ function submit() {
     authorValue === "" ||
     pagesValue === ""
   ) {
-    alert("Please fill all fields!");
+    displayStatusMessage("Please fill all fields!", true);
     return;
   }
 
   let book = new Book(titleValue, authorValue, pagesValue, check.checked);
 
-  mylibrary.push(book);
+  myLibrary.push(book);
   render();
-  }
+  
 }
 
 function Book(title, author, pages, check) {
@@ -101,7 +121,7 @@ function render() {
     delButton.className = "btn btn-warning";
     delButton.innerText = "Delete";
     delButton.addEventListener("click", () => {
-      alert(`You've deleted title: ${myLibrary[i].title}`);
+      displayStatusMessage(`You've deleted title: ${myLibrary[i].title}`,false);
       myLibrary.splice(i, 1);
       render();
     });

From c5d97958158a7012af3a8e69c2c610cdf96cfb54 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Mon, 10 Aug 2026 20:54:11 +0100
Subject: [PATCH 23/39] Add table header to book library

Added table header for book library display.
---
 debugging/book-library/script.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index df5766782..e54410c14 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -83,6 +83,19 @@ function render() {
   //delete old table
   table.innerHTML = "";
 
+  let thead = document.createElement("thead");
+  thead.className = "thead-dark";
+  thead.innerHTML = `
+    <tr>
+      <th>Title</th>
+      <th>Author</th>
+      <th>Number of Pages</th>
+      <th>Read</th>
+      <th></th>
+    </tr>
+  `;
+  table.appendChild(thead);
+
   // Date : 9/8/2026
   // Purpose : Fix the problem "1. Website loads but doesn't show any books"
   // Change : Missing ) → script stops executing → nothing renders and add back the closing ) to fix it    

From 335ed1faa0c1d95e936b0ea751674b9be6d4e838 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 09:12:17 +0100
Subject: [PATCH 24/39] Add input validation for pages number field

---
 debugging/book-library/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 806604ac4..770653698 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -49,6 +49,9 @@ <h1>Library</h1>
           class="form-control"
           id="pages"
           name="pages"
+          min="1"
+          step="1"
+          oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/^0+/, '');"
           required
         />
         <label class="form-check-label">

From 372ee5be20eec3d6f4759df947314668ddae6ebf Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 09:35:59 +0100
Subject: [PATCH 25/39] Refactor variable names for clarity in script.js

---
 debugging/book-library/script.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index e54410c14..6f61a41bf 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -18,10 +18,10 @@ function populateStorage() {
   }
 }
 
-const title = document.getElementById("title");
-const author = document.getElementById("author");
-const pages = document.getElementById("pages");
-const check = document.getElementById("check");
+const titleElement = document.getElementById("title");
+const authorElement = document.getElementById("author");
+const pagesElement = document.getElementById("pages");
+const checkElement = document.getElementById("check");
 
 // Helper function to display messages to the user in the UI
 function displayStatusMessage(message, isError = false) {
@@ -50,9 +50,9 @@ function submit() {
   // Date : 9/8/2026
   // Purpose : Fix the problem "3. It uses the title name as the author name"
   // Change : replace the second title with author.value to fix the bug 
-  let titleValue = title.value.trim();
-  let authorValue = author.value.trim();
-  let pagesValue = pages.value.trim();
+  let titleValue = titleElement.value.trim();
+  let authorValue = authorElement.value.trim();
+  let pagesValue = pagesElement.value.trim();
  
   if (
     titleValue === "" ||
@@ -63,7 +63,7 @@ function submit() {
     return;
   }
 
-  let book = new Book(titleValue, authorValue, pagesValue, check.checked);
+  let book = new Book(titleValue, authorValue, pagesValue, checkElement.checked);
 
   myLibrary.push(book);
   render();

From 57bbea8683ab7f67a01f4a9afabeb69789d5141e Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 09:39:27 +0100
Subject: [PATCH 26/39] Change myLibrary to a constant

---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 6f61a41bf..de5b64cec 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -1,4 +1,4 @@
-let myLibrary = [];
+const myLibrary = [];
 
 window.addEventListener("load", function (e) {
   populateStorage();

From 1085470e5b45e7eada336d5946a75d183be3bc3d Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 18:53:48 +0100
Subject: [PATCH 27/39] Remove input sanitization from pages field

Removed input sanitization for pages input field.
---
 debugging/book-library/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 770653698..d1ea0d965 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -51,7 +51,6 @@ <h1>Library</h1>
           name="pages"
           min="1"
           step="1"
-          oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/^0+/, '');"
           required
         />
         <label class="form-check-label">

From e0ae32cc5f15145863df0477cbe039d3b8d0fcf9 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 18:55:36 +0100
Subject: [PATCH 28/39] Implement pages input validation

Added validation for pages input to ensure it is a positive whole number.
---
 debugging/book-library/script.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index de5b64cec..07dfe3fd7 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -53,7 +53,9 @@ function submit() {
   let titleValue = titleElement.value.trim();
   let authorValue = authorElement.value.trim();
   let pagesValue = pagesElement.value.trim();
- 
+
+  displayStatusMessage("");
+  
   if (
     titleValue === "" ||
     authorValue === "" ||
@@ -63,6 +65,12 @@ function submit() {
     return;
   }
 
+  const positiveIntegerRegex = /^[1-9]\d*$/;
+  if (!positiveIntegerRegex.test(pagesValue)) {
+    displayStatusMessage("Pages must be a positive whole number!", true);
+    return;
+  }
+  
   let book = new Book(titleValue, authorValue, pagesValue, checkElement.checked);
 
   myLibrary.push(book);

From 87711936ce46fdc55bbfb265895b2b4530ff62cb Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 19:02:33 +0100
Subject: [PATCH 29/39] Add event listener for submit button

---
 debugging/book-library/script.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 07dfe3fd7..3ea23700f 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -23,6 +23,10 @@ const authorElement = document.getElementById("author");
 const pagesElement = document.getElementById("pages");
 const checkElement = document.getElementById("check");
 
+const submitBtn = document.getElementById("submitBtn");
+submitBtn.addEventListener("click", submit);
+
+
 // Helper function to display messages to the user in the UI
 function displayStatusMessage(message, isError = false) {
   const statusContainer = document.getElementById("status-message") || createStatusContainer();

From 7e690803a39cca95135f3ec3232170224b49a2c4 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 19:03:34 +0100
Subject: [PATCH 30/39] Fix submit button HTML syntax

---
 debugging/book-library/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index d1ea0d965..5f9f6bef7 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -64,9 +64,9 @@ <h1>Library</h1>
         <input
           type="submit"
           value="Submit"
+          id="submitBtn"
           class="btn btn-primary"
-          onclick="submit();"
-        />
+          />
       </div>
     </div>
 

From 93b80f9b320606c9fd912672a086f949c3e599a4 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 19:17:48 +0100
Subject: [PATCH 31/39] Add id to tbody for dynamic content handling

---
 debugging/book-library/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 5f9f6bef7..6349081f8 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -80,7 +80,7 @@ <h1>Library</h1>
           <th></th>
         </tr>
       </thead>
-      <tbody>
+      <tbody id="tableBody">
         <tr>
           <td></td>
           <td></td>

From 605d91cf3a49e341f35b8689e3624bf7e1a6f4a9 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 19:20:44 +0100
Subject: [PATCH 32/39] Refactor render function to improve table rendering

Updated render function to clear tbody instead of the entire table. Fixed rendering issue by inserting rows into tbody.
---
 debugging/book-library/script.js | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 3ea23700f..311b3b07a 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -92,27 +92,16 @@ function Book(title, author, pages, check) {
 function render() {
   let table = document.getElementById("display");
 
-  //delete old table
-  table.innerHTML = "";
-
-  let thead = document.createElement("thead");
-  thead.className = "thead-dark";
-  thead.innerHTML = `
-    <tr>
-      <th>Title</th>
-      <th>Author</th>
-      <th>Number of Pages</th>
-      <th>Read</th>
-      <th></th>
-    </tr>
-  `;
-  table.appendChild(thead);
+  let tbodyElement = document.getElementById("tableBody");
+
+  // Clear existing rows inside tbody only
+  tbodyElement.innerHTML = "";
 
   // Date : 9/8/2026
   // Purpose : Fix the problem "1. Website loads but doesn't show any books"
   // Change : Missing ) → script stops executing → nothing renders and add back the closing ) to fix it    
   for (let i = 0; i < myLibrary.length; i++) {
-    let row = table.insertRow(-1);
+    let row = tbodyElement.insertRow(-1);
   
     let titleCell = row.insertCell(0);
     let authorCell = row.insertCell(1);

From 819ce95b3e0801161d8696ab8d2ec23dc4672c02 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 20:49:20 +0100
Subject: [PATCH 33/39] Implement form submission handling and bug fix

Added form submission handling to prevent page reload and clear inputs after submission. Fixed bug where the title was incorrectly used as the author name.
---
 debugging/book-library/script.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 311b3b07a..d5e8fd365 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -3,6 +3,12 @@ const myLibrary = [];
 window.addEventListener("load", function (e) {
   populateStorage();
   render();
+
+  // Connect the form submit event listener
+  const formElement = document.getElementById("book-form");
+  if (formElement) {
+    formElement.addEventListener("submit", submit);
+  }  
 });
 
 function populateStorage() {
@@ -49,8 +55,12 @@ function createStatusContainer() {
 
 //check the right input from forms and if its ok -> add the new book (object in array)
 //via Book function and start render function
-function submit() {
-
+function submit(event) {
+  // Prevent form submission from reloading the page
+  if (event) {
+    event.preventDefault();
+  }
+  
   // Date : 9/8/2026
   // Purpose : Fix the problem "3. It uses the title name as the author name"
   // Change : replace the second title with author.value to fix the bug 
@@ -78,6 +88,17 @@ function submit() {
   let book = new Book(titleValue, authorValue, pagesValue, checkElement.checked);
 
   myLibrary.push(book);
+    // Clear inputs on successful submit
+  if (event && event.target) {
+    event.target.reset();
+  } else {
+    titleElement.value = "";
+    authorElement.value = "";
+    pagesElement.value = "";
+    checkElement.checked = false;
+  }
+
+  displayStatusMessage(`Added "${titleValue}" to your library!`, false);
   render();
   
 }

From 7b28a181317aecc981fd21b06c8d12d4daa393e1 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Tue, 11 Aug 2026 20:51:40 +0100
Subject: [PATCH 34/39] Add book form to index.html

---
 debugging/book-library/index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 6349081f8..eb6a4411c 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -26,6 +26,7 @@ <h1>Library</h1>
     </button>
 
     <div id="demo" class="collapse">
+     <form id="book-form"> 
       <div class="form-group">
         <label for="title">Title:</label>
         <input
@@ -68,6 +69,7 @@ <h1>Library</h1>
           class="btn btn-primary"
           />
       </div>
+     </form>  
     </div>
 
     <table class="table" id="display">

From b005b9827df876482740f88334edbe56fc9d9717 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Wed, 12 Aug 2026 11:42:51 +0100
Subject: [PATCH 35/39] Simplify form reset after adding a book

Refactor form reset logic for better clarity.
---
 debugging/book-library/script.js | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index d5e8fd365..902680168 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -24,6 +24,7 @@ function populateStorage() {
   }
 }
 
+const formElement = document.getElementById("book-form");
 const titleElement = document.getElementById("title");
 const authorElement = document.getElementById("author");
 const pagesElement = document.getElementById("pages");
@@ -89,15 +90,8 @@ function submit(event) {
 
   myLibrary.push(book);
     // Clear inputs on successful submit
-  if (event && event.target) {
-    event.target.reset();
-  } else {
-    titleElement.value = "";
-    authorElement.value = "";
-    pagesElement.value = "";
-    checkElement.checked = false;
-  }
-
+  formElement.reset();
+  
   displayStatusMessage(`Added "${titleValue}" to your library!`, false);
   render();
   

From 9088445c32dcabf9cf08d913a4ef461e8e47c44f Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Wed, 12 Aug 2026 12:07:05 +0100
Subject: [PATCH 36/39] Refactor script.js to clean up comments and logic

Removed outdated comments and fixed variable naming issues.
---
 debugging/book-library/script.js | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 902680168..5d3ee10ac 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -15,11 +15,7 @@ function populateStorage() {
   if (myLibrary.length == 0) {
     let book1 = new Book("Robison Crusoe", "Daniel Defoe", 252, true);
     let book2 = new Book("The Old Man and the Sea","Ernest Hemingway",127,true);
-
-
-// Date : 9/8/2026
-// Purpose : Fix the problem "2. Error in console when you try to add a book"
-// Change : replace Librarty with the correct variable myLibrary    
+   
     myLibrary.push(book1, book2);
   }
 }
@@ -62,12 +58,9 @@ function submit(event) {
     event.preventDefault();
   }
   
-  // Date : 9/8/2026
-  // Purpose : Fix the problem "3. It uses the title name as the author name"
-  // Change : replace the second title with author.value to fix the bug 
-  let titleValue = titleElement.value.trim();
-  let authorValue = authorElement.value.trim();
-  let pagesValue = pagesElement.value.trim();
+  const titleValue = titleElement.value.trim();
+  const authorValue = authorElement.value.trim();
+  const pagesValue = pagesElement.value.trim();
 
   displayStatusMessage("");
   
@@ -112,9 +105,7 @@ function render() {
   // Clear existing rows inside tbody only
   tbodyElement.innerHTML = "";
 
-  // Date : 9/8/2026
-  // Purpose : Fix the problem "1. Website loads but doesn't show any books"
-  // Change : Missing ) → script stops executing → nothing renders and add back the closing ) to fix it    
+  
   for (let i = 0; i < myLibrary.length; i++) {
     let row = tbodyElement.insertRow(-1);
   
@@ -132,9 +123,7 @@ function render() {
     let changeBut = document.createElement("button");
     changeBut.className = "btn btn-success";
 
-    // Date : 9/8/2026
-    // Purpose : Fix the problem "5. When I add a book that I say I've read - it saves the wrong answer"
-    // Change : Correct the logic - if check == true, that means the book was read, so it should show Yes.
+
     changeBut.innerText = myLibrary[i].check ? "Yes" : "No";
     changeBut.addEventListener("click", () => {
       myLibrary[i].check = !myLibrary[i].check;
@@ -144,9 +133,6 @@ function render() {
 
     //add delete button to every row and render again
     let delButton = document.createElement("button");
-    // Date : 9/8/2026
-    // Purpose : Fix the problem "4. Delete button is broken"
-    // Change : Fix the incorrect nanmes "delBut" button and "clicks" event to the correct one "delButton" and "click" respectively     
     delButton.className = "btn btn-warning";
     delButton.innerText = "Delete";
     delButton.addEventListener("click", () => {

From 75327b70ff96d66d28f38a83df0f9e8126cea25a Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Wed, 12 Aug 2026 13:25:44 +0100
Subject: [PATCH 37/39] Refactor pages input validation and conversion

Updated pages value handling to ensure it is a positive integer.
---
 debugging/book-library/script.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 5d3ee10ac..d5e296846 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -27,7 +27,7 @@ const pagesElement = document.getElementById("pages");
 const checkElement = document.getElementById("check");
 
 const submitBtn = document.getElementById("submitBtn");
-submitBtn.addEventListener("click", submit);
+
 
 
 // Helper function to display messages to the user in the UI
@@ -73,13 +73,17 @@ function submit(event) {
     return;
   }
 
-  const positiveIntegerRegex = /^[1-9]\d*$/;
-  if (!positiveIntegerRegex.test(pagesValue)) {
+
+// Convert to Number
+  const pagesNum = Number(pagesValue);
+
+  // Check if it's a valid positive integer
+  if (!Number.isInteger(pagesNum) || pagesNum <= 0) {
     displayStatusMessage("Pages must be a positive whole number!", true);
     return;
   }
   
-  let book = new Book(titleValue, authorValue, pagesValue, checkElement.checked);
+  let book = new Book(titleValue, authorValue, pagesNum, checkElement.checked);
 
   myLibrary.push(book);
     // Clear inputs on successful submit

From ba9ac926300470c667dc08a7cabc35e27b1d32cc Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Wed, 12 Aug 2026 14:29:03 +0100
Subject: [PATCH 38/39] Change innerHTML to textContent for safety

---
 debugging/book-library/script.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index d5e296846..897c54aed 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -119,9 +119,9 @@ function render() {
     let wasReadCell = row.insertCell(3);
     let deleteCell = row.insertCell(4);
     
-    titleCell.innerHTML = myLibrary[i].title;
-    authorCell.innerHTML = myLibrary[i].author;
-    pagesCell.innerHTML = myLibrary[i].pages;
+    titleCell.textContent = myLibrary[i].title;
+    authorCell.textContent = myLibrary[i].author;
+    pagesCell.textContent = myLibrary[i].pages;
 
     //add and wait for action for read/unread button
     let changeBut = document.createElement("button");

From cb3816f562bded8ec8428e78f43ba002e1340a22 Mon Sep 17 00:00:00 2001
From: cywong <zenobiatony@gmail.com>
Date: Wed, 12 Aug 2026 14:30:36 +0100
Subject: [PATCH 39/39] Remove unused submit button element

---
 debugging/book-library/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 897c54aed..784f7e181 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -26,7 +26,7 @@ const authorElement = document.getElementById("author");
 const pagesElement = document.getElementById("pages");
 const checkElement = document.getElementById("check");
 
-const submitBtn = document.getElementById("submitBtn");
+