From 1b8bd3295d725f5befc03a64e934c2cd1aa050c8 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Wed, 6 Aug 2025 18:25:44 +0100 Subject: [PATCH 01/19] submit function fixed so books can add properly --- 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 75ce6c1d..08aeef22 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -37,8 +37,8 @@ function submit() { alert("Please fill all fields!"); return false; } else { - let book = new Book(title.value, title.value, pages.value, check.checked); - library.push(book); + let book = new Book(title.value, author.value, pages.value, check.checked); + myLibrary.push(book); render(); } } From ed0ee617c52f0e3003bda46923c12f8fd445069c Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Wed, 6 Aug 2025 18:37:38 +0100 Subject: [PATCH 02/19] code checks for missing field before adding book. --- debugging/book-library/script.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 08aeef22..a3e4764a 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -29,10 +29,9 @@ 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 == null || title.value.trim() === "" || + author.value == null || author.value.trim() === "" || + pages.value == null || pages.value.trim() === "" ) { alert("Please fill all fields!"); return false; From f7421a40b65706be215ec3905930d5355655e656 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Wed, 6 Aug 2025 18:45:03 +0100 Subject: [PATCH 03/19] fixed bug for "delete old table" part --- 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 a3e4764a..85c87102 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -53,7 +53,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 38ba266637f9a25a5971682b956eb0e782fdbd9a Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Wed, 6 Aug 2025 18:55:30 +0100 Subject: [PATCH 04/19] fixed delete button bugs --- 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 85c87102..fe030850 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -89,11 +89,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 0b17d3f0fb412b686b4e22908d27cd62433c1151 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Wed, 6 Aug 2025 19:04:19 +0100 Subject: [PATCH 05/19] fixed read status check button --- 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 fe030850..129c69fc 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -76,9 +76,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 783b2feec44b2b4d0eefb0de8080d33d3e3e7898 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Fri, 8 Aug 2025 22:56:51 +0100 Subject: [PATCH 06/19] HTML errors have been corrected --- debugging/book-library/index.html | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..e6d4a0a8 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,20 +1,22 @@ - + - + Book Library + + > - + > + @@ -31,20 +33,20 @@

Library

+ > + > Library id="pages" name="pages" required - /> + > + >
From c010c248b991ad1d05af228f318830c7c14876cc Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Fri, 8 Aug 2025 23:08:27 +0100 Subject: [PATCH 07/19] removed extra render() call from populateStorage() --- 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 129c69fc..3cfc3b9c 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 b4d3d8dc8d50fae4ea2c8968238878ec6d2ae13e Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Fri, 8 Aug 2025 23:15:54 +0100 Subject: [PATCH 08/19] variable names changed to more descriptive ones --- debugging/book-library/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 3cfc3b9c..afe7f176 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -19,10 +19,10 @@ 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 From 3f2fa61f8e8d4ba628e3dca12784e0451368c0f9 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Fri, 8 Aug 2025 23:29:14 +0100 Subject: [PATCH 09/19] removed check for .value is null as it's useless --- debugging/book-library/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index afe7f176..0077ed9e 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -28,14 +28,14 @@ const readCheckbox = document.getElementById("check"); //via Book function and start render function function submit() { if ( - title.value == null || title.value.trim() === "" || - author.value == null || author.value.trim() === "" || - pages.value == null || pages.value.trim() === "" + titleInput.value.trim() === "" || + authorInput.value.trim() === "" || + pagesInput.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(titleInput.value, authorInput.value, pagesInput.value, readCheckbox.checked); myLibrary.push(book); render(); } From e74e34368da4668355311c35239f3a8943bf5da4 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 14:45:10 +0100 Subject: [PATCH 10/19] validated & sanitised title, author & page inputs --- debugging/book-library/script.js | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 0077ed9e..b380163a 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -27,18 +27,35 @@ 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() { + titleInput.value = titleInput.value.trim().replace(/\s+/g, " "); + authorInput.value = authorInput.value.trim().replace(/\s+/g, " "); + pagesInput.value = pagesInput.value.trim(); + if ( - titleInput.value.trim() === "" || - authorInput.value.trim() === "" || - pagesInput.value.trim() === "" + titleInput.value === "" || + authorInput.value === "" || + pagesInput.value === "" ) { alert("Please fill all fields!"); return false; - } else { - let book = new Book(titleInput.value, authorInput.value, pagesInput.value, readCheckbox.checked); - myLibrary.push(book); - render(); + } + + if (isNaN(pagesInput.value) || pagesInput.value <= 0 || pagesInput.value > 20000) { + alert("Please enter a valid page count (1–20000)."); + return false; } + + let book = new Book( + titleInput.value, + authorInput.value, + parseInt(pagesInput.value, 10), + readCheckbox.checked + ); + + myLibrary.push(book); + render(); + + } function Book(title, author, pages, check) { From adc9355132e68710c45edacbecbc9dff4ca2a204 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 14:51:29 +0100 Subject: [PATCH 11/19] restricted the max page count --- debugging/book-library/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index b380163a..cc0cf77f 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -40,11 +40,11 @@ function submit() { return false; } - if (isNaN(pagesInput.value) || pagesInput.value <= 0 || pagesInput.value > 20000) { - alert("Please enter a valid page count (1–20000)."); + if (isNaN(pagesInput.value) || pagesInput.value <= 0 || pagesInput.value > 10000) { + alert("Please enter a valid page count (1–10000)."); return false; } - + let book = new Book( titleInput.value, authorInput.value, From 9adf893af04312b19166448373dbef499cd03723 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 15:08:33 +0100 Subject: [PATCH 12/19] code now deletes all rows in one operation --- debugging/book-library/script.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index cc0cf77f..cb1cdc9b 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -66,12 +66,11 @@ 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); - } + let tbody = document.querySelector("#display tbody"); + + //Clear all rows at once + tbody.innerHTML = ""; + //insert updated row and cells let length = myLibrary.length; for (let i = 0; i < length; i++) { From c01bbc9faf65e90320fa567f68130fd71e7a595f Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 15:11:38 +0100 Subject: [PATCH 13/19] fixed bug --- 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 cb1cdc9b..679bb315 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -70,11 +70,11 @@ function render() { //Clear all rows at once tbody.innerHTML = ""; - + //insert updated row and cells let length = myLibrary.length; for (let i = 0; i < length; i++) { - let row = table.insertRow(1); + let row = tbody.insertRow(0); let titleCell = row.insertCell(0); let authorCell = row.insertCell(1); let pagesCell = row.insertCell(2); From 9b511d446ef824eb09691fcb484434a9834e1caa Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 15:35:01 +0100 Subject: [PATCH 14/19] replaced innerHTML with textContent --- debugging/book-library/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 679bb315..affb8a43 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -80,9 +80,9 @@ function render() { 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; + titleCell.textContent = myLibrary[i].title; + authorCell.textContent = myLibrary[i].author; + pagesCell.textContent = myLibrary[i].pages; //add and wait for action for read/unread button let changeBut = document.createElement("button"); From 3480561756837e7000f2f0406af0e8a0d44d88c5 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 15:39:43 +0100 Subject: [PATCH 15/19] IDs for changeBut & delButton removed - not used --- 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 affb8a43..dc8f57ad 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -86,7 +86,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 = ""; @@ -104,7 +104,7 @@ 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 d8221e1af1101a498b83e2df60a31c408afcb904 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 15:45:09 +0100 Subject: [PATCH 16/19] renamed 2 btn variables meaningfully --- debugging/book-library/script.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index dc8f57ad..5fd3d4f2 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -85,30 +85,30 @@ function render() { pagesCell.textContent = myLibrary[i].pages; //add and wait for action for read/unread button - let changeBut = document.createElement("button"); + let readBtn = document.createElement("button"); - changeBut.className = "btn btn-success"; - wasReadCell.appendChild(changeBut); + readBtn.className = "btn btn-success"; + wasReadCell.appendChild(readBtn); let readStatus = ""; if (myLibrary[i].check == false) { readStatus = "No"; } else { readStatus = "Yes"; } - changeBut.innerText = readStatus; + readBtn.innerText = readStatus; - changeBut.addEventListener("click", function () { + readBtn.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; render(); }); //add delete button to every row and render again - let delButton = document.createElement("button"); + let deleteBtn = document.createElement("button"); - deleteCell.appendChild(delButton); - delButton.className = "btn btn-warning"; - delButton.innerHTML = "Delete"; - delButton.addEventListener("click", function () { + deleteCell.appendChild(deleteBtn); + deleteBtn.className = "btn btn-warning"; + deleteBtn.innerHTML = "Delete"; + deleteBtn.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); From df1d12394d6e9d38b4fc8c8032b36883c2cdc419 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 11 Aug 2025 16:06:47 +0100 Subject: [PATCH 17/19] deletion msg now shows after operation is complete --- debugging/book-library/script.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 5fd3d4f2..de8bb17b 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -109,9 +109,13 @@ function render() { deleteBtn.className = "btn btn-warning"; deleteBtn.innerHTML = "Delete"; deleteBtn.addEventListener("click", function () { - alert(`You've deleted title: ${myLibrary[i].title}`); + const deletedTitle = myLibrary[i].title; myLibrary.splice(i, 1); render(); + setTimeout(() => { + alert(`You've successfully deleted the book titled: ${deletedTitle}`); + }, 250); + }); } } From d14a06cb929ebcd50f81072b44a05c39ffacdd13 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Tue, 12 Aug 2025 12:28:01 +0100 Subject: [PATCH 18/19] indented if condition correctly --- 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 de8bb17b..498bdfab 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -41,8 +41,8 @@ function submit() { } if (isNaN(pagesInput.value) || pagesInput.value <= 0 || pagesInput.value > 10000) { - alert("Please enter a valid page count (1–10000)."); - return false; + alert("Please enter a valid page count (1–10000)."); + return false; } let book = new Book( From d2e13c106b6b52a62f447e0c2a6801e8fbd30425 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Tue, 12 Aug 2025 12:34:16 +0100 Subject: [PATCH 19/19] replaced if condition with ? : condition operator --- debugging/book-library/script.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 498bdfab..bafc8894 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -89,13 +89,9 @@ function render() { readBtn.className = "btn btn-success"; wasReadCell.appendChild(readBtn); - let readStatus = ""; - if (myLibrary[i].check == false) { - readStatus = "No"; - } else { - readStatus = "Yes"; - } - readBtn.innerText = readStatus; + + readBtn.innerText = myLibrary[i].check ? "Yes" : "No"; + readBtn.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check;