Skip to content

London | 26-ITP-May | Dipa Sarker | Sprint 2 | Book Library Project #521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dipa-Sarker wants to merge 2 commits into
base: main
Choose a base branch
from
+135 −72
Open

London | 26-ITP-May | Dipa Sarker | Sprint 2 | Book Library Project #521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
956cf0e
fix book library app bugs
Dipa-Sarker Aug 6, 2026
6a246e7
made correction according to general feedback
Dipa-Sarker Aug 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions debugging/book-library/debugging-notes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# HTML Debugging Checklist

## Page Structure

## Book Input Form

## Add Book Button

## Book Display Area

## Delete Functionality

## Read Status

## Validation Support

## Browser Testing


# JavaScript Debugging Checklist

## Library Data Storage

## Page Loading

## Add Book Function

## Book Constructor

## Render Function

## Read/Unread Button

## Delete Button

## Console Errors


## Final Testing
- [ ] Add a book with all information
- [ ] Add a book without title
- [ ] Add a book without author
- [ ] Add a book without pages
- [ ] Add a read book
- [ ] Add an unread book
- [ ] Delete a book
- [ ] Change read/unread status

# HTML correction:
- input type
- submit function
-
# Script.js correction:
- delete e from addEventListener
- correct book name
- add input validation for author value in submit() function
- add author.value replacing title.value in new Book()
- replace library by myLibrary
- correct check == true/false and made correction for readstatus = yes/no for read button
- correct variable name delBut > delButton
- correct clicks > click
31 changes: 11 additions & 20 deletions debugging/book-library/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title> </title>
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Book Library</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Expand All @@ -28,18 +25,19 @@ <h1>Library</h1>
</button>

<div id="demo" class="collapse">
<form id="bookForm">
<div class="form-group">
<label for="title">Title:</label>
<input
type="title"
type="text"
class="form-control"
id="title"
name="title"
required
/>
<label for="author">Author: </label>
<input
type="author"
type="text"
class="form-control"
id="author"
name="author"
Expand All @@ -51,6 +49,7 @@ <h1>Library</h1>
class="form-control"
id="pages"
name="pages"
min ="1"
required
/>
<label class="form-check-label">
Expand All @@ -65,9 +64,9 @@ <h1>Library</h1>
type="submit"
value="Submit"
class="btn btn-primary"
onclick="submit();"
/>
</div>
</form>
</div>

<table class="table" id="display">
Expand All @@ -80,17 +79,9 @@ <h1>Library</h1>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody id="library"></tbody>
</table>

<script src="script.js"></script>
<script src="script.js" type="module"></script>
</body>
</html>
115 changes: 63 additions & 52 deletions debugging/book-library/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
let myLibrary = [];

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we declare myLibrary in a way that prevents it from being accidentally reassigned?


window.addEventListener("load", function (e) {
window.addEventListener("load", function () {
//delete e as it is never used
populateStorage();
render();
});

function populateStorage() {
if (myLibrary.length == 0) {
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
let book2 = new Book(
const book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true); //correct book name
const book2 = new Book(
"The Old Man and the Sea",
"Ernest Hemingway",
"127",
127,
true
);
myLibrary.push(book1);
Expand All @@ -20,28 +21,44 @@ function populateStorage() {
}
}

const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
const check = document.getElementById("check");
const titleInput = document.getElementById("title"); //rename all variable names
const authorInput = document.getElementById("author");
const pagesInput = document.getElementById("pages");
const checkInput = document.getElementById("check");
const bookForm = document.getElementById("bookForm");
Comment on lines +24 to +28

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: Normal practice is to keep variable/constant declaration at beginning of the file (before function definition).



//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() {
const title = titleInput.value.trim(); //use .trim() to remove extra spaces
const author = authorInput.value.trim();
const pages = Number(pagesInput.value);
if (
title.value == null ||
title.value == "" ||
pages.value == null ||
pages.value == ""
title === "" ||

author === "" || //need input validation for author value, added this

pagesInput.value === ""
) {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
render();
}
if (pages < 1) {
alert("Pages must be at least 1!");
return false;
}

const book = new Book(title, author, pages, checkInput.checked); //added author.value by
// replacing 2nd title.value to author.value
myLibrary.push(book); //corrected name for original array library > myLibrary
render();
}
bookForm.addEventListener("submit", function (event) { //after user submits the book form
// this will run submit () function to add book
event.preventDefault();
submit();
});
Comment on lines +57 to +61

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Common practice is to keep all the "code that runs once on page load" in the same place (e.g., in a function named init() or setup()) and then call the function on page load.

Code that setups event listener usually fall into this category.


function Book(title, author, pages, check) {
this.title = title;
Expand All @@ -51,53 +68,47 @@ 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);
}
// delete all old row at once
const library = document.getElementById("library"); //newly created id for cleaning all existing row

library.innerHTML = ""; //clean all old rows

//insert updated row and cells
let length = myLibrary.length;
const 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;
const row = library.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);
titleCell.textContent = myLibrary[i].title; // replaced all innerHTML by textContent
authorCell.textContent = myLibrary[i].author;
pagesCell.textContent = 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 () {
const changeButton = document.createElement("button"); //correct changeBut > changeButton
changeButton.id = i;

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any need to assign an id attribute to this element?
In addition, "0", "1", ..., do not make good ID value.

changeButton.className = "btn btn-success";
wasReadCell.appendChild(changeButton);
const readStatus = myLibrary[i].check ? "Yes" : "No";
changeButton.textContent = readStatus;
changeButton.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}`);
let deleteButton = document.createElement("button");
deleteCell.appendChild(deleteButton);
deleteButton.className = "btn btn-warning";
deleteButton.textContent = "Delete";
deleteButton.addEventListener("click", function () {
// correct clicks > click
const deletedTitle = myLibrary[i].title; //save the book title which should have to delete
myLibrary.splice(i, 1);
render();
alert(`You've deleted title: ${deletedTitle}`);

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alert() is a blocking function call. As a result, invoking it prevents the browser from updating the UI until the dialog is dismissed.

If time permits, research for approaches that allows the UI to update before displaying the alert dialog. (This is an optional change).

});
}
}
Loading