From e2bf4443d027a9648c6eee3208f0288fc886573e Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Tue, 9 Dec 2025 12:33:46 +0000
Subject: [PATCH 01/23] Fix syntax error in for-loop (line 57) that blocked
 book list from rendering

---
 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 c39e375cd8909a1ae22a982d56b4ba00b1d71715 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Tue, 9 Dec 2025 12:51:23 +0000
Subject: [PATCH 02/23] Fix: rename delButton to delBut and correct event to
 'click' to enable delete action

---
 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 eed706fd..2b99c821 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -89,12 +89,12 @@ function render() {
     });
 
     //add delete button to every row and render again
-    let delButton = document.createElement("button");
+    let delBut = document.createElement("button");
     delBut.id = i + 5;
     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 c7941740026a0a01926246297014e96737c7dfa9 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Tue, 9 Dec 2025 12:58:57 +0000
Subject: [PATCH 03/23] Rename library to myLibrary in submit() so new books
 are added to the array

---
 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 2b99c821..03b671e7 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 436136be7ca818558e69d912449c750a5c2fb0a2 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Tue, 9 Dec 2025 13:05:19 +0000
Subject: [PATCH 04/23] fix: use author.value for author field when creating a
 new Book (line 40)

---
 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 03b671e7..78525521 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 dccb8a549746c00e37e7492745fdab2e880a6626 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Tue, 9 Dec 2025 13:16:15 +0000
Subject: [PATCH 05/23] =?UTF-8?q?fix(render):=20correct=20read=20status=20?=
 =?UTF-8?q?display=20so=20checked=3Dtrue=20shows=20=E2=80=9CYes=E2=80=9D?=
 =?UTF-8?q?=20and=20unchecked=20shows=20=E2=80=9CNo=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 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 78525521..098c74ec 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -77,9 +77,9 @@ function render() {
     wasReadCell.appendChild(changeBut);
     let readStatus = "";
     if (myLibrary[i].check == false) {
-      readStatus = "Yes";
-    } else {
       readStatus = "No";
+    } else {
+      readStatus = "Yes";
     }
     changeBut.innerText = readStatus;
 

From 07c662073ffe06580858d4ed434f05c26084987d Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Tue, 9 Dec 2025 13:20:25 +0000
Subject: [PATCH 06/23] Remove redundant render() call in populateStorage (line
 19) to avoid double render on load

---
 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 098c74ec..98f70323 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -16,7 +16,6 @@ function populateStorage() {
     );
     myLibrary.push(book1);
     myLibrary.push(book2);
-    render();
   }
 }
 

From 085a3736e498ec53a33e7587175d81b9c95f4251 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 11:47:44 +0000
Subject: [PATCH 07/23] Remove placeholder table row <tr> from <tbody> to allow
 render() to manage all rows

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

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 23acfa71..20327e5d 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>
@@ -80,15 +80,7 @@ <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>

From 4bf7b318c39db67ea46d09ae0a0d55596927230b Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 11:52:13 +0000
Subject: [PATCH 08/23] Fix invalid HTML input types by changing <input
 type="title"/> and <input type="author"/> to type="text"

---
 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 20327e5d..2e4806e5 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -31,7 +31,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 +39,7 @@ <h1>Library</h1>
         />
         <label for="author">Author: </label>
         <input
-          type="author"
+          type="text"
           class="form-control"
           id="author"
           name="author"

From d9870cf3558f5d9455cee8de9984f564a07aa8c2 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 12:02:10 +0000
Subject: [PATCH 09/23] Switch script.js to type="module", remove inline
 onclick="submit()", add proper addEventListener on submit button to avoid
 global scope usage and ensure modern JS practices

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

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 2e4806e5..f8bd65f7 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -61,12 +61,7 @@ <h1>Library</h1>
             value=""
           />Read
         </label>
-        <input
-          type="submit"
-          value="Submit"
-          class="btn btn-primary"
-          onclick="submit()"
-        />
+        <input type="submit" value="Submit" class="btn btn-primary" id="submitBtn" />
       </div>
     </div>
 
@@ -83,6 +78,6 @@ <h1>Library</h1>
       <tbody></tbody>
     </table>
 
-    <script src="script.js"></script>
+    <script src="script.js" type="module"></script>
   </body>
 </html>
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 98f70323..df7a79db 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -3,6 +3,9 @@ let myLibrary = [];
 window.addEventListener("load", function (e) {
   populateStorage();
   render();
+
+  // Attach submit listener
+  document.getElementById("submitBtn").addEventListener("click", submit);
 });
 
 function populateStorage() {

From 3acd315efd45981f5911851329428f52f62d5835 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 12:16:18 +0000
Subject: [PATCH 10/23] Add id="submitBtn" to the submit button to enable
 attaching an event listener in script.js

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

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index f8bd65f7..e48faa18 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -61,7 +61,12 @@ <h1>Library</h1>
             value=""
           />Read
         </label>
-        <input type="submit" value="Submit" class="btn btn-primary" id="submitBtn" />
+        <input
+          type="submit"
+          value="Submit"
+          class="btn btn-primary"
+          id="submitBtn"
+        />
       </div>
     </div>
 

From dae6c8521bbbb30974f4c7163846c80f3d6f300a Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 12:16:44 +0000
Subject: [PATCH 11/23] Refactor code to remove redundant null checks on input
 values, ensure page count is stored consistently as a number, and remove
 unused id attributes from dynamically created buttons

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

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index df7a79db..6e179196 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -10,11 +10,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);
@@ -30,16 +30,16 @@ 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 == null ||
-    title.value == "" ||
-    pages.value == null ||
-    pages.value == ""
-  ) {
+  if (title.value.trim() === "" || pages.value.trim() === "") {
     alert("Please fill all fields!");
     return false;
   } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
+    let book = new Book(
+      title.value.trim(),
+      author.value.trim(),
+      Number(pages.value),
+      check.checked
+    );
     myLibrary.push(book);
     render();
   }
@@ -74,7 +74,7 @@ function render() {
 
     //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 = "";
@@ -92,7 +92,7 @@ function render() {
 
     //add delete button to every row and render again
     let delBut = document.createElement("button");
-    delBut.id = i + 5;
+
     deleteCell.appendChild(delBut);
     delBut.className = "btn btn-warning";
     delBut.innerHTML = "Delete";

From a6619ba0c4a43137b6cf6585faa57017b8e14242 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 12:28:20 +0000
Subject: [PATCH 12/23] Refactor variable names for clarity: DOM inputs now use
 descriptive names (titleInput, authorInput, pagesInput, readCheckbox) to
 avoid confusion with Book object properties

---
 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 6e179196..97e2fa3f 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -22,23 +22,23 @@ 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 readCheckbox = 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.trim() === "" || pages.value.trim() === "") {
+  if (titleInput.value.trim() === "" || pagesInput.value.trim() === "") {
     alert("Please fill all fields!");
     return false;
   } else {
     let book = new Book(
-      title.value.trim(),
-      author.value.trim(),
-      Number(pages.value),
-      check.checked
+      titleInput.value.trim(),
+      authorInput.value.trim(),
+      Number(pagesInput.value),
+      readCheckbox.checked
     );
     myLibrary.push(book);
     render();

From d4135669c28cae816760a7ce366accc86805a570 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 12:54:24 +0000
Subject: [PATCH 13/23] fix(js): add full input validation for author and page
 count

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

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 97e2fa3f..429c9f89 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -30,19 +30,26 @@ const readCheckbox = 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 (titleInput.value.trim() === "" || pagesInput.value.trim() === "") {
-    alert("Please fill all fields!");
-    return false;
-  } else {
-    let book = new Book(
-      titleInput.value.trim(),
-      authorInput.value.trim(),
-      Number(pagesInput.value),
-      readCheckbox.checked
-    );
-    myLibrary.push(book);
-    render();
+  const title = titleInput.value.trim();
+  const author = authorInput.value.trim();
+  const pages = Number(pagesInput.value);
+
+  // Validate title and author
+  if (title === "" || author === "") {
+    alert("Title and author cannot be empty.");
+    return;
+  }
+
+  // Validate pages
+  if (Number.isNaN(pages) || pages <= 0) {
+    alert("Pages must be a positive number.");
+    return;
   }
+
+  // Create and add book
+  let book = new Book(title, author, pages, readCheckbox.checked);
+  myLibrary.push(book);
+  render();
 }
 
 function Book(title, author, pages, check) {

From c78415368ab2a0a4112b6fbbb17ddb00a7e4fd91 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 13:01:11 +0000
Subject: [PATCH 14/23] refactor(js): optimize table clearing using
 tbody.innerHTML

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

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 429c9f89..4d9d53d4 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -61,11 +61,10 @@ function Book(title, author, pages, check) {
 
 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);
-  }
+
+  // Efficiently clear old tables
+  table.tBodies[0].innerHTML = "";
+
   //insert updated row and cells
   let length = myLibrary.length;
   for (let i = 0; i < length; i++) {

From 4757d2f6a88677d886b2fcc4703de23136afcb79 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 14:06:35 +0000
Subject: [PATCH 15/23] Clear rows via tbody.innerHTML to preserve header and
 speed up re-render

- Replace per-row deletion with a single tbody.innerHTML = "" operation
- Preserves the thead header and reduces DOM work during updates
- No functional UI changes; improves performance on larger lists
---
 debugging/book-library/script.js | 58 ++++++++++++++------------------
 1 file changed, 26 insertions(+), 32 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 4d9d53d4..b8557ae6 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -60,52 +60,46 @@ function Book(title, author, pages, check) {
 }
 
 function render() {
-  let table = document.getElementById("display");
+  const table = document.getElementById("display");
+  const tbody = table.tBodies[0] || table.createTBody();
 
-  // Efficiently clear old tables
-  table.tBodies[0].innerHTML = "";
+  // Clear all data rows while preserving the header
+  tbody.innerHTML = "";
 
-  //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;
-
-    //add and wait for action for read/unread button
-    let changeBut = document.createElement("button");
+    const book = myLibrary[i];
+    const row = tbody.insertRow();
 
-    changeBut.className = "btn btn-success";
-    wasReadCell.appendChild(changeBut);
-    let readStatus = "";
-    if (myLibrary[i].check == false) {
-      readStatus = "No";
-    } else {
-      readStatus = "Yes";
-    }
-    changeBut.innerText = readStatus;
+    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 = book.title;
+    authorCell.textContent = book.author;
+    pagesCell.textContent = book.pages;
+
+    // Read/unread toggle button
+    const changeBut = document.createElement("button");
+    changeBut.className = "btn btn-success";
+    changeBut.textContent = book.check ? "Yes" : "No";
     changeBut.addEventListener("click", function () {
       myLibrary[i].check = !myLibrary[i].check;
       render();
     });
+    wasReadCell.appendChild(changeBut);
 
-    //add delete button to every row and render again
-    let delBut = document.createElement("button");
-
-    deleteCell.appendChild(delBut);
+    // Delete button
+    const delBut = document.createElement("button");
     delBut.className = "btn btn-warning";
-    delBut.innerHTML = "Delete";
+    delBut.textContent = "Delete";
     delBut.addEventListener("click", function () {
-      alert(`You've deleted title: ${myLibrary[i].title}`);
+      alert(`You've deleted title: ${book.title}`);
       myLibrary.splice(i, 1);
       render();
     });
+    deleteCell.appendChild(delBut);
   }
 }

From 0a4c4aefc22989189ebcbe6d67c594f72222a68d Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 14:45:32 +0000
Subject: [PATCH 16/23] ux(delete): confirm before deletion and show
 non-blocking success alert

- Replace pre-delete alert with confirm dialog
- Delete immediately upon confirmation and re-render
- Display temporary success message that auto-fades without blocking UI
---
 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 b8557ae6..2a1352c8 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -27,6 +27,24 @@ const authorInput = document.getElementById("author");
 const pagesInput = document.getElementById("pages");
 const readCheckbox = document.getElementById("check");
 
+// Non-blocking success message (appears briefly and fades out)
+function showSuccess(message) {
+  const alertEl = document.createElement("div");
+  alertEl.className = "alert alert-success";
+  alertEl.textContent = message;
+  alertEl.style.position = "fixed";
+  alertEl.style.top = "1rem";
+  alertEl.style.right = "1rem";
+  alertEl.style.zIndex = "1050";
+  document.body.appendChild(alertEl);
+
+  setTimeout(() => {
+    alertEl.style.transition = "opacity 0.3s";
+    alertEl.style.opacity = "0";
+    setTimeout(() => alertEl.remove(), 300);
+  }, 2500);
+}
+
 //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() {
@@ -91,14 +109,16 @@ function render() {
     });
     wasReadCell.appendChild(changeBut);
 
-    // Delete button
+    // Delete button (confirm before deleting, then show non-blocking success)
     const delBut = document.createElement("button");
     delBut.className = "btn btn-warning";
     delBut.textContent = "Delete";
     delBut.addEventListener("click", function () {
-      alert(`You've deleted title: ${book.title}`);
-      myLibrary.splice(i, 1);
-      render();
+      if (confirm(`Are you sure you want to delete "${book.title}"?`)) {
+        myLibrary.splice(i, 1);
+        render();
+        showSuccess(`Deleted "${book.title}"`);
+      }
     });
     deleteCell.appendChild(delBut);
   }

From 757fcd3c1455e61a8645a994e4d382753b4a19be Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 14:49:15 +0000
Subject: [PATCH 17/23] =?UTF-8?q?Correct=20book=20title=20spelling=20from?=
 =?UTF-8?q?=20=E2=80=9CRobison=20Crusoe=E2=80=9D=20to=20=E2=80=9CRobinson?=
 =?UTF-8?q?=20Crusoe=E2=80=9D=20in=20populateStorage()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 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 2a1352c8..afa07d44 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -10,7 +10,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("Robinson Crusoe", "Daniel Defoe", 252, true);
     let book2 = new Book(
       "The Old Man and the Sea",
       "Ernest Hemingway",

From 2b98534ded68ecee831b21d3b8d8b477de36d247 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 15:02:40 +0000
Subject: [PATCH 18/23] Fix(form): prevent default submit to avoid page reload
 on Submit button click

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

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index afa07d44..6b6b320a 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -4,8 +4,14 @@ window.addEventListener("load", function (e) {
   populateStorage();
   render();
 
-  // Attach submit listener
-  document.getElementById("submitBtn").addEventListener("click", submit);
+  // Attach submit listener (prevent default form submission)
+  const submitBtn = document.getElementById("submitBtn");
+  if (submitBtn) {
+    submitBtn.addEventListener("click", function (evt) {
+      evt.preventDefault();
+      submit();
+    });
+  }
 });
 
 function populateStorage() {

From 63652a898a7ba4bff7e1265f01ff115cdce58477 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Wed, 10 Dec 2025 15:09:40 +0000
Subject: [PATCH 19/23] Chore(html): add lang, split meta tags, set meaningful
 title, and make Submit a button to pass W3C validation

---
 debugging/book-library/index.html | 51 +++++++++++++++++++------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index e48faa18..6680987c 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -1,15 +1,16 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
-    <title> </title>
-    <meta
-      charset="utf-8"
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
+    <meta charset="utf-8">
+    <title>Library — Add books to your virtual library</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Dependencies -->
     <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>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+
+    <!-- Styles -->
     <link
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -23,7 +24,7 @@ <h1>Library</h1>
       <p>Add books to your virtual library</p>
     </div>
 
-    <button data-toggle="collapse" data-target="#demo" class="btn btn-info">
+    <button data-toggle="collapse" data-target="#demo" class="btn btn-info" type="button">
       Add new book
     </button>
 
@@ -37,7 +38,8 @@ <h1>Library</h1>
           name="title"
           required
         />
-        <label for="author">Author: </label>
+
+        <label for="author">Author:</label>
         <input
           type="text"
           class="form-control"
@@ -45,28 +47,36 @@ <h1>Library</h1>
           name="author"
           required
         />
+
         <label for="pages">Pages:</label>
         <input
           type="number"
           class="form-control"
           id="pages"
           name="pages"
+          min="1"
+          step="1"
           required
         />
-        <label class="form-check-label">
+
+        <div class="form-check mt-2">
           <input
             type="checkbox"
             class="form-check-input"
             id="check"
-            value=""
-          />Read
-        </label>
-        <input
-          type="submit"
-          value="Submit"
-          class="btn btn-primary"
+            name="check"
+          />
+          <label class="form-check-label" for="check">Read</label>
+        </div>
+
+        <!-- Explicit type="button" to avoid default form submission -->
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
           id="submitBtn"
-        />
+        >
+          Submit
+        </button>
       </div>
     </div>
 
@@ -77,12 +87,13 @@ <h1>Library</h1>
           <th>Author</th>
           <th>Number of Pages</th>
           <th>Read</th>
-          <th></th>
+          <th>Actions</th>
         </tr>
       </thead>
       <tbody></tbody>
     </table>
 
+    <!-- Load script at end of body; modules are deferred automatically -->
     <script src="script.js" type="module"></script>
   </body>
-</html>
+</html>
\ No newline at end of file

From 7c28cc2ded24b179008df05f6f62239043530441 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Thu, 11 Dec 2025 10:01:18 +0000
Subject: [PATCH 20/23] Add #alerts container and move the dependency scripts
 to end of the body

---
 debugging/book-library/index.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 6680987c..ba9d6f44 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -5,11 +5,6 @@
     <title>Library — Add books to your virtual library</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- Dependencies -->
-    <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>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
-
     <!-- Styles -->
     <link
       rel="stylesheet"
@@ -93,7 +88,13 @@ <h1>Library</h1>
       <tbody></tbody>
     </table>
 
-    <!-- Load script at end of body; modules are deferred automatically -->
+    <!-- Designated notice container controlled via style.css -->
+    <div id="alerts" class="notice-root" role="status" aria-live="polite" aria-atomic="true"></div>
+
+    <!-- Scripts loaded at end of body -->
+    <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>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
     <script src="script.js" type="module"></script>
   </body>
 </html>
\ No newline at end of file

From 9526485a4f7c4cec6ab55c30cbf4ca28f0135152 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Thu, 11 Dec 2025 10:19:37 +0000
Subject: [PATCH 21/23] Fix indentation inconsistency in index.html

---
 debugging/book-library/index.html | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index ba9d6f44..6ebb8796 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Library — Add books to your virtual library</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Styles -->
     <link
@@ -19,7 +19,12 @@ <h1>Library</h1>
       <p>Add books to your virtual library</p>
     </div>
 
-    <button data-toggle="collapse" data-target="#demo" class="btn btn-info" type="button">
+    <button
+      data-toggle="collapse"
+      data-target="#demo"
+      class="btn btn-info"
+      type="button"
+    >
       Add new book
     </button>
 
@@ -65,11 +70,7 @@ <h1>Library</h1>
         </div>
 
         <!-- Explicit type="button" to avoid default form submission -->
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          id="submitBtn"
-        >
+        <button type="button" class="btn btn-primary mt-3" id="submitBtn">
           Submit
         </button>
       </div>
@@ -89,7 +90,13 @@ <h1>Library</h1>
     </table>
 
     <!-- Designated notice container controlled via style.css -->
-    <div id="alerts" class="notice-root" role="status" aria-live="polite" aria-atomic="true"></div>
+    <div
+      id="alerts"
+      class="notice-root"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    ></div>
 
     <!-- Scripts loaded at end of body -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
@@ -97,4 +104,4 @@ <h1>Library</h1>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
     <script src="script.js" type="module"></script>
   </body>
-</html>
\ No newline at end of file
+</html>

From 9c3c39f873be55b41349a0b5535ca03195e7913a Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Thu, 11 Dec 2025 10:31:32 +0000
Subject: [PATCH 22/23] refactor(notices): use #alerts container with CSS-only
 auto-hide; remove inline styles/timeouts

- Add dedicated notice container (#alerts) for controlled placement
- Move toast styling to CSS (.notice-root, .notice, .notice--auto-hide, keyframes)
- Update showSuccess to add classes and remove on animationend (no setTimeout)
- Keep existing behaviors (submit prevention, delete confirm, table re-render) intact
---
 debugging/book-library/script.js | 33 ++++++++++++++----------
 debugging/book-library/style.css | 44 ++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 6b6b320a..101ac0b7 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -15,7 +15,7 @@ window.addEventListener("load", function (e) {
 });
 
 function populateStorage() {
-  if (myLibrary.length == 0) {
+  if (myLibrary.length === 0) {
     let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
     let book2 = new Book(
       "The Old Man and the Sea",
@@ -33,22 +33,27 @@ const authorInput = document.getElementById("author");
 const pagesInput = document.getElementById("pages");
 const readCheckbox = document.getElementById("check");
 
-// Non-blocking success message (appears briefly and fades out)
+// Non-blocking success message using CSS animation; no inline styles, no setTimeout
 function showSuccess(message) {
+  const root = document.getElementById("alerts");
+  if (!root) return;
+
   const alertEl = document.createElement("div");
-  alertEl.className = "alert alert-success";
+  // Use Bootstrap alert styling + our notice classes
+  alertEl.className = "alert alert-success notice notice--auto-hide";
+  alertEl.setAttribute("role", "status");
   alertEl.textContent = message;
-  alertEl.style.position = "fixed";
-  alertEl.style.top = "1rem";
-  alertEl.style.right = "1rem";
-  alertEl.style.zIndex = "1050";
-  document.body.appendChild(alertEl);
-
-  setTimeout(() => {
-    alertEl.style.transition = "opacity 0.3s";
-    alertEl.style.opacity = "0";
-    setTimeout(() => alertEl.remove(), 300);
-  }, 2500);
+
+  // Remove the element after the CSS animation completes (no setTimeout)
+  alertEl.addEventListener(
+    "animationend",
+    () => {
+      alertEl.remove();
+    },
+    { once: true }
+  );
+
+  root.appendChild(alertEl);
 }
 
 //check the right input from forms and if its ok -> add the new book (object in array)
diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css
index 302950cb..0a5bbace 100644
--- a/debugging/book-library/style.css
+++ b/debugging/book-library/style.css
@@ -17,3 +17,47 @@
 button.btn-info {
   margin: 20px;
 }
+
+/* --- Notices (toast) styles --- */
+
+/* Container to control placement of notices */
+.notice-root {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none; /* allow clicks to pass through container */
+}
+
+/* Each notice uses Bootstrap alert styles, plus these */
+.notice {
+  pointer-events: auto; /* allow focus/click on the notice itself if needed */
+}
+
+/* Pure-CSS lifecycle: fade in, hold, fade out */
+@keyframes notice-life {
+  0% {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  85% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+/* Apply the animation */
+.notice--auto-hide {
+  animation: notice-life 2500ms ease-in-out forwards;
+}

From 2417ca41dbfd06900118179e75e4a6ed0f2808a2 Mon Sep 17 00:00:00 2001
From: iswat <ibeetek@gmail.com>
Date: Thu, 11 Dec 2025 10:43:01 +0000
Subject: [PATCH 23/23] fix(validation): require pages to be a positive integer

- Use valueAsNumber and input validity (valueMissing, rangeUnderflow, stepMismatch)
- Reject non-numeric and decimal values; enforce min=1 and step=1
- Preserve existing submit handling and notice behavior
---
 debugging/book-library/script.js | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 101ac0b7..391b1587 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -33,7 +33,7 @@ const authorInput = document.getElementById("author");
 const pagesInput = document.getElementById("pages");
 const readCheckbox = document.getElementById("check");
 
-// Non-blocking success message using CSS animation; no inline styles, no setTimeout
+// Non-blocking success message using CSS animation; JS only toggles classes
 function showSuccess(message) {
   const root = document.getElementById("alerts");
   if (!root) return;
@@ -56,12 +56,11 @@ function showSuccess(message) {
   root.appendChild(alertEl);
 }
 
-//check the right input from forms and if its ok -> add the new book (object in array)
-//via Book function and start render function
+// Check the right input from forms and if it's ok -> add the new book (object in array)
+// via Book function and start render function
 function submit() {
   const title = titleInput.value.trim();
   const author = authorInput.value.trim();
-  const pages = Number(pagesInput.value);
 
   // Validate title and author
   if (title === "" || author === "") {
@@ -69,9 +68,21 @@ function submit() {
     return;
   }
 
-  // Validate pages
-  if (Number.isNaN(pages) || pages <= 0) {
-    alert("Pages must be a positive number.");
+  // Read and validate pages as a positive integer
+  const pages = pagesInput.valueAsNumber;
+  const v = pagesInput.validity;
+
+  if (v.valueMissing || !Number.isFinite(pages)) {
+    alert("Pages is required and must be a number.");
+    return;
+  }
+  if (v.rangeUnderflow || pages < 1) {
+    alert("Pages must be at least 1.");
+    return;
+  }
+  // Enforce whole numbers only (reject decimals like 3.5)
+  if (v.stepMismatch || !Number.isInteger(pages)) {
+    alert("Pages must be a whole number.");
     return;
   }
 
@@ -108,7 +119,7 @@ function render() {
 
     titleCell.textContent = book.title;
     authorCell.textContent = book.author;
-    pagesCell.textContent = book.pages;
+    pagesCell.textContent = String(book.pages);
 
     // Read/unread toggle button
     const changeBut = document.createElement("button");