Skip to content

London | May 2025 | Hendrine Zeraua | Sprint 2 | Book Library #306

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

London | May 2025 | Hendrine Zeraua | Sprint 2 | Book Library #306

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0b6299a
fix(seed): correct title typo and store pages as numbers
rarityXtreme Aug 13, 2025
6d9d84a
fix(add): use author field and push to myLibrary
rarityXtreme Aug 13, 2025
0b088a8
feat(validate): require author and enforce pages as positive integer"
rarityXtreme Aug 13, 2025
feee606
fix(render): correct table-clearing loop syntax
rarityXtreme Aug 13, 2025
1966aac
fix(delete): correct variable name and event type so delete button works
rarityXtreme Aug 13, 2025
790c614
fix(read-status): show 'Yes' when checked and 'No' when unchecked
rarityXtreme Aug 13, 2025
bd070c0
use textContent instead of innerHTML for table cells
rarityXtreme Aug 13, 2025
d8c315e
clear form fields after adding a book
rarityXtreme Aug 13, 2025
43ed85f
set proper title, split meta tags, and constrain pages input
rarityXtreme Aug 13, 2025
3197a2b
fix input types and remove placeholder table row
rarityXtreme Aug 13, 2025
558b525
use button for submit since there is no form element
rarityXtreme Aug 13, 2025
75de4c4
refactor: apply reviewer feedback for performance, clarity, and UX im…
rarityXtreme Aug 14, 2025
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
136 changes: 49 additions & 87 deletions debugging/book-library/index.html
View file
Open in desktop
Original file line number Diff line number Diff 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>

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

<div id="demo" class="collapse">
<div 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>
<!-- FIXED: add min & step, remove stray '+' -->
<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" value="" />Read
</label>
<button type="button" class="btn btn-primary" onclick="submit()">Submit</button>
</div>
</div>

<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></tbody>
</table>

<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>
<script src="script.js"></script>
</body>

<script src="script.js"></script>
</body>
</html>
89 changes: 51 additions & 38 deletions debugging/book-library/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ 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(
"The Old Man and the Sea",
"Ernest Hemingway",
"127",
true
);
let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
let book2 = new Book(
"The Old Man and the Sea",
"Ernest Hemingway",
127,
true
);
myLibrary.push(book1);
myLibrary.push(book2);
render();
Expand All @@ -25,22 +25,40 @@ const author = document.getElementById("author");
const pages = document.getElementById("pages");
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() {

if (
title.value == null ||
title.value == "" ||
pages.value == null ||
pages.value == ""
!title.value?.trim() ||
!author.value?.trim() ||
!pages.value?.trim()
) {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
render();
}

const pagesNum = Number(pages.value);
if (!Number.isInteger(pagesNum) || pagesNum < 1) {
alert("Pages must be a positive whole number.");
return false;
}

const book = new Book(
title.value.trim(),
author.value.trim(),
pagesNum,
check.checked
);
myLibrary.push(book);
render();


title.value = "";
author.value = "";
pages.value = "";
check.checked = false;

return true;
}

function Book(title, author, pages, check) {
Expand All @@ -53,11 +71,11 @@ 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-- {

for (let n = rowsNumber - 1; n > 0; n--) {
table.deleteRow(n);
}
//insert updated row and cells

let length = myLibrary.length;
for (let i = 0; i < length; i++) {
let row = table.insertRow(1);
Expand All @@ -66,38 +84,33 @@ function render() {
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 = String(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.textContent = 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);
const delBut = document.createElement("button");
delBut.id = String(i + 5);
delBut.className = "btn btn-warning";
delBut.innerHTML = "Delete";
delBut.addEventListener("clicks", function () {
delBut.textContent = "Delete";
delBut.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
});
});
deleteCell.appendChild(delBut);
}
}

Loading