Skip to content

London | 26-ITP-May | Edina Kurdi | Sprint 2 | Book Library#552

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
edinakurdi wants to merge 36 commits into
base:main
Choose a base branch
from
Open

London | 26-ITP-May | Edina Kurdi | Sprint 2 | Book Library #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
1e412fd
complete missing closing ')' in render() for loop
edinakurdi Aug 14, 2026
25d43db
correct typo in book title: Robinson Crusoe
edinakurdi Aug 14, 2026
626dc3d
keep delButton consistently named
edinakurdi Aug 14, 2026
11cc372
correct event listener event name to click
edinakurdi Aug 14, 2026
8da7a71
add title in html
edinakurdi Aug 14, 2026
db875d7
fix variable name in submit() from library to myLibrary
edinakurdi Aug 14, 2026
9e96d3e
fix title being used as an author (still in render())
edinakurdi Aug 14, 2026
c121439
add missing author validation
edinakurdi Aug 14, 2026
b3ed0a2
fix new book read? (y/n) display in table
edinakurdi Aug 14, 2026
8dd9945
fix type input to be text for title and author in HTML
edinakurdi Aug 14, 2026
276fa65
remove redundant code from css
edinakurdi Aug 14, 2026
af09d6d
add language in html
edinakurdi Aug 15, 2026
4faebe8
separate out meta tag
edinakurdi Aug 15, 2026
fe78e54
remove extra rneder() in populateStorage()
edinakurdi Aug 15, 2026
fed4503
add min attribute to book pages
edinakurdi Aug 16, 2026
6ded0c0
rename variables to more descriptive names
edinakurdi Aug 16, 2026
202b520
add type attribute to add new book button
edinakurdi Aug 16, 2026
bc7961b
wrap inputs in form element
edinakurdi Aug 16, 2026
e3f87fd
convert input to submit element
edinakurdi Aug 16, 2026
7509788
add header for actions in table
edinakurdi Aug 16, 2026
f325171
delete emplty table rows and add id to tbody
edinakurdi Aug 16, 2026
a61281f
add type=module to script tag
edinakurdi Aug 16, 2026
96c8779
fix: move button attributes inside the opening tag for submit button
edinakurdi Aug 16, 2026
07a64a1
fix: add text on submit button: 'Submit'
edinakurdi Aug 16, 2026
06ea771
fix: remove value from button element
edinakurdi Aug 16, 2026
e93ea32
update populateStorgage() to take number page values &
edinakurdi Aug 16, 2026
596c6f5
rename form input variables in submit function
edinakurdi Aug 16, 2026
624dc39
remove unnecessary null checks for string inputs
edinakurdi Aug 16, 2026
a003460
grab book-form and save it to variable bookForm
edinakurdi Aug 16, 2026
3cf13da
replace submit fnction with form submit event listener
edinakurdi Aug 16, 2026
b84a871
refactor render()
edinakurdi Aug 16, 2026
769936a
-remove duplicate button ids,
edinakurdi Aug 16, 2026
61a0126
change let to const where possible
edinakurdi Aug 16, 2026
e997b5e
enforce valid integer for pages in html and js
edinakurdi Aug 16, 2026
2cade97
correct typo and ensure book-table-body matches the js DOM reference
edinakurdi Aug 16, 2026
03993a0
fix typos
edinakurdi Aug 16, 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
142 changes: 52 additions & 90 deletions debugging/book-library/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta
charset="utf-8"
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>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<html lang="en">

<body>
<div class="jumbotron text-center">
<h1>Library</h1>
<p>Add books to your virtual library</p>
</div>
<head>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
Add new book
</button>
<body>
<div class="jumbotron text-center">
<h1>Library</h1>
<p>Add books to your virtual library</p>
</div>

<div id="demo" class="collapse">
<div class="form-group">
<label for="title">Title:</label>
<input
type="title"
class="form-control"
id="title"
name="title"
required
/>
<label for="author">Author: </label>
<input
type="author"
class="form-control"
id="author"
name="author"
required
/>
<label for="pages">Pages:</label>
<input
type="number"
class="form-control"
id="pages"
name="pages"
required
/>
<label class="form-check-label">
<input
type="checkbox"
class="form-check-input"
id="check"
value=""
/>Read
</label>
<input
type="submit"
value="Submit"
class="btn btn-primary"
onclick="submit();"
/>
</div>
</div>
<button type="button" data-toggle="collapse" data-target="#demo" class="btn btn-info">
Add new book
</button>

<table class="table" id="display">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Author</th>
<th>Number of Pages</th>
<th>Read</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="demo" class="collapse">
<form id="book-form" class="form-group">
<label for="title">Title:</label>
<input type="text" class="form-control" id="title" name="title" required />
<label for="author">Author: </label>
<input type="text" class="form-control" id="author" name="author" required />
<label for="pages">Pages:</label>
<input type="number" class="form-control" id="pages" name="pages" min="1" step="1" required />
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="check" name="check" />Read
</label>
Comment on lines +33 to +35

@cjyuancjyuanAug 14, 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.

If this checkbox is not showing, could you try fixing the issue with the help of AI. The issue is related to Bootstrap 4.4.1. So mentioning "Bootstrap 4.4.1" to AI might help.

<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

<script src="script.js"></script>
</body>
</html>
<table class="table" id="display">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Author</th>
<th>Number of Pages</th>
<th>Read</th>
<th>Action</th>
</tr>
</thead>
<tbody id="book-table-body">

</tbody>
</table>

<script src="script.js" type="module"></script>
</body>

</html>
123 changes: 59 additions & 64 deletions debugging/book-library/script.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
let myLibrary = [];
const myLibrary = [];

window.addEventListener("load", function (e) {
populateStorage();
Expand All@@ -7,41 +7,42 @@ window.addEventListener("load", function (e) {

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);
const book2 = new Book(
"The Old Man and the Sea",
"Ernest Hemingway",
"127",
127,
true
);
myLibrary.push(book1);
myLibrary.push(book2);
render();
myLibrary.push(book1, book2);
}
}

const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
const check = document.getElementById("check");
const bookForm = document.getElementById("book-form");
const titleInput = document.getElementById("title");
const authorInput = document.getElementById("author");
const pagesInput = document.getElementById("pages");
const checkInput = 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 == ""
) {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
render();
bookForm.addEventListener("submit", function (e) {

@cjyuancjyuanAug 16, 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.

Could consider placing all code that runs once on page load in a single function. For example, you could put it inside the page load callback or create a function named init() or setup() and call it once when the page loads.

This makes it easier to locate and manage all the code that runs once when the app starts.

e.preventDefault();

const title = titleInput.value.trim();
const author = authorInput.value.trim();
const pages = Number(pagesInput.value);
const wasRead = checkInput.checked;

if (!title || !author || !Number.isInteger(pages) || pages <= 0) {
alert("Please fill all fields with valid information!");
return;
}
}
const book = new Book(title, author, pages, wasRead);
myLibrary.push(book);
render();
bookForm.reset();
});

function Book(title, author, pages, check) {
this.title = title;
Expand All@@ -51,53 +52,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);
}
const bookTableBody = document.getElementById("book-table-body");
bookTableBody.innerHTML = "";

//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 = bookTableBody.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;
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;
//read/unread toggle button
const toggleReadBtn = document.createElement("button");
toggleReadBtn.className = "btn btn-success";
toggleReadBtn.textContent = myLibrary[i].check ? "yes" : "no";
wasReadCell.appendChild(toggleReadBtn);

changeBut.addEventListener("click", function () {
toggleReadBtn.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();
//delete button with confirmation prompt
const deleteBtn = document.createElement("button");
deleteBtn.className = "btn btn-warning";
deleteBtn.textContent = "Delete";
deleteCell.appendChild(deleteBtn);

deleteBtn.addEventListener("click", function () {
const confirmDel = confirm(
`Are you sure you want to delete "${myLibrary[i].title}"?`
);
if (confirmDel) {
myLibrary.splice(i, 1);
render();
}
});
Comment on lines +89 to 96

@cjyuancjyuanAug 16, 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.

Informing the user that the book has been deleted is not quite the same as asking whether they want to delete the book though.

}
}
3 changes: 1 addition & 2 deletions debugging/book-library/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
.form-group {
width: 400px;
height: 300px;
align-self: left;
padding-left: 20px;
}

Expand All@@ -16,4 +15,4 @@

button.btn-info {
margin: 20px;
}
}
Loading