From fee43eeaf7a2e9702615906a23896d3f4a591601 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Tue, 25 Nov 2025 13:22:41 +0000 Subject: [PATCH 01/23] Refactor HTML structure, enhance form validation, and improve JavaScript functionality for book library application & complete code reading tasks --- debugging/book-library/index.html | 30 +++++++------- debugging/book-library/readme.md | 11 ++--- debugging/book-library/script.js | 67 +++++++++++++++---------------- debugging/book-library/style.css | 19 +++++++-- debugging/code-reading/readme.md | 8 ++++ 5 files changed, 77 insertions(+), 58 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..e5d4667f 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,12 +1,13 @@ - + - + My VirtualLibrary + @@ -23,15 +24,15 @@

Library

Add books to your virtual library

-
-
+
Library /> Library class="form-control" id="pages" name="pages" + min="1" required /> -
+ > Add Book +
@@ -77,7 +77,7 @@

Library

- + diff --git a/debugging/book-library/readme.md b/debugging/book-library/readme.md index 3abe8c13..025dde65 100644 --- a/debugging/book-library/readme.md +++ b/debugging/book-library/readme.md @@ -12,12 +12,13 @@ My website should be able to: ## Bugs to be fixed -1. Website loads but doesn't show any books -2. Error in console when you try to add a book -3. It uses the title name as the author name -4. Delete button is broken -5. When I add a book that I say I've read - it saves the wrong answer +1. Website loads but doesn't show any books - fixed +2. Error in console when you try to add a book - fixed +3. It uses the title name as the author name - fixed +4. Delete button is broken - fixed +5. When I add a book that I say I've read - it saves the wrong answer - fixed I think there are other some other small bugs in my code...but I'm lazy so I can't fix them all. +- unsure if ive caught all the bugs but have made changes I thought were pertinent and ensure full lighthouse score I wish somebody would help me! diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1d..3c55ea96 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -2,11 +2,16 @@ let myLibrary = []; window.addEventListener("load", function (e) { populateStorage(); - render(); + const form = document.getElementById("bookForm"); + form?.addEventListener("submit", e => { + e.preventDefault(); + }); + const addBookBtn = document.getElementById("addBookBtn"); + addBookBtn?.addEventListener("click", addBook); }); function populateStorage() { - if (myLibrary.length == 0) { + if (myLibrary.length === 0) { let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); let book2 = new Book( "The Old Man and the Sea", @@ -20,25 +25,24 @@ function populateStorage() { } } -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 ( - title.value == null || - title.value == "" || - pages.value == null || - pages.value == "" - ) { +function addBook() { + const title = document.getElementById("title"); + const author = document.getElementById("author"); + const pages = document.getElementById("pages"); + const check = document.getElementById("check"); + if (!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); + title.value = ""; + author.value = ""; + pages.value = ""; + check.checked = false; + alert (`You've added ${book.title} to your library.`); render(); } } @@ -54,7 +58,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 @@ -66,22 +70,17 @@ 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; + titleCell.innerText = myLibrary[i].title; + authorCell.innerText = myLibrary[i].author; + pagesCell.innerText = 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"; + changeBut.type = "button"; wasReadCell.appendChild(changeBut); - let readStatus = ""; - if (myLibrary[i].check == false) { - readStatus = "Yes"; - } else { - readStatus = "No"; - } + let readStatus = myLibrary[i].check ? "Yes" : "No"; changeBut.innerText = readStatus; + changeBut.className = 'btn '+ (myLibrary[i].check ? 'btn-success' : 'btn-danger'); changeBut.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; @@ -90,12 +89,12 @@ 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 () { - alert(`You've deleted title: ${myLibrary[i].title}`); + delButton.type = "button"; + deleteCell.appendChild(delButton); + delButton.className = "btn btn-danger"; + delButton.innerText = "Delete"; + delButton.addEventListener("click", function () { + alert(`You've deleted ${myLibrary[i].title} from your library.`); myLibrary.splice(i, 1); render(); }); diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 302950cb..a561b55f 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -1,19 +1,30 @@ +.collapse.show{ + display: flex; +} + .form-group { width: 400px; height: 300px; - align-self: left; + align-self: flex-start; padding-left: 20px; } .btn { - display: block; + font-weight: 600; + color: black; } .form-check-label { padding-left: 20px; - margin: 5px 0px 5px 0px; + padding-top: 10px; + margin: 5px ; } -button.btn-info { +button[data-toggle="collapse"] { margin: 20px; } + +#add-book-btn { + display: block; + margin-top: 10px; +} \ No newline at end of file diff --git a/debugging/code-reading/readme.md b/debugging/code-reading/readme.md index 4090c14c..d971ba56 100644 --- a/debugging/code-reading/readme.md +++ b/debugging/code-reading/readme.md @@ -17,6 +17,8 @@ Take a look at the following code: Explain why line 5 and line 8 output different numbers. +Due to x holding different values in global scope and functional scope + ## Question 2 Take a look at the following code: @@ -35,6 +37,9 @@ console.log(y); What will be the output of this code. Explain your answer in 50 words or less. +The first console.log will log 10 to the console, while the second will log undefined and throw a reference error due to y only being available in the function + + ## Question 3 Take a look at the following code: @@ -62,3 +67,6 @@ console.log(y); ``` What will be the output of this code. Explain your answer in 50 words or less. + +First console.log outputs 9 as x is passed and the f1 call doesn't alter its value outside the fn. +Second console.log prints the object {x:10} as f2 increments y.x by 1 \ No newline at end of file From 2648f5404a586120f0d1db1562cbd22a7d9337e2 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 10:44:33 +0000 Subject: [PATCH 02/23] fix meta tag errors in html --- debugging/book-library/index.html | 156 +++++++++++++----------------- 1 file changed, 67 insertions(+), 89 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index e5d4667f..f93dcf25 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,96 +1,74 @@ - - My VirtualLibrary - - - - - - - - - -
-

Library

-

Add books to your virtual library

-
+ + + + My Virtual Library + + + + + + + - + +
+

Library

+

Add books to your virtual library

+
-
-
- - - - - - - - - -
+ -
Author Number of Pages ReadDelete
- - - - - - - - - - - - - - - - - - -
TitleAuthorNumber of PagesReadDelete
+
+
+ + + + + + + + +
+
- - - + + + + + + + + + + + + + + + + + + + +
TitleAuthorNumber of PagesReadDelete
+ + + + + \ No newline at end of file From bcf8c09e7388308bd71789016d83614802915080 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 10:48:03 +0000 Subject: [PATCH 03/23] update script tag to use module type --- 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 f93dcf25..cdd3656f 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -4,8 +4,8 @@ - My Virtual Library + My Virtual Library + \ No newline at end of file From f95fbc6824967c0ac10ff1188b990ca3a32093a3 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:14:28 +0000 Subject: [PATCH 04/23] fix ID for add book button in event listener --- 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 3c55ea96..08069c86 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -6,7 +6,7 @@ window.addEventListener("load", function (e) { form?.addEventListener("submit", e => { e.preventDefault(); }); - const addBookBtn = document.getElementById("addBookBtn"); + const addBookBtn = document.getElementById("add-book-btn"); addBookBtn?.addEventListener("click", addBook); }); From 93041666bd575003a1344a9e2dca66d342556713 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:17:19 +0000 Subject: [PATCH 05/23] use querySelector to target form tag --- 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 08069c86..6c3122bc 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -2,7 +2,7 @@ let myLibrary = []; window.addEventListener("load", function (e) { populateStorage(); - const form = document.getElementById("bookForm"); + const form = document.querySelector('form'); form?.addEventListener("submit", e => { e.preventDefault(); }); From df6e09d974b4b31721dcdcb18c68a4acb7e1c7ab Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:19:12 +0000 Subject: [PATCH 06/23] convert pages value to a number when adding a book --- 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 6c3122bc..51b3bc1b 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -36,7 +36,7 @@ function addBook() { if (!title.value || !author.value || !pages.value) { alert("Please fill all fields!"); } else { - let book = new Book(title.value, author.value, pages.value, check.checked); + let book = new Book(title.value, author.value, Number(pages.value), check.checked); myLibrary.push(book); title.value = ""; author.value = ""; From 778d81db4ce86b6ca29d2dc6668949a9170a9287 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:24:09 +0000 Subject: [PATCH 07/23] change variable names for input elements to reflect what they store --- debugging/book-library/script.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 51b3bc1b..272327de 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -29,19 +29,19 @@ function populateStorage() { //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 addBook() { - const title = document.getElementById("title"); - const author = document.getElementById("author"); - const pages = document.getElementById("pages"); - const check = document.getElementById("check"); - if (!title.value || !author.value || !pages.value) { + const titleInput = document.getElementById("title"); + const authorInput = document.getElementById("author"); + const pagesInput = document.getElementById("pages"); + const checkInput = document.getElementById("check"); + if (!titleInput.value || !authorInput.value || !pagesInput.value) { alert("Please fill all fields!"); } else { - let book = new Book(title.value, author.value, Number(pages.value), check.checked); + let book = new Book(titleInput.value, authorInput.value, Number(pagesInput.value), checkInput.checked); myLibrary.push(book); - title.value = ""; - author.value = ""; - pages.value = ""; - check.checked = false; + titleInput.value = ""; + authorInput.value = ""; + pagesInput.value = ""; + checkInput.checked = false; alert (`You've added ${book.title} to your library.`); render(); } From aea2a4362d721db590f0d29ca3efbe122799d1d5 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:24:32 +0000 Subject: [PATCH 08/23] fix typo in book1 --- 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 272327de..55c81d2f 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -12,7 +12,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", From 58798b59b73f3269eb8a572c7e2ebc63e6a9c690 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:36:00 +0000 Subject: [PATCH 09/23] normalize, sanitize and validate data on input --- debugging/book-library/script.js | 40 +++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 55c81d2f..3bb1e878 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -26,25 +26,37 @@ function populateStorage() { } -//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 addBook() { const titleInput = document.getElementById("title"); const authorInput = document.getElementById("author"); const pagesInput = document.getElementById("pages"); const checkInput = document.getElementById("check"); - if (!titleInput.value || !authorInput.value || !pagesInput.value) { - alert("Please fill all fields!"); - } else { - let book = new Book(titleInput.value, authorInput.value, Number(pagesInput.value), checkInput.checked); - myLibrary.push(book); - titleInput.value = ""; - authorInput.value = ""; - pagesInput.value = ""; - checkInput.checked = false; - alert (`You've added ${book.title} to your library.`); - render(); + + + const titleValue = titleInput.value.trim(); + const authorValue = authorInput.value.trim(); + const pagesValue = Number(pagesInput.value); + + if (!titleValue || !authorValue) { + alert("Please fill in all the fields!"); + return; + } + + if (pagesValue < 1 || !Number.isInteger(pagesValue)) { + alert("Pages must be a positive integer!"); + return; } + + let book = new Book(titleValue, authorValue, pagesValue, checkInput.checked); + myLibrary.push(book); + + titleInput.value = ""; + authorInput.value = ""; + pagesInput.value = ""; + checkInput.checked = false; + + alert(`You've added ${book.title} to your library.`); + render(); } function Book(title, author, pages, check) { @@ -80,7 +92,7 @@ function render() { wasReadCell.appendChild(changeBut); let readStatus = myLibrary[i].check ? "Yes" : "No"; changeBut.innerText = readStatus; - changeBut.className = 'btn '+ (myLibrary[i].check ? 'btn-success' : 'btn-danger'); + changeBut.className = 'btn ' + (myLibrary[i].check ? 'btn-success' : 'btn-danger'); changeBut.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; From 2a58ad67536e81a14859804307021106b3429495 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:40:27 +0000 Subject: [PATCH 10/23] refactor to delete rows in one operation --- debugging/book-library/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 3bb1e878..f838ab74 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -68,10 +68,10 @@ 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--) { - table.deleteRow(n); + const tbody = table.querySelector('tbody'); + // delete old rows + if (tbody) { + tbody.innerHTML = ''; } //insert updated row and cells let length = myLibrary.length; From 8ac46e326d5891a0c51a08f93f0a73adbca2021a Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 16:58:22 +0000 Subject: [PATCH 11/23] fix delete message timing issue --- debugging/book-library/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index f838ab74..5d2bde1e 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -106,9 +106,10 @@ function render() { delButton.className = "btn btn-danger"; delButton.innerText = "Delete"; delButton.addEventListener("click", function () { - alert(`You've deleted ${myLibrary[i].title} from your library.`); + const deletedTitle = myLibrary[i].title; myLibrary.splice(i, 1); render(); + alert(`You've deleted ${deletedTitle} from your library.`); }); } } From 5691196a75b26ac2d645198aebb0f80317a31871 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 17:02:26 +0000 Subject: [PATCH 12/23] use textContent instead of innerText for rendering book details --- 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 5d2bde1e..9181bb3a 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -82,9 +82,9 @@ function render() { let pagesCell = row.insertCell(2); let wasReadCell = row.insertCell(3); let deleteCell = row.insertCell(4); - titleCell.innerText = myLibrary[i].title; - authorCell.innerText = myLibrary[i].author; - pagesCell.innerText = myLibrary[i].pages; + titleCell.textContent = myLibrary[i].title; + authorCell.textContent = myLibrary[i].author; + pagesCell.textContent = myLibrary[i].pages; //add and wait for action for read/unread button let changeBut = document.createElement("button"); From f6a40606f1c50ebacb9746f715a07b90857916d7 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 17:04:34 +0000 Subject: [PATCH 13/23] improve button naming and clarity --- debugging/book-library/script.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 9181bb3a..a9adda7a 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -87,25 +87,25 @@ function render() { pagesCell.textContent = myLibrary[i].pages; //add and wait for action for read/unread button - let changeBut = document.createElement("button"); - changeBut.type = "button"; - wasReadCell.appendChild(changeBut); + let toggleReadButton = document.createElement("button"); + toggleReadButton.type = "button"; + wasReadCell.appendChild(toggleReadButton); let readStatus = myLibrary[i].check ? "Yes" : "No"; - changeBut.innerText = readStatus; - changeBut.className = 'btn ' + (myLibrary[i].check ? 'btn-success' : 'btn-danger'); + toggleReadButton.innerText = readStatus; + toggleReadButton.className = 'btn ' + (myLibrary[i].check ? 'btn-success' : 'btn-danger'); - changeBut.addEventListener("click", function () { + toggleReadButton.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; render(); }); //add delete button to every row and render again - let delButton = document.createElement("button"); - delButton.type = "button"; - deleteCell.appendChild(delButton); - delButton.className = "btn btn-danger"; - delButton.innerText = "Delete"; - delButton.addEventListener("click", function () { + let deleteButton = document.createElement("button"); + deleteButton.type = "button"; + deleteCell.appendChild(deleteButton); + deleteButton.className = "btn btn-danger"; + deleteButton.innerText = "Delete"; + deleteButton.addEventListener("click", function () { const deletedTitle = myLibrary[i].title; myLibrary.splice(i, 1); render(); From d9acf456ed347b338e157f6112fd2d3428a883ed Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 18:45:49 +0000 Subject: [PATCH 14/23] fix page numbers in populateStorage function to use numbers --- 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 a9adda7a..9456c8e0 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -12,11 +12,11 @@ window.addEventListener("load", function (e) { function populateStorage() { if (myLibrary.length === 0) { - let book1 = new Book("Robinson 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", - "127", + 127, true ); myLibrary.push(book1); From c6bf51d4bf49441e1a8544382e8b8379a5164257 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 19:33:08 +0000 Subject: [PATCH 15/23] refactor addBook and render functions --- debugging/book-library/script.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 9456c8e0..10e295a7 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -31,30 +31,23 @@ function addBook() { const authorInput = document.getElementById("author"); const pagesInput = document.getElementById("pages"); const checkInput = document.getElementById("check"); - - const titleValue = titleInput.value.trim(); const authorValue = authorInput.value.trim(); const pagesValue = Number(pagesInput.value); - if (!titleValue || !authorValue) { alert("Please fill in all the fields!"); return; } - if (pagesValue < 1 || !Number.isInteger(pagesValue)) { alert("Pages must be a positive integer!"); return; } - let book = new Book(titleValue, authorValue, pagesValue, checkInput.checked); myLibrary.push(book); - titleInput.value = ""; authorInput.value = ""; pagesInput.value = ""; checkInput.checked = false; - alert(`You've added ${book.title} to your library.`); render(); } @@ -69,14 +62,12 @@ function Book(title, author, pages, check) { function render() { let table = document.getElementById("display"); const tbody = table.querySelector('tbody'); - // delete old rows if (tbody) { tbody.innerHTML = ''; } - //insert updated row and cells let length = myLibrary.length; for (let i = 0; i < length; i++) { - let row = table.insertRow(1); + let row = tbody.insertRow(); let titleCell = row.insertCell(0); let authorCell = row.insertCell(1); let pagesCell = row.insertCell(2); @@ -85,8 +76,6 @@ function render() { titleCell.textContent = myLibrary[i].title; authorCell.textContent = myLibrary[i].author; pagesCell.textContent = myLibrary[i].pages; - - //add and wait for action for read/unread button let toggleReadButton = document.createElement("button"); toggleReadButton.type = "button"; wasReadCell.appendChild(toggleReadButton); From e6143cbc74c58d4e397e8db5499c2e90cde20e82 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 19:33:41 +0000 Subject: [PATCH 16/23] use textContent instead of innerText for buttons --- 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 10e295a7..a9046788 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -80,7 +80,7 @@ function render() { toggleReadButton.type = "button"; wasReadCell.appendChild(toggleReadButton); let readStatus = myLibrary[i].check ? "Yes" : "No"; - toggleReadButton.innerText = readStatus; + toggleReadButton.textContent = readStatus; toggleReadButton.className = 'btn ' + (myLibrary[i].check ? 'btn-success' : 'btn-danger'); toggleReadButton.addEventListener("click", function () { @@ -93,7 +93,7 @@ function render() { deleteButton.type = "button"; deleteCell.appendChild(deleteButton); deleteButton.className = "btn btn-danger"; - deleteButton.innerText = "Delete"; + deleteButton.textContent = "Delete"; deleteButton.addEventListener("click", function () { const deletedTitle = myLibrary[i].title; myLibrary.splice(i, 1); From ea49aa2b2aeba22449840d48d8d549adebfd75f2 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 19:36:59 +0000 Subject: [PATCH 17/23] removed trailing slash on void elements --- debugging/book-library/index.html | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index cdd3656f..d240f298 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -4,7 +4,7 @@ - + My Virtual Library @@ -13,8 +13,8 @@ - + href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> + @@ -31,16 +31,15 @@

Library

- + + required> + required> From f2a5fcfb9ed8933ddb01618756727c97efbc4336 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 19:38:58 +0000 Subject: [PATCH 18/23] remove empty table row in book display --- debugging/book-library/index.html | 7 ------- 1 file changed, 7 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index d240f298..b28ed437 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -57,13 +57,6 @@

Library

- - - - - - - From 620b93cd696b3d67c42a870f86521b4c5c9c80ff Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 19:42:00 +0000 Subject: [PATCH 19/23] refactor render to protect against null tbody --- debugging/book-library/script.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index a9046788..a5f6e460 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -62,9 +62,8 @@ function Book(title, author, pages, check) { function render() { let table = document.getElementById("display"); const tbody = table.querySelector('tbody'); - if (tbody) { - tbody.innerHTML = ''; - } + if (!tbody) return; + tbody.innerHTML = ''; let length = myLibrary.length; for (let i = 0; i < length; i++) { let row = tbody.insertRow(); From 0b76c3319a10dc2dcd3783e4f04fbc72c49c0644 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 20:03:10 +0000 Subject: [PATCH 20/23] format button label for better readability and update button styles --- debugging/book-library/index.html | 3 ++- debugging/book-library/style.css | 20 +++++++++++++++++--- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index b28ed437..1a2b5b95 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -41,7 +41,8 @@

Library

-
diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index a561b55f..9caeb69c 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -9,10 +9,10 @@ padding-left: 20px; } -.btn { +/* .table .btn, +.form-group .btn { font-weight: 600; - color: black; -} +} */ .form-check-label { padding-left: 20px; @@ -27,4 +27,18 @@ button[data-toggle="collapse"] { #add-book-btn { display: block; margin-top: 10px; +} + +.btn-primary { + background-color: #0a3c8c; + border-color: #0a3c8c; +} + +.btn-success { + background-color: #1a6b2a; +} + +.btn-danger { + background-color: #8b0000; + border-color: #8b0000; } \ No newline at end of file From d349fa175af9d59aa0b8a761409fb0c457b30ed7 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 20:09:31 +0000 Subject: [PATCH 21/23] update button colors for accessibility --- debugging/book-library/style.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 9caeb69c..9e864f2f 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -30,15 +30,16 @@ button[data-toggle="collapse"] { } .btn-primary { - background-color: #0a3c8c; - border-color: #0a3c8c; + background-color: blue; + border-color: blue; } .btn-success { - background-color: #1a6b2a; + background-color: green; + border-color: green; } .btn-danger { - background-color: #8b0000; - border-color: #8b0000; + background-color: rgb(199, 0, 0); + border-color: rgb(199, 0, 0); } \ No newline at end of file From cbcd993e4a01af221f1ba543b3b123d13f30b592 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 20:22:29 +0000 Subject: [PATCH 22/23] tidy up --- debugging/book-library/script.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index a5f6e460..8ac6e59f 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -25,7 +25,6 @@ function populateStorage() { } } - function addBook() { const titleInput = document.getElementById("title"); const authorInput = document.getElementById("author"); @@ -87,7 +86,7 @@ function render() { render(); }); - //add delete button to every row and render again + let deleteButton = document.createElement("button"); deleteButton.type = "button"; deleteCell.appendChild(deleteButton); From 7f033718068c28e3e50cbdc03b0b36871796a1a9 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Mon, 8 Dec 2025 20:24:10 +0000 Subject: [PATCH 23/23] add button color for improved visibility --- debugging/book-library/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 9e864f2f..f7f8035a 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -9,10 +9,10 @@ padding-left: 20px; } -/* .table .btn, +.table .btn, .form-group .btn { - font-weight: 600; -} */ + color: white; +} .form-check-label { padding-left: 20px;