From 3c360ff2c34303d566588a998eda0a2408a9b01b Mon Sep 17 00:00:00 2001 From: Dave-Vermeulen Date: Sat, 16 Aug 2025 05:17:06 +0200 Subject: [PATCH 1/6] fixed submit but still not working. debug further --- 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 75ce6c1d..45277227 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(); } } @@ -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 afae57d8b22b1c9b0e986ca03de363236a8e26af Mon Sep 17 00:00:00 2001 From: Dave-Vermeulen Date: Sat, 16 Aug 2025 05:32:03 +0200 Subject: [PATCH 2/6] the render function was the issue. --- 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 45277227..b2a942be 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -90,11 +90,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 07d1bd831b1f10723ca048d762a50df0f17f7702 Mon Sep 17 00:00:00 2001 From: Dave-Vermeulen Date: Sat, 16 Aug 2025 05:54:42 +0200 Subject: [PATCH 3/6] corrected logic in if statement for render function --- 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 b2a942be..7e845516 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -76,7 +76,7 @@ function render() { changeBut.className = "btn btn-success"; wasReadCell.appendChild(changeBut); let readStatus = ""; - if (myLibrary[i].check == false) { + if (myLibrary[i].check == true) { readStatus = "Yes"; } else { readStatus = "No"; From 5699d2c7697b96332284127ecd99ed0de8e92896 Mon Sep 17 00:00:00 2001 From: Dave-Vermeulen Date: Tue, 19 Aug 2025 09:35:57 +0200 Subject: [PATCH 4/6] tidy up the script.js following the feedback.md shared on PR --- debugging/book-library/index.html | 4 +- debugging/book-library/script.js | 128 +++++++++++++----------------- 2 files changed, 57 insertions(+), 75 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..2628651d 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -31,7 +31,7 @@

Library

Library /> 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 == "" || // cant be null so removed all that + 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); - myLibrary.push(book); + let newBook = new Book(titleInput.value, authorInput.value, parseInt(pagesInput.value), checkInput.checked); + myLibrary.push(newBook); + //clear form after adding newBook + titleInput.value = ''; + authorInput.value = ''; + pagesInput.value = ''; + checkInput.value = false; render(); } } - +// book constructor function Book(title, author, pages, check) { this.title = title; this.author = author; this.pages = pages; this.check = check; } - +// renders lib data into HTML 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); - } - //insert updated row 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; - - //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 = ""; - if (myLibrary[i].check == true) { - readStatus = "Yes"; - } else { - readStatus = "No"; - } - changeBut.innerText = readStatus; + let tableBody = document.querySelector("#display tbody"); + tableBody.innerHTML = ''; // get rid of all instead of one by one row deletion + + myLibrary.forEach((book, index) => { + let row = tableBody.insertRow(); + // post debate lets use textContent instead of innerHTML + row.insertCell(0).textContent = book.title; + row.insertCell(1).textContent = book.author; + row.insertCell(2).textContent = book.pages; + // 'read' status + const wasReadCell = row.insertCell(3); + const readStatusBtn = document.createElement("button"); + readStatusBtn.className = "btn btn-success"; + readStatusBtn.textContent = book.check ? "Yes" : "No"; + wasReadCell.appendChild(readStatusBtn); - changeBut.addEventListener("click", function () { - myLibrary[i].check = !myLibrary[i].check; + readStatusBtn.addEventListener("click", function () { + book.check = !book.check; 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"; - delButton.addEventListener("click", function () { - alert(`You've deleted title: ${myLibrary[i].title}`); - myLibrary.splice(i, 1); + const deleteCell = row.insertCell(4); + const deleteBtn = document.createElement("button"); + deleteBtn.className = "btn btn-warning"; + deleteBtn.innerHTML = "Delete"; + deleteCell.appendChild(deleteBtn); + deleteBtn.addEventListener("click", function () { + const deletedTitle = myLibrary[index].title; + myLibrary.splice(index, 1); render(); + alert(`You've deleted title: ${deletedTitle}`); }); - } + }); } +// moved to end to make sure all is defined before load +window.addEventListener("load", function () { + populateStorage(); + render(); +}); From 6980aeb8a9f1e2a71a5a0795ff161cf3420213ce Mon Sep 17 00:00:00 2001 From: Dave-Vermeulen Date: Wed, 20 Aug 2025 16:56:10 +0200 Subject: [PATCH 5/6] use validator to tidy up index.html --- debugging/book-library/index.html | 58 +++++++------------------------ 1 file changed, 12 insertions(+), 46 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 2628651d..fde688c6 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,20 +1,14 @@ - + - - + The Book Report + + - - + + @@ -30,43 +24,15 @@

Library

- + - + - + - +
@@ -93,4 +59,4 @@

Library

- + \ No newline at end of file From 3dd9e9a127a77d9fc600eabd3e0d9a4c03968a1b Mon Sep 17 00:00:00 2001 From: Dave-Vermeulen Date: Wed, 20 Aug 2025 17:47:14 +0200 Subject: [PATCH 6/6] updating code to accommodate PR. --- debugging/book-library/index.html | 28 ++++++----- debugging/book-library/script.js | 80 ++++++++++++++++++++----------- 2 files changed, 66 insertions(+), 42 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index fde688c6..eb79f250 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -22,20 +22,22 @@

Library

-
- - - - - - - - -
+
+
+ + + + + + + + +
+
- +
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 6ff286c3..faefadee 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -5,36 +5,36 @@ const titleInput = document.getElementById("title"); const authorInput = document.getElementById("author"); const pagesInput = document.getElementById("pages"); const checkInput = document.getElementById("check"); +const addBookForm = document.getElementById("addBookForm"); + // populate the library with some default books if it's empty 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); + let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true); myLibrary.push(book1); myLibrary.push(book2); - } -} -//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 == "" || // cant be null so removed all that - authorInput.value.trim == "" || - pagesInput.value.trim == "" - ) { - alert("Please fill all fields!"); - return false; - } else { - let newBook = new Book(titleInput.value, authorInput.value, parseInt(pagesInput.value), checkInput.checked); - myLibrary.push(newBook); - //clear form after adding newBook - titleInput.value = ''; - authorInput.value = ''; - pagesInput.value = ''; - checkInput.value = false; - render(); } } + +// this function is now exclusively for adding a new book to the array and rendering, replaced the old submit() +function addBookToLibrary() { + let newBook = new Book( + titleInput.value, + authorInput.value, + parseInt(pagesInput.value), + checkInput.checked + ); + myLibrary.push(newBook); + addBookForm.reset(); + render(); +} + +addBookForm.addEventListener('submit', function (event) { + event.preventDefault(); // prevents the default page reload + addBookToLibrary(); +}); + // book constructor function Book(title, author, pages, check) { this.title = title; @@ -42,17 +42,37 @@ function Book(title, author, pages, check) { this.pages = pages; this.check = check; } -// renders lib data into HTML + +function displayNotification(message) { + const container = document.getElementById("notification-container"); + container.innerHTML = ``; + setTimeout(() => { + const alert = container.querySelector('.alert'); + if (alert) { + alert.classList.remove('show'); + alert.classList.add('fade'); + setTimeout(() => + alert.remove(), 150); + } + }, 3000); // 3 secs +} + +// renders library data into HTML function render() { let tableBody = document.querySelector("#display tbody"); - tableBody.innerHTML = ''; // get rid of all instead of one by one row deletion - + tableBody.innerHTML = ''; + myLibrary.forEach((book, index) => { let row = tableBody.insertRow(); - // post debate lets use textContent instead of innerHTML row.insertCell(0).textContent = book.title; row.insertCell(1).textContent = book.author; row.insertCell(2).textContent = book.pages; + // 'read' status const wasReadCell = row.insertCell(3); const readStatusBtn = document.createElement("button"); @@ -68,17 +88,19 @@ function render() { const deleteCell = row.insertCell(4); const deleteBtn = document.createElement("button"); deleteBtn.className = "btn btn-warning"; - deleteBtn.innerHTML = "Delete"; + deleteBtn.textContent = "Delete"; deleteCell.appendChild(deleteBtn); + deleteBtn.addEventListener("click", function () { const deletedTitle = myLibrary[index].title; myLibrary.splice(index, 1); render(); - alert(`You've deleted title: ${deletedTitle}`); + displayNotification(`You've deleted "${deletedTitle}"`); }); }); } -// moved to end to make sure all is defined before load + +// ensures functions are defined before being called on page load window.addEventListener("load", function () { populateStorage(); render();