From b509ba6209e37f6c7ce322f0e42641214bf39976 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 21:37:30 +0100
Subject: [PATCH 01/18] Fix syntax error in render() loop causing books not to
 display

---
 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 1d11a8d800df40f6c323e534e3502b8ec795a2bf Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 21:41:47 +0100
Subject: [PATCH 02/18] Replace delBut with delButton to fix render loop error

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

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

From fd745e3bd62b68fde62bf9f8c7b52303e4a29114 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 21:47:37 +0100
Subject: [PATCH 03/18] Fix submit() error by pushing new books into myLibrary
 instead of undefined library

---
 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 24c2d3a0..161b5867 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 448d062e833d8b8fcca319cb3a82d1425b5240c2 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 21:57:14 +0100
Subject: [PATCH 04/18] Change title.value to author.value in submit() to fix
 the author displayed on the page

---
 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 161b5867..b2a942be 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 b01e1724ad20d014717738c7fd258147f988381e Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 22:06:44 +0100
Subject: [PATCH 05/18] Change readStatus condition to show Yes when check is
 true

---
 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 b2a942be..7e845516 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 9d76dc4f4a5fa2c489ad2612de786b0268ed8dad Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 22:16:44 +0100
Subject: [PATCH 06/18] Insert table rows at the bottom using -1

---
 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 7e845516..a1120200 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 1b88d9bd4a48ac0a9fe08c068b3417ad7543db52 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 22:18:51 +0100
Subject: [PATCH 07/18] Remove unnecessary delete button ID

---
 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 a1120200..6dbc66ac 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -90,7 +90,6 @@ function render() {
 
     //add delete button to every row and render again
     let delButton = document.createElement("button");
-    delButton.id = i + 5;
     deleteCell.appendChild(delButton);
     delButton.className = "btn btn-warning";
     delButton.innerHTML = "Delete";

From 644d8aa04e0862962005399c9e4564cae222e62a Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 22:37:48 +0100
Subject: [PATCH 08/18] Reset form fields and hide the form after submitting a
 book

---
 debugging/book-library/index.html | 4 ++--
 debugging/book-library/script.js  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 23acfa71..6abc3b8b 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title> </title>
@@ -65,7 +65,7 @@ <h1>Library</h1>
           type="submit"
           value="Submit"
           class="btn btn-primary"
-          onclick="submit();"
+          onclick="submit()"
         />
       </div>
     </div>
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 6dbc66ac..c956196d 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -40,6 +40,11 @@ function submit() {
     let book = new Book(title.value, author.value, pages.value, check.checked);
     myLibrary.push(book);
     render();
+    title.value = "";
+    author.value = "";
+    pages.value = "";
+    check.checked = false;
+    $("#demo").collapse("hide");
   }
 }
 

From f7cf6c63856ed5e565a280843847de32ddbf81c1 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 22:48:48 +0100
Subject: [PATCH 09/18] Update validation to check all inputs

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

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index c956196d..4a6952e5 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -29,10 +29,11 @@ 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 == ""
+    author.value == "" ||
+    pages.value == "" ||
+    isNaN(pages.value) ||
+    Number(pages.value) <= 0
   ) {
     alert("Please fill all fields!");
     return false;

From 68c432064866748057d32520bd79a8b64b9cdbce Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Wed, 5 Aug 2026 22:55:51 +0100
Subject: [PATCH 10/18] Add validation to prevent negative page numbers

---
 debugging/book-library/script.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 4a6952e5..f41cbbc0 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -28,15 +28,13 @@ 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() {
-  if (
-    title.value == "" ||
-    author.value == "" ||
-    pages.value == "" ||
-    isNaN(pages.value) ||
-    Number(pages.value) <= 0
-  ) {
+  if (title.value == "" || author.value == "" || pages.value == "") {
     alert("Please fill all fields!");
     return false;
+  }
+  if (isNaN(pages.value) || Number(pages.value) <= 0) {
+    alert("Pages must be a positive number!");
+    return false;
   } else {
     let book = new Book(title.value, author.value, pages.value, check.checked);
     myLibrary.push(book);

From 46dbd786d6df8adb918af17adb2ee06b8f97d003 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Thu, 6 Aug 2026 09:04:32 +0100
Subject: [PATCH 11/18] Improved index.html

---
 debugging/book-library/index.html | 28 +++++++++-------------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 6abc3b8b..caea8fcf 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title> </title>
+    <title>Book Library</title>
     <meta
       charset="utf-8"
       name="viewport"
@@ -31,19 +31,21 @@ <h1>Library</h1>
       <div class="form-group">
         <label for="title">Title:</label>
         <input
-          type="title"
+          type="text"
           class="form-control"
           id="title"
           name="title"
           required
+          minlength="1"
         />
         <label for="author">Author: </label>
         <input
-          type="author"
+          type="text"
           class="form-control"
           id="author"
           name="author"
           required
+          minlength="1"
         />
         <label for="pages">Pages:</label>
         <input
@@ -52,14 +54,10 @@ <h1>Library</h1>
           id="pages"
           name="pages"
           required
+          min="1"
         />
         <label class="form-check-label">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="check"
-            value=""
-          />Read
+          <input type="checkbox" class="form-check-input" id="check" />Read
         </label>
         <input
           type="submit"
@@ -80,17 +78,9 @@ <h1>Library</h1>
           <th></th>
         </tr>
       </thead>
-      <tbody>
-        <tr>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
-      </tbody>
+      <tbody></tbody>
     </table>
 
-    <script src="script.js"></script>
+    <script src="script.js" type="module"></script>
   </body>
 </html>

From 368ff9f68188f50c7686e886f6351ed57aaa39c7 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Thu, 6 Aug 2026 10:15:29 +0100
Subject: [PATCH 12/18] updated index.html

---
 debugging/book-library/index.html | 28 +++++++++-------------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 6abc3b8b..caea8fcf 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title> </title>
+    <title>Book Library</title>
     <meta
       charset="utf-8"
       name="viewport"
@@ -31,19 +31,21 @@ <h1>Library</h1>
       <div class="form-group">
         <label for="title">Title:</label>
         <input
-          type="title"
+          type="text"
           class="form-control"
           id="title"
           name="title"
           required
+          minlength="1"
         />
         <label for="author">Author: </label>
         <input
-          type="author"
+          type="text"
           class="form-control"
           id="author"
           name="author"
           required
+          minlength="1"
         />
         <label for="pages">Pages:</label>
         <input
@@ -52,14 +54,10 @@ <h1>Library</h1>
           id="pages"
           name="pages"
           required
+          min="1"
         />
         <label class="form-check-label">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="check"
-            value=""
-          />Read
+          <input type="checkbox" class="form-check-input" id="check" />Read
         </label>
         <input
           type="submit"
@@ -80,17 +78,9 @@ <h1>Library</h1>
           <th></th>
         </tr>
       </thead>
-      <tbody>
-        <tr>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
-      </tbody>
+      <tbody></tbody>
     </table>
 
-    <script src="script.js"></script>
+    <script src="script.js" type="module"></script>
   </body>
 </html>

From 8f09153d09e4df47e00840485b26369976dc1766 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Thu, 6 Aug 2026 11:24:31 +0100
Subject: [PATCH 13/18] Improved script.js

---
 debugging/book-library/script.js | 88 +++++++++++++++++---------------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index f41cbbc0..27031971 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -2,7 +2,6 @@ let myLibrary = [];
 
 window.addEventListener("load", function (e) {
   populateStorage();
-  render();
 });
 
 function populateStorage() {
@@ -20,29 +19,42 @@ function populateStorage() {
   }
 }
 
-const title = document.getElementById("title");
-const author = document.getElementById("author");
-const pages = document.getElementById("pages");
-const check = document.getElementById("check");
+const titleInput = document.getElementById("title");
+const authorInput = document.getElementById("author");
+const pagesInput = document.getElementById("pages");
+const checkInput = 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() {
-  if (title.value == "" || author.value == "" || pages.value == "") {
+  const titleValue = titleInput.value.trim();
+  const authorValue = authorInput.value.trim();
+  const pagesValue = Number(pagesInput.value);
+  if (
+    titleValue === "" ||
+    authorValue === "" ||
+    pagesInput.value.trim() === ""
+  ) {
     alert("Please fill all fields!");
     return false;
   }
-  if (isNaN(pages.value) || Number(pages.value) <= 0) {
+
+  if (isNaN(pagesValue) || pagesValue <= 0) {
     alert("Pages must be a positive number!");
     return false;
   } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
+    const book = new Book(
+      titleValue,
+      authorValue,
+      pagesValue,
+      checkInput.checked
+    );
     myLibrary.push(book);
     render();
-    title.value = "";
-    author.value = "";
-    pages.value = "";
-    check.checked = false;
+    titleInput.value = "";
+    authorInput.value = "";
+    pagesInput.value = "";
+    checkInput.checked = false;
     $("#demo").collapse("hide");
   }
 }
@@ -55,52 +67,46 @@ function Book(title, author, pages, check) {
 }
 
 function render() {
-  let table = document.getElementById("display");
-  let rowsNumber = table.rows.length;
+  const table = document.getElementById("display");
+  const rowsNumber = table.rows.length;
   //delete old table
   for (let n = rowsNumber - 1; n > 0; n--) {
     table.deleteRow(n);
   }
   //insert updated row and cells
-  let length = myLibrary.length;
+  const length = myLibrary.length;
   for (let i = 0; i < 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;
+    const row = table.insertRow(-1);
+    const titleCell = row.insertCell(0);
+    const authorCell = row.insertCell(1);
+    const pagesCell = row.insertCell(2);
+    const wasReadCell = row.insertCell(3);
+    const deleteCell = row.insertCell(4);
+    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");
-    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;
+    const toggleReadBtn = document.createElement("button");
+    toggleReadBtn.className = "btn btn-success";
+    wasReadCell.appendChild(toggleReadBtn);
+    toggleReadBtn.textContent = myLibrary[i].check ? "Yes" : "No";
 
-    changeBut.addEventListener("click", function () {
+    toggleReadBtn.addEventListener("click", function () {
       myLibrary[i].check = !myLibrary[i].check;
       render();
     });
 
     //add delete button to every row and render again
-    let delButton = document.createElement("button");
-    deleteCell.appendChild(delButton);
-    delButton.className = "btn btn-warning";
-    delButton.innerHTML = "Delete";
-    delButton.addEventListener("click", function () {
+    const DeleteBtn = document.createElement("button");
+    deleteCell.appendChild(DeleteBtn);
+    DeleteBtn.className = "btn btn-warning";
+    DeleteBtn.textContent = "Delete";
+    DeleteBtn.addEventListener("click", function () {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);
       render();
     });
   }
 }
+window.submit = submit;

From b8d330c4f82acfe6a1481bb12c989b565a245d3f Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Thu, 6 Aug 2026 12:03:30 +0100
Subject: [PATCH 14/18] Replace alert with dynamic success message after delete

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

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 27031971..666459b5 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -103,9 +103,14 @@ function render() {
     DeleteBtn.className = "btn btn-warning";
     DeleteBtn.textContent = "Delete";
     DeleteBtn.addEventListener("click", function () {
-      alert(`You've deleted title: ${myLibrary[i].title}`);
+      const deletedTitle = myLibrary[i].title;
       myLibrary.splice(i, 1);
       render();
+      const msg = document.createElement("div");
+      msg.className = "alert alert-success";
+      msg.textContent = `You've deleted title: ${deletedTitle}`;
+      document.body.prepend(msg);
+      setTimeout(() => msg.remove(), 3000);
     });
   }
 }

From 46975be9264aa6b0a5e9096e332e11885f2ee197 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Thu, 6 Aug 2026 12:41:27 +0100
Subject: [PATCH 15/18] update string to number

---
 debugging/book-library/script.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 666459b5..1901ab5d 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -6,11 +6,11 @@ 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",
+      127,
       true
     );
     myLibrary.push(book1);
@@ -68,11 +68,9 @@ function Book(title, author, pages, check) {
 
 function render() {
   const table = document.getElementById("display");
-  const rowsNumber = table.rows.length;
-  //delete old table
-  for (let n = rowsNumber - 1; n > 0; n--) {
-    table.deleteRow(n);
-  }
+
+  table.tBodies[0].innerHTML = "";
+
   //insert updated row and cells
   const length = myLibrary.length;
   for (let i = 0; i < length; i++) {

From ca75bda8319db9a2e4dec5ddb939f83f52602817 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Fri, 7 Aug 2026 08:49:31 +0100
Subject: [PATCH 16/18] Add step="1" to accept only whole number

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

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index caea8fcf..81cf5194 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -55,6 +55,7 @@ <h1>Library</h1>
           name="pages"
           required
           min="1"
+          step="1"
         />
         <label class="form-check-label">
           <input type="checkbox" class="form-check-input" id="check" />Read

From 683a060d6b5efb00ac492210063951c4e2f0bede Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Fri, 7 Aug 2026 09:41:59 +0100
Subject: [PATCH 17/18] refactor code

---
 debugging/book-library/index.html | 80 ++++++++++++++++---------------
 debugging/book-library/script.js  | 26 ++++------
 2 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 81cf5194..d44890e5 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -28,45 +28,47 @@ <h1>Library</h1>
     </button>
 
     <div id="demo" class="collapse">
-      <div class="form-group">
-        <label for="title">Title:</label>
-        <input
-          type="text"
-          class="form-control"
-          id="title"
-          name="title"
-          required
-          minlength="1"
-        />
-        <label for="author">Author: </label>
-        <input
-          type="text"
-          class="form-control"
-          id="author"
-          name="author"
-          required
-          minlength="1"
-        />
-        <label for="pages">Pages:</label>
-        <input
-          type="number"
-          class="form-control"
-          id="pages"
-          name="pages"
-          required
-          min="1"
-          step="1"
-        />
-        <label class="form-check-label">
-          <input type="checkbox" class="form-check-input" id="check" />Read
-        </label>
-        <input
-          type="submit"
-          value="Submit"
-          class="btn btn-primary"
-          onclick="submit()"
-        />
-      </div>
+      <form id="bookForm">
+        <div class="form-group">
+          <label for="title">Title:</label>
+          <input
+            type="text"
+            class="form-control"
+            id="title"
+            name="title"
+            required
+            minlength="1"
+          />
+          <label for="author">Author: </label>
+          <input
+            type="text"
+            class="form-control"
+            id="author"
+            name="author"
+            required
+            minlength="1"
+          />
+          <label for="pages">Pages:</label>
+          <input
+            type="number"
+            class="form-control"
+            id="pages"
+            name="pages"
+            required
+            min="1"
+            step="1"
+          />
+          <label class="form-check-label">
+            <input type="checkbox" class="form-check-input" id="check" />Read
+          </label>
+          <input
+            type="submit"
+            value="Submit"
+            class="btn btn-primary"
+            id="submitBtn"
+          />
+        </div>
+      </form>
     </div>
 
     <table class="table" id="display">
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 1901ab5d..cd245ef3 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -26,15 +26,13 @@ const checkInput = 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() {
+document.getElementById("submitBtn").addEventListener("click", submit);
+function submit(event) {
+  event.preventDefault();
   const titleValue = titleInput.value.trim();
   const authorValue = authorInput.value.trim();
   const pagesValue = Number(pagesInput.value);
-  if (
-    titleValue === "" ||
-    authorValue === "" ||
-    pagesInput.value.trim() === ""
-  ) {
+  if (titleValue === "" || authorValue === "" || pagesValue <= 0) {
     alert("Please fill all fields!");
     return false;
   }
@@ -51,10 +49,7 @@ function submit() {
     );
     myLibrary.push(book);
     render();
-    titleInput.value = "";
-    authorInput.value = "";
-    pagesInput.value = "";
-    checkInput.checked = false;
+    document.getElementById("bookForm").reset();
     $("#demo").collapse("hide");
   }
 }
@@ -96,11 +91,11 @@ function render() {
     });
 
     //add delete button to every row and render again
-    const DeleteBtn = document.createElement("button");
-    deleteCell.appendChild(DeleteBtn);
-    DeleteBtn.className = "btn btn-warning";
-    DeleteBtn.textContent = "Delete";
-    DeleteBtn.addEventListener("click", function () {
+    const deleteBtn = document.createElement("button");
+    deleteCell.appendChild(deleteBtn);
+    deleteBtn.className = "btn btn-warning";
+    deleteBtn.textContent = "Delete";
+    deleteBtn.addEventListener("click", function () {
       const deletedTitle = myLibrary[i].title;
       myLibrary.splice(i, 1);
       render();
@@ -112,4 +107,3 @@ function render() {
     });
   }
 }
-window.submit = submit;

From 3e99dee7cb64706eb9aee36c37a34305be27a962 Mon Sep 17 00:00:00 2001
From: Niangh Ciang <cciang462@gmail.com>
Date: Fri, 7 Aug 2026 10:15:50 +0100
Subject: [PATCH 18/18] update validation and render function

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

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index cd245ef3..92118b56 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -32,14 +32,14 @@ function submit(event) {
   const titleValue = titleInput.value.trim();
   const authorValue = authorInput.value.trim();
   const pagesValue = Number(pagesInput.value);
-  if (titleValue === "" || authorValue === "" || pagesValue <= 0) {
+  if (!titleValue || !authorValue) {
     alert("Please fill all fields!");
-    return false;
+    return;
   }
 
-  if (isNaN(pagesValue) || pagesValue <= 0) {
-    alert("Pages must be a positive number!");
-    return false;
+  if (!pagesValue || isNaN(pagesValue) || pagesValue <= 0) {
+    alert("Enter a valid page number");
+    return;
   } else {
     const book = new Book(
       titleValue,
@@ -62,14 +62,12 @@ function Book(title, author, pages, check) {
 }
 
 function render() {
-  const table = document.getElementById("display");
-
-  table.tBodies[0].innerHTML = "";
+  const tableBody = document.querySelector("#display tbody");
 
+  tableBody.innerHTML = "";
   //insert updated row and cells
-  const length = myLibrary.length;
-  for (let i = 0; i < length; i++) {
-    const row = table.insertRow(-1);
+  myLibrary.forEach((book, i) => {
+    const row = tableBody.insertRow();
     const titleCell = row.insertCell(0);
     const authorCell = row.insertCell(1);
     const pagesCell = row.insertCell(2);
@@ -105,5 +103,5 @@ function render() {
       document.body.prepend(msg);
       setTimeout(() => msg.remove(), 3000);
     });
-  }
+  });
 }