From c5b9eab89e2e7f4841775cb0e5e82bbdaf2c0ad5 Mon Sep 17 00:00:00 2001 From: saff-coder Date: Fri, 5 Dec 2025 18:38:28 +0000 Subject: [PATCH 1/4] I have Fixed the index and the Submit button --- debugging/book-library/index.html | 6 +-- debugging/book-library/script.js | 71 ++++++++++++++++++------------- 2 files changed, 45 insertions(+), 32 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..f54be17c 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -31,7 +31,7 @@

Library

Library /> Library - + \ No newline at end of file diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1d..9a39203e 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,13 +1,14 @@ let myLibrary = []; -window.addEventListener("load", function (e) { +// When page loads, add starter books and render +window.addEventListener("load", function () { populateStorage(); render(); }); function populateStorage() { - if (myLibrary.length == 0) { - let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); + if (myLibrary.length === 0) { + let book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true); let book2 = new Book( "The Old Man and the Sea", "Ernest Hemingway", @@ -16,7 +17,6 @@ function populateStorage() { ); myLibrary.push(book1); myLibrary.push(book2); - render(); } } @@ -25,39 +25,53 @@ const author = document.getElementById("author"); const pages = document.getElementById("pages"); 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 +// Check the form and, if OK, add a new book and re-render function submit() { if ( - title.value == null || - title.value == "" || - pages.value == null || - pages.value == "" + !title.value.trim() || + !author.value.trim() || + !pages.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 Book( + title.value.trim(), + author.value.trim(), + pages.value.trim(), + check.checked + ); + myLibrary.push(book); // ✅ use myLibrary render(); + + // Optional: clear form after adding + title.value = ""; + author.value = ""; + pages.value = ""; + check.checked = false; + + return false; } } +// Book constructor function Book(title, author, pages, check) { this.title = title; this.author = author; this.pages = pages; - this.check = check; + this.check = check; // true = read, false = not read } function render() { let table = document.getElementById("display"); let rowsNumber = table.rows.length; - //delete old table - for (let n = rowsNumber - 1; n > 0; n-- { + + // delete old table rows (keep header at index 0) + for (let n = rowsNumber - 1; n > 0; n--) { // ✅ fixed ')' table.deleteRow(n); } - //insert updated row and cells + + // insert updated rows and cells let length = myLibrary.length; for (let i = 0; i < length; i++) { let row = table.insertRow(1); @@ -66,21 +80,18 @@ 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; - //add and wait for action for read/unread button + // 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 == false) { - readStatus = "Yes"; - } else { - readStatus = "No"; - } + + let readStatus = myLibrary[i].check ? "Yes" : "No"; // ✅ true = Yes changeBut.innerText = readStatus; changeBut.addEventListener("click", function () { @@ -88,16 +99,18 @@ function render() { render(); }); - //add delete button to every row and render again + // Delete button 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; + delButton.className = "btn btn-warning"; + delButton.innerHTML = "Delete"; + deleteCell.appendChild(delButton); + + delButton.addEventListener("click", function () { // ✅ 'click' not 'clicks' alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); }); } } + \ No newline at end of file From 73971be1526ba099038b7d49521ea667295a74c9 Mon Sep 17 00:00:00 2001 From: saff-coder Date: Sat, 6 Dec 2025 07:47:32 +0000 Subject: [PATCH 2/4] encoding was corrected --- debugging/book-library/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index f54be17c..eb2c7463 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,10 +1,10 @@ - + - + + My book library From d3bdc535668833ffbbc17d1b8d3b7b91ae486a50 Mon Sep 17 00:00:00 2001 From: saff-coder Date: Sat, 6 Dec 2025 08:32:26 +0000 Subject: [PATCH 3/4] removed unnecessary functions --- debugging/book-library/index.html | 83 ++++++++++++++++--------------- debugging/book-library/script.js | 61 ++++++++++------------- 2 files changed, 70 insertions(+), 74 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index eb2c7463..91a2c341 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -28,47 +28,50 @@

Library

-
- - - - - - - +
+
+ + + + + + + + + +
+ type="checkbox" + class="form-check-input" + id="check" + />Read + + +
+ +
+ @@ -91,6 +94,6 @@

Library

- + \ No newline at end of file diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 9a39203e..7facdf88 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,4 +1,4 @@ -let myLibrary = []; +const myLibrary = []; // When page loads, add starter books and render window.addEventListener("load", function () { @@ -8,50 +8,43 @@ window.addEventListener("load", function () { function populateStorage() { if (myLibrary.length === 0) { - let book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true); - let book2 = new Book( + const book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true); + const book2 = new Book( "The Old Man and the Sea", "Ernest Hemingway", - "127", + 127, true ); - myLibrary.push(book1); - myLibrary.push(book2); + myLibrary.push(book1, book2); } } -const title = document.getElementById("title"); -const author = document.getElementById("author"); -const pages = document.getElementById("pages"); -const check = document.getElementById("check"); - +const bookFormEl = document.getElementById("bookForm"); +const titleInputEl = document.getElementById("title"); +const authorInputEl = document.getElementById("author"); +const pagesInputEl = document.getElementById("pages"); +const isReadCheckboxEl = document.getElementById("check"); // Check the form and, if OK, add a new book and re-render -function submit() { - if ( - !title.value.trim() || - !author.value.trim() || - !pages.value.trim() - ) { - alert("Please fill all fields!"); - return false; - } else { - let book = new Book( - title.value.trim(), - author.value.trim(), - pages.value.trim(), - check.checked - ); - myLibrary.push(book); // ✅ use myLibrary - render(); +bookFormEl.addEventListener("submit", handleBookFormSubmit); - // Optional: clear form after adding - title.value = ""; - author.value = ""; - pages.value = ""; - check.checked = false; +function handleBookFormSubmit(event) { + event.preventDefault(); // stop page reload - return false; + if (!titleInputEl.value || !pagesInputEl.value) { + alert("Please fill all fields!"); + return; } + + const newBook = new Book( + titleInputEl.value, + authorInputEl.value, + Number(pagesInputEl.value), + isReadCheckboxEl.checked + ); + + myLibrary.push(newBook); + render(); + bookFormEl.reset(); } // Book constructor From 12d400d18c8beb8acef66e418e390665a0c2926c Mon Sep 17 00:00:00 2001 From: saff-coder Date: Sat, 6 Dec 2025 09:21:35 +0000 Subject: [PATCH 4/4] Improve book form validation and table rendering Trim title and author and reject empty values - Convert page count to a number and validate it is positive --- debugging/book-library/script.js | 116 ++++++++++++++++++------------- 1 file changed, 66 insertions(+), 50 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 7facdf88..dc2ea2e5 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -19,30 +19,40 @@ function populateStorage() { } } +// === DOM elements === const bookFormEl = document.getElementById("bookForm"); -const titleInputEl = document.getElementById("title"); -const authorInputEl = document.getElementById("author"); -const pagesInputEl = document.getElementById("pages"); -const isReadCheckboxEl = document.getElementById("check"); +const titleInputEl = document.getElementById("title"); // .value is a string +const authorInputEl = document.getElementById("author"); // .value is a string +const pagesInputEl = document.getElementById("pages"); // .value is a string +const isReadCheckboxEl = document.getElementById("check"); // .checked is boolean + // Check the form and, if OK, add a new book and re-render bookFormEl.addEventListener("submit", handleBookFormSubmit); function handleBookFormSubmit(event) { event.preventDefault(); // stop page reload - if (!titleInputEl.value || !pagesInputEl.value) { - alert("Please fill all fields!"); + // 🔹 Normalise / preprocess input + const title = titleInputEl.value.trim(); + const author = authorInputEl.value.trim(); + const pages = Number(pagesInputEl.value); + const isRead = isReadCheckboxEl.checked; + + // 🔹 Validation + if (!title || !author) { + alert("Title and author are required."); return; } - const newBook = new Book( - titleInputEl.value, - authorInputEl.value, - Number(pagesInputEl.value), - isReadCheckboxEl.checked - ); + if (!Number.isFinite(pages) || pages <= 0) { + alert("Pages must be a positive number."); + return; + } + // 🔹 Create and store the new book + const newBook = new Book(title, author, pages, isRead); myLibrary.push(newBook); + render(); bookFormEl.reset(); } @@ -56,54 +66,60 @@ function Book(title, author, pages, check) { } function render() { - let table = document.getElementById("display"); - let rowsNumber = table.rows.length; + const table = document.getElementById("display"); + const tbody = table.querySelector("tbody"); - // delete old table rows (keep header at index 0) - for (let n = rowsNumber - 1; n > 0; n--) { // ✅ fixed ')' - table.deleteRow(n); - } + // 🔹 Clear previous rows in one go (keep header) + tbody.innerHTML = ""; // insert updated rows and cells - let 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; + myLibrary.forEach((book, index) => { + const row = document.createElement("tr"); - // Read/unread button - let changeBut = document.createElement("button"); - changeBut.id = i; - changeBut.className = "btn btn-success"; - wasReadCell.appendChild(changeBut); + const titleCell = document.createElement("td"); + const authorCell = document.createElement("td"); + const pagesCell = document.createElement("td"); + const wasReadCell = document.createElement("td"); + const deleteCell = document.createElement("td"); - let readStatus = myLibrary[i].check ? "Yes" : "No"; // ✅ true = Yes - changeBut.innerText = readStatus; + // 🔹 Use textContent (safe & fast) + titleCell.textContent = book.title; + authorCell.textContent = book.author; + pagesCell.textContent = book.pages; - changeBut.addEventListener("click", function () { - myLibrary[i].check = !myLibrary[i].check; + // Read/unread button + const readBtn = document.createElement("button"); + readBtn.type = "button"; + readBtn.className = "btn btn-success btn-sm"; + readBtn.textContent = book.check ? "Yes" : "No"; + readBtn.addEventListener("click", () => { + myLibrary[index].check = !myLibrary[index].check; render(); }); + wasReadCell.appendChild(readBtn); // Delete button - let delButton = document.createElement("button"); - delButton.id = i + 5; - delButton.className = "btn btn-warning"; - delButton.innerHTML = "Delete"; - deleteCell.appendChild(delButton); - - delButton.addEventListener("click", function () { // ✅ 'click' not 'clicks' - alert(`You've deleted title: ${myLibrary[i].title}`); - myLibrary.splice(i, 1); + const deleteBtn = document.createElement("button"); + deleteBtn.type = "button"; + deleteBtn.className = "btn btn-warning btn-sm"; + deleteBtn.textContent = "Delete"; + + deleteBtn.addEventListener("click", () => { + const confirmed = confirm(`Delete "${book.title}"?`); + if (!confirmed) return; + + myLibrary.splice(index, 1); render(); }); - } + + deleteCell.appendChild(deleteBtn); + + row.appendChild(titleCell); + row.appendChild(authorCell); + row.appendChild(pagesCell); + row.appendChild(wasReadCell); + row.appendChild(deleteCell); + + tbody.appendChild(row); + }); } - \ No newline at end of file