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/26] 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 75ce6c1d..eed706fd 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/26] 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 eed706fd..9b732fc6 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/26] 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 9b732fc6..4bc162f0 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/26] 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 4bc162f0..27b545d3 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/26] 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 27b545d3..5324e409 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/26] 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 5324e409..6211cc13 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/26] 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 6211cc13..10f7fb01 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/26] 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 10f7fb01..8bcf3ac6 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/26] 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 8bcf3ac6..28030746 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/26] 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 28030746..18646bc9 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/26] 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 18646bc9..8b576e78 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/26] 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 8b576e78..59e7d841 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/26] 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 59e7d841..55adf2df 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/26] 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 55adf2df..f9ec27c0 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/26] 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 f9ec27c0..37e88a20 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/26] 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 23acfa71..806604ac 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/26] 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 37e88a20..c8fc4231 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/26] 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 c8fc4231..f89642aa 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/26] 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 f89642aa..722abf82 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/26] 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 722abf82..0a232c6b 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/26] 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 0a232c6b..0fda6207 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/26] 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 0fda6207..df576678 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/26] 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 df576678..e54410c1 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/26] 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 806604ac..77065369 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/26] 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 e54410c1..6f61a41b 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/26] 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 6f61a41b..de5b64ce 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();