From fee43eeaf7a2e9702615906a23896d3f4a591601 Mon Sep 17 00:00:00 2001 From: Imran Mohamed Date: Tue, 25 Nov 2025 13:22:41 +0000 Subject: [PATCH] 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
Author Number of Pages ReadDelete