From ee2cff998a90d8bb2d39ba0798228869d6d725c8 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 20 Aug 2026 15:29:22 +0100 Subject: [PATCH 01/18] fix syntax error on line 57 --- 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 75ce6c1d3..daef66a6c 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -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--) { // there was a syntax error here the ")" was missing table.deleteRow(n); } //insert updated row and cells From 6bed9db92ca76b9b16a62d00407dfdf27dbd33d5 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 20 Aug 2026 15:39:32 +0100 Subject: [PATCH 02/18] on line 41 not 'library', 'myLibrary', and 'title.value' is repeated --- debugging/book-library/script.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index daef66a6c..b7b315e9d 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,8 @@ function render() { let table = document.getElementById("display"); let rowsNumber = table.rows.length; //delete old table - for (let n = rowsNumber - 1; n > 0; n--) { // there was a syntax error here the ")" was missing + for (let n = rowsNumber - 1; n > 0; n--) { + // there was a syntax error here the ")" was missing table.deleteRow(n); } //insert updated row and cells From 44d9deaaaac8c0e3b4de3e70c33751398e078bf4 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 20 Aug 2026 15:44:59 +0100 Subject: [PATCH 03/18] deleteButton was inconsistent variable, change to deleteBut, change clicks to click --- 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 b7b315e9d..d0a077657 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -90,12 +90,12 @@ function render() { }); //add delete button to every row and render again - let delButton = document.createElement("button"); + let delBut = document.createElement("button"); delBut.id = i + 5; deleteCell.appendChild(delBut); delBut.className = "btn btn-warning"; delBut.innerHTML = "Delete"; - delBut.addEventListener("clicks", function () { + delBut.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); From a963df2106035f4b2c680606723a1c84230acf12 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 20 Aug 2026 16:12:18 +0100 Subject: [PATCH 04/18] add , and lang='en' --- debugging/book-library/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71e..4a08467da 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,7 +1,7 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> - <title> + My Book Library Date: Thu, 20 Aug 2026 16:29:28 +0100 Subject: [PATCH 05/18] fix , add extra --- debugging/book-library/index.html | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 4a08467da..a268ce29b 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -3,10 +3,9 @@ My Book Library + charset="utf-8" /> + + @@ -90,7 +89,6 @@

Library

- - + - + \ No newline at end of file From 50a35c6882346727d0496a4201c5e78a716c6dd9 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 20 Aug 2026 16:41:57 +0100 Subject: [PATCH 06/18] add defer to sccript links --- debugging/book-library/index.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index a268ce29b..aff92f531 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -5,10 +5,11 @@ - - - - + + + + Library

Add books to your virtual library

- @@ -30,7 +31,7 @@

Library

Date: Thu, 20 Aug 2026 16:50:28 +0100 Subject: [PATCH 07/18] add main tag --- debugging/book-library/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index aff92f531..8bcc4dc61 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -18,6 +18,7 @@ +

Library

Add books to your virtual library

@@ -39,7 +40,7 @@

Library

/> Library +
\ No newline at end of file From 2073970a7ca2a337a585b973d48f00bfb724d3f6 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 20 Aug 2026 17:24:04 +0100 Subject: [PATCH 08/18] add author validation conditions, --- debugging/book-library/script.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index d0a077657..f307a609d 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -29,6 +29,8 @@ const check = document.getElementById("check"); //via Book function and start render function function submit() { if ( + author.value == null || + author.value == "" || title.value == null || title.value == "" || pages.value == null || @@ -61,7 +63,7 @@ function render() { //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); @@ -77,7 +79,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 8ad66175bd4e83e378bb713cbe305254154d3661 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 20 Aug 2026 22:17:26 +0100 Subject: [PATCH 09/18] change delete button details --- debugging/book-library/script.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index f307a609d..6618deb56 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -98,9 +98,14 @@ function render() { delBut.className = "btn btn-warning"; delBut.innerHTML = "Delete"; delBut.addEventListener("click", function () { - alert(`You've deleted title: ${myLibrary[i].title}`); + const deletedTitle = myLibrary[i].title; + myLibrary.splice(i, 1); render(); + + setTimeout(function () { + alert(`You've deleted title: ${deletedTitle}`); + }, 0.5); }); } } From e6bd73683337c5fb616e0f7498207e619a9ac24f Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 12:49:40 +0100 Subject: [PATCH 10/18] Refactor HTML structure and improve form layout --- debugging/book-library/index.html | 187 ++++++++++++++++++------------ 1 file changed, 112 insertions(+), 75 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 8bcc4dc61..3b58ab2c9 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -2,14 +2,29 @@ My Book Library + - - - - - + + + + + +
-
-

Library

-

Add books to your virtual library

-
+
+

Library

+

Add books to your virtual library

+
+ + - +
+
+
+

* Required fields

-
-
- - - - - - - - + + + + + + + + + +
+ + +
+ + +
+
-
- - - - - - - - - - - - - - - - - - - -
TitleAuthorNumber of PagesRead
+ + + + + + + + + + + + + +
TitleAuthorNumber of PagesRead
+ - \ No newline at end of file + From 1bb9eae09a31fad232375a64e2d5a8e2777cc4f0 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 12:53:40 +0100 Subject: [PATCH 11/18] Change book management and some forms --- debugging/book-library/script.js | 158 +++++++++++++++++-------------- 1 file changed, 87 insertions(+), 71 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 6618deb56..a712204b9 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,49 +1,66 @@ let myLibrary = []; -window.addEventListener("load", function (e) { +window.addEventListener("load", function () { populateStorage(); render(); }); function populateStorage() { - if (myLibrary.length == 0) { - let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); - let book2 = new Book( + if (myLibrary.length === 0) { + const book1 = new Book( + "Robison 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); - render(); } } -const title = document.getElementById("title"); -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 ( - author.value == null || - author.value == "" || - title.value == null || - title.value == "" || - pages.value == null || - 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(); + +// Get the form and its input elements +const bookForm = document.getElementById("book-form"); +const titleInput = document.getElementById("title"); +const authorInput = document.getElementById("author"); +const pagesInput = document.getElementById("pages"); +const checkInput = document.getElementById("check"); + + +// Add a new book when the form is submitted +bookForm.addEventListener("submit", function (event) { + // Stop the page from refreshing when the form is submitted + event.preventDefault(); + + // Browser validation checks the required fields and page number + if (!bookForm.checkValidity()) { + bookForm.reportValidity(); + return; } -} + + const book = new Book( + titleInput.value.trim(), + authorInput.value.trim(), + Number(pagesInput.value), + checkInput.checked + ); + + myLibrary.push(book); + + render(); + + // Clear the form after adding the book + bookForm.reset(); +}); + function Book(title, author, pages, check) { this.title = title; @@ -52,60 +69,59 @@ function Book(title, author, pages, check) { this.check = check; } + function render() { - let table = document.getElementById("display"); - let rowsNumber = table.rows.length; - //delete old table - for (let n = rowsNumber - 1; n > 0; n--) { - // there was a syntax error here the ")" was missing - 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; - - changeBut.addEventListener("click", function () { + const tableBody = document.querySelector("#display tbody"); + + // Delete the old rows before rendering the updated list + tableBody.innerHTML = ""; + + for (let i = 0; i < myLibrary.length; i++) { + const row = tableBody.insertRow(); + + const titleCell = row.insertCell(0); + const authorCell = row.insertCell(1); + const pagesCell = row.insertCell(2); + const wasReadCell = row.insertCell(3); + const deleteCell = row.insertCell(4); + + // Add the book information to the table + titleCell.textContent = myLibrary[i].title; + authorCell.textContent = myLibrary[i].author; + pagesCell.textContent = myLibrary[i].pages; + + // Add a button for changing the read status + const changeButton = document.createElement("button"); + + changeButton.className = "btn btn-success"; + changeButton.textContent = myLibrary[i].check ? "Yes" : "No"; + + wasReadCell.appendChild(changeButton); + + changeButton.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; render(); }); - //add delete button to every row and render again - let delBut = document.createElement("button"); - delBut.id = i + 5; - deleteCell.appendChild(delBut); - delBut.className = "btn btn-warning"; - delBut.innerHTML = "Delete"; - delBut.addEventListener("click", function () { + // Add a delete button to the row + const deleteButton = document.createElement("button"); + + deleteButton.className = "btn btn-warning"; + deleteButton.textContent = "Delete"; + + deleteCell.appendChild(deleteButton); + + deleteButton.addEventListener("click", function () { const deletedTitle = myLibrary[i].title; myLibrary.splice(i, 1); + render(); + // Show the message after the book has been removed setTimeout(function () { alert(`You've deleted title: ${deletedTitle}`); - }, 0.5); + }, 0); }); } } From 718d34c239415dfd05269903788b59086a69a229 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 13:06:02 +0100 Subject: [PATCH 12/18] refactor beek-library --- debugging/book-library/script.js | 160 +++++++++++++++++-------------- 1 file changed, 88 insertions(+), 72 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 6618deb56..0dad44ecb 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,49 +1,66 @@ let myLibrary = []; -window.addEventListener("load", function (e) { +window.addEventListener("load", function () { populateStorage(); render(); }); function populateStorage() { - if (myLibrary.length == 0) { - let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); - let book2 = new Book( + if (myLibrary.length === 0) { + const book1 = new Book( + "Robison 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); - render(); } } -const title = document.getElementById("title"); -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 ( - author.value == null || - author.value == "" || - title.value == null || - title.value == "" || - pages.value == null || - 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(); + +// Get the form and its input elements +const bookForm = document.getElementById("book-form"); +const titleInput = document.getElementById("title"); +const authorInput = document.getElementById("author"); +const pagesInput = document.getElementById("pages"); +const checkInput = document.getElementById("check"); + + +// Add a new book when the form is submitted +bookForm.addEventListener("submit", function (event) { + // Stop the page from refreshing when the form is submitted + event.preventDefault(); + + // Browser validation checks the required fields and page number + if (!bookForm.checkValidity()) { + bookForm.reportValidity(); + return; } -} + + const book = new Book( + titleInput.value.trim(), + authorInput.value.trim(), + Number(pagesInput.value), + checkInput.checked + ); + + myLibrary.push(book); + + render(); + + // Clear the form after adding the book + bookForm.reset(); +}); + function Book(title, author, pages, check) { this.title = title; @@ -52,60 +69,59 @@ function Book(title, author, pages, check) { this.check = check; } + function render() { - let table = document.getElementById("display"); - let rowsNumber = table.rows.length; - //delete old table - for (let n = rowsNumber - 1; n > 0; n--) { - // there was a syntax error here the ")" was missing - 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; - - changeBut.addEventListener("click", function () { + const tableBody = document.querySelector("#display tbody"); + + // Delete the old rows before rendering the updated list + tableBody.innerHTML = ""; + + for (let i = 0; i < myLibrary.length; i++) { + const row = tableBody.insertRow(); + + const titleCell = row.insertCell(0); + const authorCell = row.insertCell(1); + const pagesCell = row.insertCell(2); + const wasReadCell = row.insertCell(3); + const deleteCell = row.insertCell(4); + + // Add the book information to the table + titleCell.textContent = myLibrary[i].title; + authorCell.textContent = myLibrary[i].author; + pagesCell.textContent = myLibrary[i].pages; + + // Add a button for changing the read status + const changeButton = document.createElement("button"); + + changeButton.className = "btn btn-success"; + changeButton.textContent = myLibrary[i].check ? "Yes" : "No"; + + wasReadCell.appendChild(changeButton); + + changeButton.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; render(); }); - //add delete button to every row and render again - let delBut = document.createElement("button"); - delBut.id = i + 5; - deleteCell.appendChild(delBut); - delBut.className = "btn btn-warning"; - delBut.innerHTML = "Delete"; - delBut.addEventListener("click", function () { + // Add a delete button to the row + const deleteButton = document.createElement("button"); + + deleteButton.className = "btn btn-warning"; + deleteButton.textContent = "Delete"; + + deleteCell.appendChild(deleteButton); + + deleteButton.addEventListener("click", function () { const deletedTitle = myLibrary[i].title; myLibrary.splice(i, 1); + render(); + // Show the message after the book has been removed setTimeout(function () { alert(`You've deleted title: ${deletedTitle}`); - }, 0.5); + }, 0); }); } -} +} \ No newline at end of file From 16396b55c898f3f6736f98d3d19e9d3861af965d Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 13:06:27 +0100 Subject: [PATCH 13/18] add styling --- debugging/book-library/style.css | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 302950cb8..3bd26dc1f 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -1,7 +1,5 @@ .form-group { width: 400px; - height: 300px; - align-self: left; padding-left: 20px; } @@ -9,11 +7,23 @@ display: block; } -.form-check-label { +.form-check { padding-left: 20px; - margin: 5px 0px 5px 0px; + margin: 5px 0; } button.btn-info { margin: 20px; } + +.form-group label { + margin-top: 10px; +} + +.form-group .btn-primary { + margin-top: 15px; +} + +.text-danger { + font-weight: bold; +} \ No newline at end of file From ec7bc67d103f38d067d15db45bd12fa38ee05746 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 13:08:42 +0100 Subject: [PATCH 14/18] make changes after run through html validator and after general feedback --- debugging/book-library/index.html | 185 ++++++++++++++++++------------ 1 file changed, 111 insertions(+), 74 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 8bcc4dc61..c81d5a2e6 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -2,14 +2,29 @@ My Book Library + - - - - - + + + + + +
-
-

Library

-

Add books to your virtual library

-
+
+

Library

+

Add books to your virtual library

+
+ + - +
+
+
+

* Required fields

-
-
- - - - - - - - + + + + + + + + + +
+ + +
+ + +
+
-
- - - - - - - - - - - - - - - - - - - -
TitleAuthorNumber of PagesRead
+ + + + + + + + + + + + + +
TitleAuthorNumber of PagesRead
+ \ No newline at end of file From 1b1390eb0d3344d4927600f573edcc74b82b9c2b Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 13:38:40 +0100 Subject: [PATCH 15/18] second attempt --- debugging/book-library/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 3b58ab2c9..c81d5a2e6 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -131,4 +131,4 @@

Library

- + \ No newline at end of file From 7560feaeb2364007306b1d180d96ce0de819d208 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 13:43:48 +0100 Subject: [PATCH 16/18] refactor book handling, and deletion delay --- debugging/book-library/.vscode/settings.json | 3 +++ debugging/book-library/script.js | 15 +++------------ 2 files changed, 6 insertions(+), 12 deletions(-) create mode 100644 debugging/book-library/.vscode/settings.json diff --git a/debugging/book-library/.vscode/settings.json b/debugging/book-library/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/debugging/book-library/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 0dad44ecb..4747ebd82 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -7,12 +7,7 @@ window.addEventListener("load", function () { function populateStorage() { if (myLibrary.length === 0) { - const book1 = new Book( - "Robison Crusoe", - "Daniel Defoe", - 252, - true - ); + const book1 = new Book("Robison Crusoe", "Daniel Defoe", 252, true); const book2 = new Book( "The Old Man and the Sea", @@ -26,7 +21,6 @@ function populateStorage() { } } - // Get the form and its input elements const bookForm = document.getElementById("book-form"); const titleInput = document.getElementById("title"); @@ -34,7 +28,6 @@ const authorInput = document.getElementById("author"); const pagesInput = document.getElementById("pages"); const checkInput = document.getElementById("check"); - // Add a new book when the form is submitted bookForm.addEventListener("submit", function (event) { // Stop the page from refreshing when the form is submitted @@ -61,7 +54,6 @@ bookForm.addEventListener("submit", function (event) { bookForm.reset(); }); - function Book(title, author, pages, check) { this.title = title; this.author = author; @@ -69,7 +61,6 @@ function Book(title, author, pages, check) { this.check = check; } - function render() { const tableBody = document.querySelector("#display tbody"); @@ -121,7 +112,7 @@ function render() { // Show the message after the book has been removed setTimeout(function () { alert(`You've deleted title: ${deletedTitle}`); - }, 0); + }, 3); }); } -} \ No newline at end of file +} From 029a35b1070f0ca77a29dccc79ed77e41ed2354b Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 15:09:14 +0100 Subject: [PATCH 17/18] change myLibrary variarle as constant to prevent reassignement --- 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 4747ebd82..4d3319a35 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,4 +1,4 @@ -let myLibrary = []; +const myLibrary = []; window.addEventListener("load", function () { populateStorage(); From 415eb6b8034697a5b6df89a22722eb4ead13cb9b Mon Sep 17 00:00:00 2001 From: vmoratti Date: Fri, 21 Aug 2026 15:51:58 +0100 Subject: [PATCH 18/18] addressed some issues --- debugging/book-library/script.js | 44 ++++++++++++++++++++------------ 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 4d3319a35..da4fa953f 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,9 +1,20 @@ const myLibrary = []; -window.addEventListener("load", function () { +const bookForm = document.getElementById("book-form"); +const titleInput = document.getElementById("title"); +const authorInput = document.getElementById("author"); +const pagesInput = document.getElementById("pages"); +const checkInput = document.getElementById("check"); + +// Put the code that runs when the page starts in one place +function setup() { populateStorage(); render(); -}); + + bookForm.addEventListener("submit", handleSubmit); +} + +window.addEventListener("load", setup); function populateStorage() { if (myLibrary.length === 0) { @@ -21,18 +32,21 @@ function populateStorage() { } } -// Get the form and its input elements -const bookForm = document.getElementById("book-form"); -const titleInput = document.getElementById("title"); -const authorInput = document.getElementById("author"); -const pagesInput = document.getElementById("pages"); -const checkInput = document.getElementById("check"); - // Add a new book when the form is submitted -bookForm.addEventListener("submit", function (event) { +function handleSubmit(event) { // Stop the page from refreshing when the form is submitted event.preventDefault(); + // Remove spaces before checking the title and author + const title = titleInput.value.trim(); + const author = authorInput.value.trim(); + + // Check that title and author are not empty + if (title === "" || author === "") { + alert("Please enter a title and author."); + return; + } + // Browser validation checks the required fields and page number if (!bookForm.checkValidity()) { bookForm.reportValidity(); @@ -40,8 +54,8 @@ bookForm.addEventListener("submit", function (event) { } const book = new Book( - titleInput.value.trim(), - authorInput.value.trim(), + title, + author, Number(pagesInput.value), checkInput.checked ); @@ -52,7 +66,7 @@ bookForm.addEventListener("submit", function (event) { // Clear the form after adding the book bookForm.reset(); -}); +} function Book(title, author, pages, check) { this.title = title; @@ -110,9 +124,7 @@ function render() { render(); // Show the message after the book has been removed - setTimeout(function () { - alert(`You've deleted title: ${deletedTitle}`); - }, 3); + alert(`You've deleted title: ${deletedTitle}`); }); } }