From adf10a026d00a9ce9fb26211977b2c57dd7fcb82 Mon Sep 17 00:00:00 2001 From: Emmanuelgessessew <163059051+Emmanuelgessessew@users.noreply.github.com> Date: Sun, 5 Jan 2025 21:28:32 +0000 Subject: [PATCH 1/4] Fix book submission and use 'myLibrary' instead of 'library'. --- .vscode/settings.json | 3 ++ debugging/book-library/script.js | 69 ++++---------------------------- 2 files changed, 10 insertions(+), 62 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1..4eb19b9 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -7,7 +7,7 @@ window.addEventListener("load", function (e) { function populateStorage() { if (myLibrary.length == 0) { - let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); + let book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true); let book2 = new Book( "The Old Man and the Sea", "Ernest Hemingway", @@ -25,79 +25,24 @@ 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 right input from forms and if it's ok, add the new book (object in array) +// via Book function and start render function function submit() { if ( title.value == null || title.value == "" || + author.value == null || + author.value == "" || pages.value == null || 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); // Use myLibrary here, not library render(); } } -function Book(title, author, pages, check) { - this.title = title; - this.author = author; - this.pages = pages; - 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-- { - 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 == false) { - readStatus = "Yes"; - } else { - readStatus = "No"; - } - changeBut.innerText = readStatus; - changeBut.addEventListener("click", function () { - myLibrary[i].check = !myLibrary[i].check; - 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 () { - alert(`You've deleted title: ${myLibrary[i].title}`); - myLibrary.splice(i, 1); - render(); - }); - } -} From 4d2e8f83db269b7b9d5f2e8b6cbae8638c0c9704 Mon Sep 17 00:00:00 2001 From: Emmanuelgessessew <163059051+Emmanuelgessessew@users.noreply.github.com> Date: Sun, 5 Jan 2025 21:29:57 +0000 Subject: [PATCH 2/4] Fix render to delete only old rows. --- debugging/book-library/script.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 4eb19b9..1e42d65 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -44,5 +44,19 @@ function submit() { render(); } } +function Book(title, author, pages, check) { + this.title = title; + this.author = author; + this.pages = pages; + this.check = check; +} + +function render() { + let table = document.getElementById("display"); + let rowsNumber = table.rows.length; + // Delete old table rows except for the header + for (let n = rowsNumber - 1; n > 0; n--) { + table.deleteRow(n); + } From 7239a23ea8d1844406f2131ee97cab0977816b57 Mon Sep 17 00:00:00 2001 From: Emmanuelgessessew <163059051+Emmanuelgessessew@users.noreply.github.com> Date: Sun, 5 Jan 2025 21:31:27 +0000 Subject: [PATCH 3/4] Insert rows and cells for each book --- debugging/book-library/script.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 1e42d65..bf4af56 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -58,5 +58,17 @@ function render() { for (let n = rowsNumber - 1; n > 0; n--) { table.deleteRow(n); } +// 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; From c4d3ae48d35be49b6de429ce801e1afdc8590f0f Mon Sep 17 00:00:00 2001 From: Emmanuelgessessew <163059051+Emmanuelgessessew@users.noreply.github.com> Date: Sun, 5 Jan 2025 21:32:16 +0000 Subject: [PATCH 4/4] Add delete button to each row and implement delete functionality --- debugging/book-library/script.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index bf4af56..d30bb87 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -72,3 +72,17 @@ for (let i = 0; i < length; i++) { authorCell.innerHTML = myLibrary[i].author; pagesCell.innerHTML = myLibrary[i].pages; +// Add a 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); + render(); +}); +} +} \ No newline at end of file