From 53e7964130f5abc744eab45a875c4392de50d3d9 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Tue, 11 Aug 2026 19:16:41 +0100 Subject: [PATCH 1/4] fixing major bugs of the book library project --- debugging/book-library/index.html | 4 +- debugging/book-library/script.js | 63 ++++++++++++++++--------------- 2 files changed, 35 insertions(+), 32 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 @@ - + @@ -65,7 +65,7 @@

Library

type="submit" value="Submit" class="btn btn-primary" - onclick="submit();" + onclick="submit()" /> diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1d..d89e4e71 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -2,13 +2,14 @@ let myLibrary = []; window.addEventListener("load", function (e) { populateStorage(); - render(); + //render(); delete the duplicate render since populateStorage is called }); function populateStorage() { - if (myLibrary.length == 0) { - let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); - let book2 = new Book( + if (myLibrary.length === 0) { + // strict Equality + let book1 = new libraryBook("Robison Crusoe", "Daniel Defoe", "252", true); + let book2 = new libraryBook( "The Old Man and the Sea", "Ernest Hemingway", "127", @@ -20,30 +21,34 @@ 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 == null || - title.value == "" || - pages.value == null || - pages.value == "" + !titleInput.value.trim() || + !authorInput.value.trim() || + !pagesInput.value.trim() ) { 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 libraryBook( + title.value, + author.value, // i think it was meant to author and title was duplicated + pages.value, + check.checked + ); + myLibrary.push(book); render(); } } - -function Book(title, author, pages, check) { +// fixing naming issue +function libraryBook(title, author, pages, check) { this.title = title; this.author = author; this.pages = pages; @@ -54,13 +59,13 @@ 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 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); @@ -71,16 +76,13 @@ function render() { pagesCell.innerHTML = myLibrary[i].pages; //add and wait for action for read/unread button + // fixing naming issue let changeBut = document.createElement("button"); - changeBut.id = i; + changeBut.id = `readBtn-${i}`; // to avoid confusion. changeBut.className = "btn btn-success"; wasReadCell.appendChild(changeBut); - let readStatus = ""; - if (myLibrary[i].check == false) { - readStatus = "Yes"; - } else { - readStatus = "No"; - } + + let readStatus = myLibrary[i].check ? "Yes" : "No"; changeBut.innerText = readStatus; changeBut.addEventListener("click", function () { @@ -90,11 +92,12 @@ 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 = `delBtn${i}`; //to avoid confusion + 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 6864b9fc3501d526e14e8619bd4dfc5f42be0f21 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Wed, 12 Aug 2026 19:31:48 +0100 Subject: [PATCH 2/4] fixing the common naming issue of script js --- debugging/book-library/script.js | 65 +++++++++++++++++--------------- 1 file changed, 34 insertions(+), 31 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index d89e4e71..78cdd934 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -8,7 +8,7 @@ window.addEventListener("load", function (e) { function populateStorage() { if (myLibrary.length === 0) { // strict Equality - let book1 = new libraryBook("Robison Crusoe", "Daniel Defoe", "252", true); + let book1 = new libraryBook("Robinson Crusoe", "Daniel Defoe", "252", true); // name fixed let book2 = new libraryBook( "The Old Man and the Sea", "Ernest Hemingway", @@ -37,67 +37,70 @@ function submit() { alert("Please fill all fields!"); return false; } else { - let book = new libraryBook( - title.value, - author.value, // i think it was meant to author and title was duplicated - pages.value, - check.checked + let newBook = new libraryBook( + titleInput.value, + authorInput.value, // i think it was meant to author and title was duplicated + pagesInput.value, + readCheckbox.checked ); - myLibrary.push(book); + myLibrary.push(newBook); render(); } } // fixing naming issue -function libraryBook(title, author, pages, check) { +function libraryBook(title, author, pages, isRead) { this.title = title; this.author = author; this.pages = pages; - this.check = check; + this.isRead = isRead; } function render() { let table = document.getElementById("display"); - let rowsNumber = table.rows.length; + let totalRows = table.rows.length; //delete old table - for (let n = rowsNumber - 1; n > 0; n--) { + for (let n = totalRows - 1; n > 0; n--) { table.deleteRow(n); } //insert updated row and cells - let length = myLibrary.length; - for (let i = 0; i < length; i++) { + let libraryLength = myLibrary.length; + for (let i = 0; i < libraryLength; 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 readStatusCell = 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 // fixing naming issue - let changeBut = document.createElement("button"); - changeBut.id = `readBtn-${i}`; // to avoid confusion. - changeBut.className = "btn btn-success"; - wasReadCell.appendChild(changeBut); + let toggleReadBtn = document.createElement("button"); + toggleReadBtn.id = `readBtn-${i}`; // to avoid confusion. + toggleReadBtn.className = "btn btn-success"; + + readStatusCell.appendChild(toggleReadBtn); - let readStatus = myLibrary[i].check ? "Yes" : "No"; - changeBut.innerText = readStatus; + let readStatus = myLibrary[i].isRead ? "Yes" : "No"; + toggleReadBtn.textContent = readStatus; - changeBut.addEventListener("click", function () { - myLibrary[i].check = !myLibrary[i].check; + toggleReadBtn.addEventListener("click", function () { + myLibrary[i].isRead = !myLibrary[i].isRead; render(); }); //add delete button to every row and render again - let delButton = document.createElement("button"); - delButton.id = `delBtn${i}`; //to avoid confusion - deleteCell.appendChild(delButton); - delButton.className = "btn btn-warning"; - delButton.innerHTML = "Delete"; + let deleteBtn = document.createElement("button"); + deleteBtn.id = `delBtn${i}`; //to avoid confusion + + deleteBtn.className = "btn btn-warning"; + deleteBtn.textContent = "Delete"; + deleteCell.appendChild(deleteBtn); - delButton.addEventListener("click", function () { + deleteBtn.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); From e613ec3ca06832f0b9824ff349efe429b7b7367e Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Sun, 16 Aug 2026 18:16:00 +0100 Subject: [PATCH 3/4] fix book library based on the comments including validation to accept positive whole number --- debugging/book-library/index.html | 95 +++++++++++++++---------------- debugging/book-library/script.js | 56 +++++++++--------- debugging/book-library/style.css | 16 +----- 3 files changed, 77 insertions(+), 90 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 6abc3b8b..a84d2eeb 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,7 +1,7 @@ - + - + Book Library Library
-
- - - - - - -
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
@@ -80,15 +83,7 @@

Library

- - - - - - - - - +
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 78cdd934..5cb13058 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -2,13 +2,16 @@ let myLibrary = []; window.addEventListener("load", function (e) { populateStorage(); - //render(); delete the duplicate render since populateStorage is called + + const bookForm = document.getElementById("bookForm"); + if (bookForm) { + bookForm.addEventListener("submit", addBook); + } }); function populateStorage() { if (myLibrary.length === 0) { - // strict Equality - let book1 = new libraryBook("Robinson Crusoe", "Daniel Defoe", "252", true); // name fixed + let book1 = new libraryBook("Robinson Crusoe", "Daniel Defoe", "252", true); let book2 = new libraryBook( "The Old Man and the Sea", "Ernest Hemingway", @@ -26,9 +29,9 @@ 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() { +function addBook(e) { + e.preventDefault(); + if ( !titleInput.value.trim() || !authorInput.value.trim() || @@ -36,18 +39,22 @@ function submit() { ) { alert("Please fill all fields!"); return false; - } else { - let newBook = new libraryBook( - titleInput.value, - authorInput.value, // i think it was meant to author and title was duplicated - pagesInput.value, - readCheckbox.checked - ); - myLibrary.push(newBook); - render(); } + + let newBook = new libraryBook( + titleInput.value, + authorInput.value, + pagesInput.value, + readCheckbox.checked + ); + + myLibrary.push(newBook); + + document.getElementById("bookForm").reset(); + + render(); } -// fixing naming issue + function libraryBook(title, author, pages, isRead) { this.title = title; this.author = author; @@ -58,11 +65,11 @@ function libraryBook(title, author, pages, isRead) { function render() { let table = document.getElementById("display"); let totalRows = table.rows.length; - //delete old table + for (let n = totalRows - 1; n > 0; n--) { table.deleteRow(n); } - //insert updated row and cells + let libraryLength = myLibrary.length; for (let i = 0; i < libraryLength; i++) { let row = table.insertRow(-1); @@ -76,14 +83,10 @@ function render() { authorCell.textContent = myLibrary[i].author; pagesCell.textContent = myLibrary[i].pages; - //add and wait for action for read/unread button - // fixing naming issue let toggleReadBtn = document.createElement("button"); - toggleReadBtn.id = `readBtn-${i}`; // to avoid confusion. + toggleReadBtn.id = `readBtn-${i}`; toggleReadBtn.className = "btn btn-success"; - readStatusCell.appendChild(toggleReadBtn); - let readStatus = myLibrary[i].isRead ? "Yes" : "No"; toggleReadBtn.textContent = readStatus; @@ -91,19 +94,18 @@ function render() { myLibrary[i].isRead = !myLibrary[i].isRead; render(); }); + readStatusCell.appendChild(toggleReadBtn); - //add delete button to every row and render again let deleteBtn = document.createElement("button"); - deleteBtn.id = `delBtn${i}`; //to avoid confusion - + deleteBtn.id = `delBtn-${i}`; deleteBtn.className = "btn btn-warning"; deleteBtn.textContent = "Delete"; - deleteCell.appendChild(deleteBtn); deleteBtn.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); }); + deleteCell.appendChild(deleteBtn); } } diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 302950cb..4e85e5af 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -1,17 +1,7 @@ -.form-group { - width: 400px; - height: 300px; - align-self: left; +#bookForm { + max-width: 400px; padding-left: 20px; -} - -.btn { - display: block; -} - -.form-check-label { - padding-left: 20px; - margin: 5px 0px 5px 0px; + margin-bottom: 20px; } button.btn-info { From a65e0e3e1e08d0866e6e2687d777e3726db3e8d6 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Mon, 17 Aug 2026 15:17:21 +0100 Subject: [PATCH 4/4] fixed based on the comment including the delete alert to come after the deletion. --- debugging/book-library/script.js | 95 +++++++++++++++++--------------- 1 file changed, 50 insertions(+), 45 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 5cb13058..445f3577 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,6 +1,11 @@ -let myLibrary = []; +// 1 & 3. Constant array and top-level DOM element declarations +const myLibrary = []; +const titleInput = document.getElementById("title"); +const authorInput = document.getElementById("author"); +const pagesInput = document.getElementById("pages"); +const readCheckbox = document.getElementById("check"); -window.addEventListener("load", function (e) { +window.addEventListener("load", function () { populateStorage(); const bookForm = document.getElementById("bookForm"); @@ -11,11 +16,12 @@ window.addEventListener("load", function (e) { function populateStorage() { if (myLibrary.length === 0) { - let book1 = new libraryBook("Robinson Crusoe", "Daniel Defoe", "252", true); - let book2 = new libraryBook( + // 2. Constructor called with PascalCase + let book1 = new LibraryBook("Robinson Crusoe", "Daniel Defoe", 252, true); + let book2 = new LibraryBook( "The Old Man and the Sea", "Ernest Hemingway", - "127", + 127, true ); myLibrary.push(book1); @@ -24,38 +30,33 @@ function populateStorage() { } } -const titleInput = document.getElementById("title"); -const authorInput = document.getElementById("author"); -const pagesInput = document.getElementById("pages"); -const readCheckbox = document.getElementById("check"); - function addBook(e) { e.preventDefault(); - if ( - !titleInput.value.trim() || - !authorInput.value.trim() || - !pagesInput.value.trim() - ) { - alert("Please fill all fields!"); - return false; + // 4. Input preprocessing and consistent usage of cleaned values + const cleanTitle = titleInput.value.trim(); + const cleanAuthor = authorInput.value.trim(); + const cleanPages = parseInt(pagesInput.value, 10); + + if (!cleanTitle || !cleanAuthor || isNaN(cleanPages) || cleanPages < 1) { + alert("Please provide a valid title, author, and positive page count!"); + return; } - let newBook = new libraryBook( - titleInput.value, - authorInput.value, - pagesInput.value, + const newBook = new LibraryBook( + cleanTitle, + cleanAuthor, + cleanPages, readCheckbox.checked ); myLibrary.push(newBook); - document.getElementById("bookForm").reset(); - render(); } -function libraryBook(title, author, pages, isRead) { +// 2. PascalCase constructor function +function LibraryBook(title, author, pages, isRead) { this.title = title; this.author = author; this.pages = pages; @@ -63,32 +64,28 @@ function libraryBook(title, author, pages, isRead) { } function render() { - let table = document.getElementById("display"); - let totalRows = table.rows.length; - - for (let n = totalRows - 1; n > 0; n--) { - table.deleteRow(n); - } + // 5. Efficient single-operation clearing of + const tableBody = document.querySelector("#display tbody"); + tableBody.textContent = ""; - let libraryLength = myLibrary.length; + const libraryLength = myLibrary.length; for (let i = 0; i < libraryLength; i++) { - let row = table.insertRow(-1); - let titleCell = row.insertCell(0); - let authorCell = row.insertCell(1); - let pagesCell = row.insertCell(2); - let readStatusCell = row.insertCell(3); - let deleteCell = row.insertCell(4); + const row = tableBody.insertRow(); + const titleCell = row.insertCell(0); + const authorCell = row.insertCell(1); + const pagesCell = row.insertCell(2); + const readStatusCell = row.insertCell(3); + const deleteCell = row.insertCell(4); titleCell.textContent = myLibrary[i].title; authorCell.textContent = myLibrary[i].author; pagesCell.textContent = myLibrary[i].pages; - let toggleReadBtn = document.createElement("button"); - toggleReadBtn.id = `readBtn-${i}`; + // Read status toggle button + const toggleReadBtn = document.createElement("button"); + // 6. No unnecessary ID attribute assignment toggleReadBtn.className = "btn btn-success"; - - let readStatus = myLibrary[i].isRead ? "Yes" : "No"; - toggleReadBtn.textContent = readStatus; + toggleReadBtn.textContent = myLibrary[i].isRead ? "Yes" : "No"; toggleReadBtn.addEventListener("click", function () { myLibrary[i].isRead = !myLibrary[i].isRead; @@ -96,15 +93,23 @@ function render() { }); readStatusCell.appendChild(toggleReadBtn); - let deleteBtn = document.createElement("button"); - deleteBtn.id = `delBtn-${i}`; + // Delete button + const deleteBtn = document.createElement("button"); + // 6. No unnecessary ID attribute assignment 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; + + // 7. Delete from array and re-render DOM BEFORE triggering the alert myLibrary.splice(i, 1); render(); + + // Defer alert so the browser completes its UI repaint first + setTimeout(() => { + alert(`You've deleted title: ${deletedTitle}`); + }, 0); }); deleteCell.appendChild(deleteBtn); }