From 0229fca5d5ada4259aff17fed3f91f00bcb5bb49 Mon Sep 17 00:00:00 2001 From: gerbil1511 Date: Mon, 21 Jul 2025 14:47:12 +0100 Subject: [PATCH 1/5] Fix bugs in Book Library app so that website renders correctly --- debugging/book-library/index.html | 163 +++++++++++++++++------------- debugging/book-library/script.js | 88 +++++++++++----- debugging/book-library/style.css | 26 ++--- 3 files changed, 170 insertions(+), 107 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..35dfb65e 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,7 +1,7 @@ - + - + My Book Library -
-

Library

-

Add books to your virtual library

-
+
+
+

My Book Library

+

Add books to your virtual library

+
- +
+
+
+ -
-
- - - - - - - - +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
TitleAuthorNumber of PagesReadActions
+
+
+
- - - - - - - - - - - - - - - - - - - -
TitleAuthorNumber of PagesRead
- - + \ No newline at end of file diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1d..5a6da5b0 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,13 +1,37 @@ +// initialise an empty array to hold my book library let myLibrary = []; +// function to save my library to localStorage +function saveToStorage() { + // convert myLibrary array to a JSON string and save it + localStorage.setItem('myLibrary', JSON.stringify(myLibrary)); +} + +// function to load my library from localStorage +function loadFromStorage() { + // retrieve the JSON string from localStorage and parse it back to an array + const stored = localStorage.getItem('myLibrary'); + // only parse if there is something stored + if (stored) { + myLibrary = JSON.parse(stored); + } +} + window.addEventListener("load", function (e) { - populateStorage(); - render(); + // load saved books from local storage + loadFromStorage(); + // only add default books if myLibrary is empty + // this prevents overwriting existing books + if (myLibrary.length === 0) { + populateStorage(); + } + render(); }); function populateStorage() { + // add default books to myLibrary if it's empty on initial setup 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", @@ -28,22 +52,31 @@ 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() { + // add validation for empty fields if ( - title.value == null || title.value == "" || - pages.value == null || + 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); + // create a new book object and add it to myLibrary and save to storage + let book = new Book(title.value, author.value, pages.value, check.checked); + myLibrary.push(book); + saveToStorage(); // save the book after adding render(); + + // Clear the form after successful submission + title.value = ""; + author.value = ""; + pages.value = ""; + check.checked = false; } } function Book(title, author, pages, check) { + // constructor function to create a new book object this.title = title; this.author = author; this.pages = pages; @@ -51,53 +84,62 @@ function Book(title, author, pages, check) { } function render() { + // render the table with books from myLibrary let table = document.getElementById("display"); + // count the existing number of rows in the table let rowsNumber = table.rows.length; - //delete old table - for (let n = rowsNumber - 1; n > 0; n-- { + //delete all the rows except for the table header row (delete all rows except row 0) + for (let n = rowsNumber - 1; n > 0; n--) { table.deleteRow(n); } - //insert updated row and cells + //loop through each book and create a new row for each book, insert 5 cells per row let length = myLibrary.length; for (let i = 0; i < length; i++) { - let row = table.insertRow(1); + let row = table.insertRow(1); // insert new row at position 1 to keep the header intact 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); + + // fill the first 3 cells with book data 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 changeBtn = document.createElement("button"); + changeBtn.id = i; + wasReadCell.appendChild(changeBtn) let readStatus = ""; - if (myLibrary[i].check == false) { + if (myLibrary[i].check == true) { readStatus = "Yes"; + changeBtn.className = "btn btn-success"; } else { readStatus = "No"; + changeBtn.className = "btn btn-secondary"; } - changeBut.innerText = readStatus; + changeBtn.innerText = readStatus; + - changeBut.addEventListener("click", function () { + changeBtn.addEventListener("click", function () { myLibrary[i].check = !myLibrary[i].check; + saveToStorage(); // save after changing read status 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); + saveToStorage(); // save after deleting render(); }); } } +// log the library to console for debugging \ No newline at end of file diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 302950cb..1ad4dfbb 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -1,19 +1,19 @@ -.form-group { - width: 400px; - height: 300px; - align-self: left; - padding-left: 20px; +body { + background-color: #f8f9fa; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } -.btn { - display: block; +.table th { + background-color: #343a40; + color: white; + text-align: center; } -.form-check-label { - padding-left: 20px; - margin: 5px 0px 5px 0px; +.btn { + margin: 2px; + border-radius: 20px; } -button.btn-info { - margin: 20px; -} +.card { + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} \ No newline at end of file From 455f46c5935639ecac002c9cca2cec4f48a24bcc Mon Sep 17 00:00:00 2001 From: gerbil1511 Date: Mon, 21 Jul 2025 15:21:42 +0100 Subject: [PATCH 2/5] Add reading progress feature to book library app --- debugging/book-library/index.html | 167 ++++++++++++++++-------------- debugging/book-library/script.js | 18 ++++ 2 files changed, 110 insertions(+), 75 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 35dfb65e..a28c65fd 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -25,92 +25,109 @@

My Book Library

-
-
- +
+
+ +
+
+

Reading Progress

+
+
+
+
+ +
+
+
+
-
-
-
-
- - -
-
- - -
-
- - -
-
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
-
-
-
- - - - - - - - - - - - - - - - - - - -
TitleAuthorNumber of PagesReadActions
+
+ + + + + + + + + + + + + + + + + + + +
TitleAuthorNumber of PagesReadActions
+
-
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 5a6da5b0..9b683185 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -17,6 +17,21 @@ function loadFromStorage() { } } +// function to display the current number of books read vs unread +function updateProgressBar() { + const totalBooks = myLibrary.length; + const readBooks = myLibrary.filter(book => book.check).length; + const percent = totalBooks === 0 ? 0 : Math.round((readBooks / totalBooks) * 100); + + // update the progress bar text + document.getElementById('progress-header').innerText = `Read ${readBooks} out of ${totalBooks} books`; + + // update the progress bar width + const progressBar = document.getElementById('progress-bar'); + progressBar.style.width = percent + "%"; + +} + window.addEventListener("load", function (e) { // load saved books from local storage loadFromStorage(); @@ -91,6 +106,9 @@ function render() { //delete all the rows except for the table header row (delete all rows except row 0) for (let n = rowsNumber - 1; n > 0; n--) { table.deleteRow(n); + + // update the progress bar after deleting rows + updateProgressBar(); } //loop through each book and create a new row for each book, insert 5 cells per row let length = myLibrary.length; From 5c40ca19d43349115b40e66db68204b8f9053d91 Mon Sep 17 00:00:00 2001 From: gerbil1511 Date: Sun, 27 Jul 2025 12:17:32 +0100 Subject: [PATCH 3/5] refactor Book object to use class, improve responsive table layout , and enhance UI --- debugging/book-library/index.html | 2 +- debugging/book-library/script.js | 212 ++++++++++++++++-------------- debugging/book-library/style.css | 19 ++- 3 files changed, 130 insertions(+), 103 deletions(-) diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index a28c65fd..5ac452dd 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -43,7 +43,7 @@

Reading Progress

-
+
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 9b683185..1993a114 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,16 +1,25 @@ // initialise an empty array to hold my book library let myLibrary = []; +// Dom elements +const title = document.getElementById("title"); +const author = document.getElementById("author"); +const pages = document.getElementById("pages"); +const check = document.getElementById("check"); +const progressHeader = document.getElementById("progress-header"); +const progressBar = document.getElementById("progress-bar"); +const table = document.getElementById("display"); + // function to save my library to localStorage function saveToStorage() { // convert myLibrary array to a JSON string and save it - localStorage.setItem('myLibrary', JSON.stringify(myLibrary)); + localStorage.setItem("myLibrary", JSON.stringify(myLibrary)); } // function to load my library from localStorage function loadFromStorage() { // retrieve the JSON string from localStorage and parse it back to an array - const stored = localStorage.getItem('myLibrary'); + const stored = localStorage.getItem("myLibrary"); // only parse if there is something stored if (stored) { myLibrary = JSON.parse(stored); @@ -20,29 +29,17 @@ function loadFromStorage() { // function to display the current number of books read vs unread function updateProgressBar() { const totalBooks = myLibrary.length; - const readBooks = myLibrary.filter(book => book.check).length; - const percent = totalBooks === 0 ? 0 : Math.round((readBooks / totalBooks) * 100); + const readBooks = myLibrary.filter((book) => book.check).length; + const percent = + totalBooks === 0 ? 0 : Math.round((readBooks / totalBooks) * 100); - // update the progress bar text - document.getElementById('progress-header').innerText = `Read ${readBooks} out of ${totalBooks} books`; + // update the progress bar text + progressHeader.innerText = `Read ${readBooks} out of ${totalBooks} books`; // update the progress bar width - const progressBar = document.getElementById('progress-bar'); progressBar.style.width = percent + "%"; - } -window.addEventListener("load", function (e) { - // load saved books from local storage - loadFromStorage(); - // only add default books if myLibrary is empty - // this prevents overwriting existing books - if (myLibrary.length === 0) { - populateStorage(); - } - render(); -}); - function populateStorage() { // add default books to myLibrary if it's empty on initial setup if (myLibrary.length == 0) { @@ -53,26 +50,31 @@ function populateStorage() { "127", true ); - myLibrary.push(book1); - myLibrary.push(book2); + myLibrary.push(book1, book2); render(); } } -const title = document.getElementById("title"); -const author = document.getElementById("author"); -const pages = document.getElementById("pages"); -const check = document.getElementById("check"); +// setup the Book class +function Book(title, author, pages, check) { + this.title = title; + this.author = author; + this.pages = pages; + this.check = 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 +// clear the form after submission +function clearForm() { + title.value = ""; + author.value = ""; + pages.value = ""; + check.checked = false; +} + +// handle form submission - check the right input from forms and if its ok -> add the new book (object in array) function submit() { // add validation for empty fields - if ( - title.value == "" || - author.value == "" || - pages.value == "" - ) { + if (title.value == "" || author.value == "" || pages.value == "") { alert("Please fill all fields!"); return false; } else { @@ -81,83 +83,95 @@ function submit() { myLibrary.push(book); saveToStorage(); // save the book after adding render(); - - // Clear the form after successful submission - title.value = ""; - author.value = ""; - pages.value = ""; - check.checked = false; + clearForm(); } } -function Book(title, author, pages, check) { - // constructor function to create a new book object - this.title = title; - this.author = author; - this.pages = pages; - this.check = check; -} - +// render the table with books from myLibrary function render() { - // render the table with books from myLibrary - let table = document.getElementById("display"); // count the existing number of rows in the table let rowsNumber = table.rows.length; //delete all the rows except for the table header row (delete all rows except row 0) for (let n = rowsNumber - 1; n > 0; n--) { table.deleteRow(n); - + } // update the progress bar after deleting rows updateProgressBar(); - } - //loop through each book and create a new row for each book, insert 5 cells per row - let length = myLibrary.length; - for (let i = 0; i < length; i++) { - let row = table.insertRow(1); // insert new row at position 1 to keep the header intact - 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); - - // fill the first 3 cells with book data - 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 changeBtn = document.createElement("button"); - changeBtn.id = i; - wasReadCell.appendChild(changeBtn) - let readStatus = ""; - if (myLibrary[i].check == true) { - readStatus = "Yes"; - changeBtn.className = "btn btn-success"; - } else { - readStatus = "No"; - changeBtn.className = "btn btn-secondary"; - } - changeBtn.innerText = readStatus; - - - changeBtn.addEventListener("click", function () { - myLibrary[i].check = !myLibrary[i].check; - saveToStorage(); // save after changing read status - 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); - saveToStorage(); // save after deleting - render(); - }); + + // add rows for each book in myLibrary + myLibrary.forEach((book, i) => { + createBookRow(book, i); + }); +} + +// create a table row for each book +function createBookRow(book, i) { + let row = table.insertRow(1); // insert new row at position 1 to keep the header intact + 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); + + // fill the first 3 cells with book data + 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 changeBtn = document.createElement("button"); + changeBtn.id = i; + wasReadCell.appendChild(changeBtn); + setReadButtonState(changeBtn, book.check); + changeBtn.addEventListener("click", () => handleToggleRead(i)); + + //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", () => { + handleDeleteBook(i); + }); +} + +function setReadButtonState(btn, isRead) { + // set the button text based on the read status + if (isRead) { + btn.innerHTML = "Read"; + btn.className = "btn btn-success"; + } else { + btn.innerHTML = "Unread"; + btn.className = "btn btn-danger"; } } -// log the library to console for debugging \ No newline at end of file + +// toggle the read status of a book +function handleToggleRead(index) { + // toggle the read status of the book at the given index + myLibrary[index].check = !myLibrary[index].check; + // save to storage and re-render + saveToStorage(); + render(); +} + +// delete a book from the library +function handleDeleteBook(index) { + alert("You have deleted title: " + myLibrary[index].title); + myLibrary.splice(index, 1); + saveToStorage(); + render(); +} + +// when the window loads, we want to load the saved books from local storage +window.addEventListener("load", function (e) { + // load saved books from local storage + loadFromStorage(); + // only add default books if myLibrary is empty + // this prevents overwriting existing books + if (myLibrary.length === 0) { + populateStorage(); + } + render(); +}); diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 1ad4dfbb..232ad125 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -1,12 +1,25 @@ body { background-color: #f8f9fa; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .table th { background-color: #343a40; color: white; - text-align: center; +} + +/* Responsive table wrapper */ +.table-responsive { + width: 100%; + overflow-x: auto; +} +/* Optional: Make sure body/container doesn't restrict table width */ +body, +html { + width: 100%; + margin: 0; + padding: 0; + box-sizing: border-box; } .btn { @@ -16,4 +29,4 @@ body { .card { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} \ No newline at end of file +} From 8f5562a8e2bda0ec8af0c626a44e7f53d132b10b Mon Sep 17 00:00:00 2001 From: gerbil1511 Date: Sun, 27 Jul 2025 12:25:40 +0100 Subject: [PATCH 4/5] reorder code blocks so that class object is at top of page --- debugging/book-library/script.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 1993a114..f4076785 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -1,3 +1,13 @@ +// Book class (must be defined before use) +class Book { + constructor(title, author, pages, check) { + this.title = title; + this.author = author; + this.pages = pages; + this.check = check; + } +} + // initialise an empty array to hold my book library let myLibrary = []; @@ -55,14 +65,6 @@ function populateStorage() { } } -// setup the Book class -function Book(title, author, pages, check) { - this.title = title; - this.author = author; - this.pages = pages; - this.check = check; -} - // clear the form after submission function clearForm() { title.value = ""; @@ -159,6 +161,7 @@ function handleToggleRead(index) { // delete a book from the library function handleDeleteBook(index) { alert("You have deleted title: " + myLibrary[index].title); + // remove the book at the given index from myLibrary myLibrary.splice(index, 1); saveToStorage(); render(); From 5e52d4d762b2d93c65814727c76c3794a6e75765 Mon Sep 17 00:00:00 2001 From: gerbil1511 Date: Tue, 29 Jul 2025 21:14:09 +0100 Subject: [PATCH 5/5] add tests for Book class and storage functions; update progress bar accessibility --- debugging/book-library/book-library.test.js | 70 +++++++++++++++++++++ debugging/book-library/index.html | 4 +- debugging/book-library/script.js | 7 ++- debugging/book-library/style.css | 7 +++ 4 files changed, 85 insertions(+), 3 deletions(-) create mode 100644 debugging/book-library/book-library.test.js diff --git a/debugging/book-library/book-library.test.js b/debugging/book-library/book-library.test.js new file mode 100644 index 00000000..df7125af --- /dev/null +++ b/debugging/book-library/book-library.test.js @@ -0,0 +1,70 @@ +/** + * @jest-environment jsdom + */ + +const { + Book, + saveToStorage, + loadFromStorage, + myLibrary, +} = require("./script.js"); + +// test the book class +describe("Book Class", () => { + test("should create a book with a title, author, pages and check status", () => { + const book = new Book("Test Title", "Test Author", 123, true); + expect(book.title).toBe("Test Title"); + expect(book.author).toBe("Test Author"); + expect(book.pages).toBe(123); + expect(book.check).toBe(true); + }); +}); + +// test the saveToStorage function +describe("saveToStorage should store myLibrary in localStorage", () => { + beforeEach(() => { + // clear and fill the actual myLibrary array + myLibrary.length = 0; + myLibrary.push(new Book("Test Title", "Test Author", 123, true)); + localStorage.clear(); + jest.clearAllMocks(); + }); + + test("actually stores the correct value data in localStorage", () => { + // call the function to save to storage + saveToStorage(); + // check that the stored value matches the expected JSON string + expect(localStorage.getItem("myLibrary")).toBe(JSON.stringify(myLibrary)); + }); +}); + +// test the loadFromStorage function +describe("loadFromStorage should load myLibrary from localStorage", () => { + beforeEach(() => { + // clear the array + myLibrary.length = 0; + localStorage.clear(); + jest.clearAllMocks(); + }); + + test("loads books from localStorage into myLibrary", () => { + // store a book in localStorage as a JSON string + const books = [new Book("Loaded Title", "Loaded Author", 456, false)]; + localStorage.setItem("myLibrary", JSON.stringify(books)); + + // call the function to load from storage + loadFromStorage(); + + // check that myLibrary now has the loaded book + expect(myLibrary).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + title: "Loaded Title", + author: "Loaded Author", + pages: 456, + check: false, + }), + ]) + ); + }); +}); diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 5ac452dd..d13c9a28 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -33,8 +33,8 @@

My Book Library

Reading Progress

-
-
+
+
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index f4076785..7f2aff6a 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -32,7 +32,10 @@ function loadFromStorage() { const stored = localStorage.getItem("myLibrary"); // only parse if there is something stored if (stored) { - myLibrary = JSON.parse(stored); + // clear the array in place + myLibrary.length = 0; + // add loaded books to the existing array + myLibrary.push(...JSON.parse(stored)); } } @@ -178,3 +181,5 @@ window.addEventListener("load", function (e) { } render(); }); + +module.exports = { Book, saveToStorage, loadFromStorage, myLibrary }; diff --git a/debugging/book-library/style.css b/debugging/book-library/style.css index 232ad125..dc768d08 100644 --- a/debugging/book-library/style.css +++ b/debugging/book-library/style.css @@ -3,6 +3,13 @@ body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } +.progress { + height: 25px; +} +.progress-bar { + width: 0%; +} + .table th { background-color: #343a40; color: white;