Skip to content

Glasgow | 26-ITP-May | Niangh Ciang | Sprint 2 | Book Library #515

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
Niangh-Ciang wants to merge 19 commits into
base: main
Choose a base branch
from
+102 −105
Open

Glasgow | 26-ITP-May | Niangh Ciang | Sprint 2 | Book Library #515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
b509ba6
Fix syntax error in render() loop causing books not to display
Niangh-Ciang Aug 5, 2026
1d11a8d
Replace delBut with delButton to fix render loop error
Niangh-Ciang Aug 5, 2026
fd745e3
Fix submit() error by pushing new books into myLibrary instead of und…
Niangh-Ciang Aug 5, 2026
448d062
Change title.value to author.value in submit() to fix the author disp…
Niangh-Ciang Aug 5, 2026
b01e172
Change readStatus condition to show Yes when check is true
Niangh-Ciang Aug 5, 2026
9d76dc4
Insert table rows at the bottom using -1
Niangh-Ciang Aug 5, 2026
1b88d9b
Remove unnecessary delete button ID
Niangh-Ciang Aug 5, 2026
644d8aa
Reset form fields and hide the form after submitting a book
Niangh-Ciang Aug 5, 2026
f7cf6c6
Update validation to check all inputs
Niangh-Ciang Aug 5, 2026
68c4320
Add validation to prevent negative page numbers
Niangh-Ciang Aug 5, 2026
46dbd78
Improved index.html
Niangh-Ciang Aug 6, 2026
368ff9f
updated index.html
Niangh-Ciang Aug 6, 2026
8f09153
Improved script.js
Niangh-Ciang Aug 6, 2026
ba7080f
Merge branch 'book-library-debugging' of https://github.com/Niangh-Ci…
Niangh-Ciang Aug 6, 2026
b8d330c
Replace alert with dynamic success message after delete
Niangh-Ciang Aug 6, 2026
46975be
update string to number
Niangh-Ciang Aug 6, 2026
ca75bda
Add step="1" to accept only whole number
Niangh-Ciang Aug 7, 2026
683a060
refactor code
Niangh-Ciang Aug 7, 2026
3e99dee
update validation and render function
Niangh-Ciang Aug 7, 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
95 changes: 44 additions & 51 deletions debugging/book-library/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<title> </title>
<title>Book Library</title>
<meta
charset="utf-8"
name="viewport"
Expand All @@ -28,46 +28,47 @@ <h1>Library</h1>
</button>

<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">
<form id="bookForm">
<div class="form-group">
<label for="title">Title:</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>
type="text"
class="form-control"
id="title"
name="title"
required
minlength="1"
/>
<label for="author">Author: </label>
<input
type="text"
class="form-control"
id="author"
name="author"
required
minlength="1"
/>
<label for="pages">Pages:</label>
<input
type="number"
class="form-control"
id="pages"
name="pages"
required
min="1"
step="1"
Comment on lines +58 to +59

@cjyuan cjyuan Aug 7, 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.

My bad. default step value is already 1. So even without explicitly setting step="1", the input element will only accept whole number.

/>
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="check" />Read
</label>
<input
type="submit"
value="Submit"
class="btn btn-primary"
id="submitBtn"
/>
</div>
</form>
</div>

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

<script src="script.js"></script>
<script src="script.js" type="module"></script>
</body>
</html>
112 changes: 58 additions & 54 deletions debugging/book-library/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,15 @@ let myLibrary = [];

window.addEventListener("load", function (e) {
populateStorage();
render();
});

function populateStorage() {
if (myLibrary.length == 0) {
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
let book1 = new Book("Robison Crusoe", "Daniel Defoe", 252, true);
let book2 = new Book(
"The Old Man and the Sea",
"Ernest Hemingway",
"127",
127,
true
);
myLibrary.push(book1);
Expand All @@ -20,26 +19,38 @@ 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");
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 == ""
) {
document.getElementById("submitBtn").addEventListener("click", submit);

@cjyuan cjyuan Aug 7, 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.

Better practice to keep all the code that needs to be executed once on page load together. Doing so makes it easier to find out what the app does on page load.

function submit(event) {
event.preventDefault();
const titleValue = titleInput.value.trim();
const authorValue = authorInput.value.trim();
const pagesValue = Number(pagesInput.value);
if (!titleValue || !authorValue) {
alert("Please fill all fields!");
return false;
return;
}

if (!pagesValue || isNaN(pagesValue) || pagesValue <= 0) {

@cjyuan cjyuan Aug 7, 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 also replace the first two checks by !Number.isInteger(pagesvalue).

alert("Enter a valid page number");
return;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
const book = new Book(
titleValue,
authorValue,
pagesValue,
checkInput.checked
);
myLibrary.push(book);
render();
document.getElementById("bookForm").reset();
$("#demo").collapse("hide");
}
}

Expand All @@ -51,53 +62,46 @@ 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 tableBody = document.querySelector("#display tbody");

tableBody.innerHTML = "";
//insert updated row and cells
let 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;
myLibrary.forEach((book, i) => {
const row = tableBody.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;
const toggleReadBtn = document.createElement("button");
toggleReadBtn.className = "btn btn-success";
wasReadCell.appendChild(toggleReadBtn);
toggleReadBtn.textContent = myLibrary[i].check ? "Yes" : "No";

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}`);
const deleteBtn = document.createElement("button");
deleteCell.appendChild(deleteBtn);
deleteBtn.className = "btn btn-warning";
deleteBtn.textContent = "Delete";
deleteBtn.addEventListener("click", function () {
const deletedTitle = myLibrary[i].title;
myLibrary.splice(i, 1);
render();
const msg = document.createElement("div");
msg.className = "alert alert-success";
msg.textContent = `You've deleted title: ${deletedTitle}`;
document.body.prepend(msg);
setTimeout(() => msg.remove(), 3000);
});
}
});
}
Loading