From 3be304cad699a2d657ff13700746edbbd378012f Mon Sep 17 00:00:00 2001 From: petergmlui Date: Mon, 18 Aug 2025 01:49:21 +0100 Subject: [PATCH 1/4] initial upload --- debugging/book-library/index.html | 27 ++++++------- debugging/book-library/script.js | 65 +++++++++++++------------------ 2 files changed, 37 insertions(+), 55 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..bec0c150 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -28,10 +28,11 @@

Library

+
Library /> Library value="" />Read - -
+ +
+ @@ -81,13 +83,6 @@

Library

- - - - - - -
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1d..a65487bc 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -6,14 +6,9 @@ window.addEventListener("load", function (e) { }); function populateStorage() { - if (myLibrary.length == 0) { - let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); - let book2 = new Book( - "The Old Man and the Sea", - "Ernest Hemingway", - "127", - 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", 127, true); myLibrary.push(book1); myLibrary.push(book2); render(); @@ -25,21 +20,21 @@ 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 function submit() { if ( - title.value == null || - title.value == "" || - pages.value == null || - pages.value == "" + !title.value || + !author.value || + !pages.value ) { 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(); + // Reset form and collapse + document.querySelector("form").reset(); + $("#demo").collapse("hide"); } } @@ -53,14 +48,13 @@ 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-- { + // Delete old table rows (except header) + 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); + // Insert updated rows + for (let i = 0; i < myLibrary.length; i++) { + let row = table.insertRow(-1); // Append at the end of tbody let titleCell = row.insertCell(0); let authorCell = row.insertCell(1); let pagesCell = row.insertCell(2); @@ -70,34 +64,27 @@ function render() { 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.id = `read-${i}`; changeBut.className = "btn btn-success"; wasReadCell.appendChild(changeBut); - let readStatus = ""; - if (myLibrary[i].check == false) { - readStatus = "Yes"; - } else { - readStatus = "No"; - } - changeBut.innerText = readStatus; - + changeBut.innerText = myLibrary[i].check ? "Yes" : "No"; changeBut.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; 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 = `delete-${i}`; + delButton.className = "btn btn-warning"; + delButton.innerHTML = "Delete"; + deleteCell.appendChild(delButton); + delButton.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); }); } -} +} \ No newline at end of file From a7968353582de0fb15866a21742bd0803609b3c2 Mon Sep 17 00:00:00 2001 From: petergmlui Date: Mon, 18 Aug 2025 02:10:13 +0100 Subject: [PATCH 2/4] bug fixes --- debugging/book-library/index.html | 83 +++++++++++++++---------------- debugging/book-library/script.js | 73 +++++++++++++++++---------- 2 files changed, 88 insertions(+), 68 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index bec0c150..0e4e2dd3 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -27,50 +27,49 @@

Library

Add new book -
-
-
- +
+ +
+ + + + + + +
- + type="checkbox" + class="form-check-input" + id="check" + value="" + />Read + +
+ +
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index a65487bc..cbe859b7 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,18 +1,31 @@ let myLibrary = []; -window.addEventListener("load", function (e) { +window.addEventListener("load", function () { + // console.log("Page loaded, initializing library"); populateStorage(); render(); }); +// Attach form submit event listener +document.getElementById("book-form").addEventListener("submit", function (event) { + // console.log("Form submit event triggered"); + event.preventDefault(); // Prevent default form submission + submit(); +}); + function populateStorage() { - if (myLibrary.length === 0) { + const storedLibrary = localStorage.getItem("myLibrary"); + if (storedLibrary) { + // console.log("Loading myLibrary from localStorage:", storedLibrary); + myLibrary = JSON.parse(storedLibrary); + } else { + // console.log("No data in localStorage, initializing with default books"); let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true); let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true); - myLibrary.push(book1); - myLibrary.push(book2); - render(); + myLibrary.push(book1, book2); + localStorage.setItem("myLibrary", JSON.stringify(myLibrary)); } + render(); } const title = document.getElementById("title"); @@ -21,21 +34,30 @@ const pages = document.getElementById("pages"); const check = document.getElementById("check"); function submit() { - if ( - !title.value || - !author.value || - !pages.value - ) { - alert("Please fill all fields!"); - return false; - } else { - let book = new Book(title.value, author.value, pages.value, check.checked); - myLibrary.push(book); - render(); - // Reset form and collapse - document.querySelector("form").reset(); - $("#demo").collapse("hide"); - } + // console.log("submit() function called"); + // console.log("Input values:", { + // title: title.value, + // author: author.value, + // pages: pages.value, + // read: check.checked + // }); + + // if (!title.value.trim() || !author.value.trim() || !pages.value || isNaN(parseInt(pages.value))) { + // console.log("Validation failed: One or more fields are empty or invalid"); + // alert("Please fill all fields with valid data!"); + // return; + // } + + let book = new Book(title.value.trim(), author.value.trim(), parseInt(pages.value), check.checked); + // console.log("New book created:", book); + myLibrary.push(book); + // console.log("myLibrary after push:", myLibrary); + localStorage.setItem("myLibrary", JSON.stringify(myLibrary)); + render(); + document.querySelector("form").reset(); + // console.log("Form reset"); + $("#demo").collapse("hide"); + // console.log("Form collapsed"); } function Book(title, author, pages, check) { @@ -46,15 +68,14 @@ function Book(title, author, pages, check) { } function render() { + // console.log("render() called, myLibrary:", myLibrary); let table = document.getElementById("display"); let rowsNumber = table.rows.length; - // Delete old table rows (except header) for (let n = rowsNumber - 1; n > 0; n--) { table.deleteRow(n); } - // Insert updated rows for (let i = 0; i < myLibrary.length; i++) { - let row = table.insertRow(-1); // Append at the end of tbody + let row = table.insertRow(-1); let titleCell = row.insertCell(0); let authorCell = row.insertCell(1); let pagesCell = row.insertCell(2); @@ -64,18 +85,17 @@ function render() { authorCell.innerHTML = myLibrary[i].author; pagesCell.innerHTML = myLibrary[i].pages; - // Read/Unread button let changeBut = document.createElement("button"); changeBut.id = `read-${i}`; changeBut.className = "btn btn-success"; - wasReadCell.appendChild(changeBut); changeBut.innerText = myLibrary[i].check ? "Yes" : "No"; + wasReadCell.appendChild(changeBut); changeBut.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; + localStorage.setItem("myLibrary", JSON.stringify(myLibrary)); render(); }); - // Delete button let delButton = document.createElement("button"); delButton.id = `delete-${i}`; delButton.className = "btn btn-warning"; @@ -84,6 +104,7 @@ function render() { delButton.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); + localStorage.setItem("myLibrary", JSON.stringify(myLibrary)); render(); }); } From 76e985216b137b4325b6da34dba2282cb23d1b3f Mon Sep 17 00:00:00 2001 From: petergmlui Date: Wed, 20 Aug 2025 13:48:42 +0100 Subject: [PATCH 3/4] fixed input field check --- 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 cbe859b7..8be1f055 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -42,11 +42,11 @@ function submit() { // read: check.checked // }); - // if (!title.value.trim() || !author.value.trim() || !pages.value || isNaN(parseInt(pages.value))) { - // console.log("Validation failed: One or more fields are empty or invalid"); - // alert("Please fill all fields with valid data!"); - // return; - // } + if (!title.value.trim() || !author.value.trim() || !pages.value || isNaN(parseInt(pages.value))) { + console.log("Validation failed: One or more fields are empty or invalid"); + alert("Please fill all fields with valid data!"); + return; + } let book = new Book(title.value.trim(), author.value.trim(), parseInt(pages.value), check.checked); // console.log("New book created:", book); From b56d04a3e6c09b12113723bbf9b42b42db576797 Mon Sep 17 00:00:00 2001 From: petergmlui Date: Wed, 20 Aug 2025 14:22:56 +0100 Subject: [PATCH 4/4] cleaned comments and added max book pages of 30,000 --- debugging/book-library/script.js | 44 ++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 8be1f055..121c71ae 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,14 +1,12 @@ let myLibrary = []; window.addEventListener("load", function () { - // console.log("Page loaded, initializing library"); populateStorage(); render(); }); // Attach form submit event listener document.getElementById("book-form").addEventListener("submit", function (event) { - // console.log("Form submit event triggered"); event.preventDefault(); // Prevent default form submission submit(); }); @@ -16,10 +14,8 @@ document.getElementById("book-form").addEventListener("submit", function (event) function populateStorage() { const storedLibrary = localStorage.getItem("myLibrary"); if (storedLibrary) { - // console.log("Loading myLibrary from localStorage:", storedLibrary); myLibrary = JSON.parse(storedLibrary); } else { - // console.log("No data in localStorage, initializing with default books"); let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true); let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true); myLibrary.push(book1, book2); @@ -34,30 +30,41 @@ const pages = document.getElementById("pages"); const check = document.getElementById("check"); function submit() { - // console.log("submit() function called"); - // console.log("Input values:", { - // title: title.value, - // author: author.value, - // pages: pages.value, - // read: check.checked - // }); + console.log("submit() function called"); + console.log("Input values:", { + title: title.value, + author: author.value, + pages: pages.value, + read: check.checked + }); - if (!title.value.trim() || !author.value.trim() || !pages.value || isNaN(parseInt(pages.value))) { + const maxPages = 30000; // Maximum allowed pages + const pageCount = parseInt(pages.value); + if ( + !title.value.trim() || + !author.value.trim() || + !pages.value || + isNaN(pageCount) || + pageCount <= 0 || + pageCount > maxPages + ) { console.log("Validation failed: One or more fields are empty or invalid"); - alert("Please fill all fields with valid data!"); + alert( + `Please fill all fields with valid data! Pages must be a number between 1 and ${maxPages}.` + ); return; } - let book = new Book(title.value.trim(), author.value.trim(), parseInt(pages.value), check.checked); - // console.log("New book created:", book); + let book = new Book(title.value.trim(), author.value.trim(), pageCount, check.checked); + console.log("New book created:", book); myLibrary.push(book); - // console.log("myLibrary after push:", myLibrary); + console.log("myLibrary after push:", myLibrary); localStorage.setItem("myLibrary", JSON.stringify(myLibrary)); render(); document.querySelector("form").reset(); - // console.log("Form reset"); + console.log("Form reset"); $("#demo").collapse("hide"); - // console.log("Form collapsed"); + console.log("Form collapsed"); } function Book(title, author, pages, check) { @@ -68,7 +75,6 @@ function Book(title, author, pages, check) { } function render() { - // console.log("render() called, myLibrary:", myLibrary); let table = document.getElementById("display"); let rowsNumber = table.rows.length; for (let n = rowsNumber - 1; n > 0; n--) {