Skip to content

London | 26-ITP-May | Jorvan White | Sprint 2 | Book library#548

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

London | 26-ITP-May | Jorvan White | Sprint 2 | Book library #548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c65e2e0
made changes to the script.js to fix the issues with the library site…
Aug 13, 2026
910705e
added more small changes
Aug 13, 2026
ecf8d3b
fixed formatting errors on book-library
Aug 15, 2026
20e44ff
Removed more unnecessary sections of my code
Aug 16, 2026
eb05054
removed (e) from window.addEventListener
Aug 16, 2026
fff78c6
updated html and js to only accept whole positive numbers
Aug 17, 2026
9309180
switched event listener from html to javascript
Aug 17, 2026
ac0932c
changed myLibrary declaration to const to not get reassigned
Aug 17, 2026
41c6298
removed .value = null and replace == t0 ===
Aug 17, 2026
b9bd1fe
simplified code by using bookForm.reset
Aug 17, 2026
214517b
updated the js to reject various number combinations for page inputs
Aug 17, 2026
5873142
updated js and html to no longer delete every table one by one but to…
Aug 17, 2026
53cde05
cleaned up some code and removed id attribute
Aug 17, 2026
165351f
fixed errors stopping page from loading
Aug 17, 2026
641cfe0
reorder sequence of delete button and added timeout function to make …
Aug 17, 2026
64c48cb
fixed min value in input tag and trimmed author and title values
Aug 18, 2026
e52b152
fixed eventListenter and get button details
Aug 18, 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
139 changes: 74 additions & 65 deletions debugging/book-library/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title> </title>
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >

<title>Book Library</title>

<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" />
>
<link rel="stylesheet" href="style.css" >
</head>

<body>
Expand All@@ -23,74 +23,83 @@ <h1>Library</h1>
<p>Add books to your virtual library</p>
</div>

<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
<button
type="button"
data-toggle="collapse"
data-target="#demo"
class="btn btn-info"
>
Add new book
</button>

<form id="bookForm"></form>

<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">
<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"
min = "1"
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"
required
>
Comment thread
cjyuan marked this conversation as resolved.

<div class="form-check">
<label class="form-check-label" for="check">
<input
type="checkbox"
class="form-check-input"
id="check"
name="read"
>
Read
</label>
</div>

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

<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>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Number of Pages</th>
<th scope="col">Read</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

<tbody id="bookTableBody"></tbody>
</table>

<script src="script.js"></script>
</body>
</html>
</html>
79 changes: 43 additions & 36 deletions debugging/book-library/script.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
let myLibrary = [];
const myLibrary = [];

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

function populateStorage() {
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",
Expand All@@ -16,30 +16,44 @@ function populateStorage() {
);
myLibrary.push(book1);
myLibrary.push(book2);
render();
}
}

const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
const check = document.getElementById("check");
const submitButton = document.getElementById("submit-button");
const bookForm = document.getElementById("bookForm");
const bookTableBody = document.getElementById("bookTableBody");

submitButton.addEventListener("click", submit);

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


//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 == ""
title.value === "" ||
author.value === "" ||
pages.value === "" ||
pages.value <= 0 ||
!/^[1-9]\d*$/.test(pages.value)
) {
alert("Please fill all fields!");
alert("Please fill all fields correctly!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
}
{
let book = new Book(
title.value.trim(),
author.value.trim(),
pages.value,
check.checked
);
myLibrary.push(book);
render();

// resets form after input
bookForm.reset();
}
}

Expand All@@ -51,53 +65,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);
}
bookTableBody.innerHTML = "";

//insert updated row and cells
let length = myLibrary.length;
for (let i = 0; i < length; i++) {
let row = table.insertRow(1);
let row = bookTableBody.insertRow();
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;
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;

myLibrary[i].check ? "Yes" : "No";
changeBut.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}`);
deleteCell.appendChild(delButton);
delButton.className = "btn btn-warning";
delButton.textContent = "Delete";

delButton.addEventListener("click", function () {
let deletedTitle = myLibrary[i].title;
myLibrary.splice(i, 1);
render();

setTimeout(function () {
alert(`You've deleted title: ${deletedTitle}`);
}, 0);
});
}
}
Loading