Skip to content
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

West Midlands | Samira Hekmati | Module-Data-Flows | Sprint-2 | Book-library #142

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

West Midlands | Samira Hekmati | Module-Data-Flows | Sprint-2 | Book-library #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
df37db8
fixed bugs in book-library
samirahekmati Jan 13, 2025
b0b8753
Use `i` directly for the delete button's ID
samirahekmati Jan 17, 2025
bd9ef0e
removed unnecessary IDs
samirahekmati Jan 17, 2025
8d43832
changed the name of buttons
samirahekmati Jan 17, 2025
026cb09
fixed input validation
samirahekmati Jan 17, 2025
b5affb3
fixed: more efficient way to remove all rows
samirahekmati Jan 17, 2025
52bca1e
html
samirahekmati Jan 17, 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
3 changes: 2 additions & 1 deletion 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>
<html>
<head>
<title> </title>
<title> Virtual Library </title>
<meta
charset="utf-8"
name="viewport"
Expand Down Expand Up @@ -81,6 +81,7 @@ <h1>Library</h1>
</tr>
</thead>
<tbody>
<!-- This row is the initial row, which you will clear dynamically -->
<tr>
<td></td>
<td></td>
Expand Down
65 changes: 34 additions & 31 deletions debugging/book-library/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
let myLibrary = [];

window.addEventListener("load", function (e) {
window.addEventListener("load", function () {
populateStorage();
render();
});
Expand Down Expand Up @@ -29,16 +29,23 @@ const check = document.getElementById("check");
//via Book function and start render function
function submit() {
if (
title.value == null ||
title.value == "" ||
pages.value == null ||
pages.value == ""
title.value.trim() === "" || // Check for empty or whitespace-only title
author.value.trim() === "" || // Check for empty or whitespace-only author
pages.value.trim() === "" // Check for empty pages
) {
alert("Please fill all fields!");
return false;
} else {
let book = new Book(title.value, title.value, pages.value, check.checked);
library.push(book);
// Validate the "pages" input (must be a positive integer)
if (isNaN(pages.value) || pages.value <= 0 || !Number.isInteger(Number(pages.value))) {
alert("Please enter a valid number of pages (positive integer).");
return false;
}

//pass author value correctly
let book = new Book(title.value, author.value, pages.value, check.checked);
//Replace library.push(book) with myLibrary.push(book)
myLibrary.push(book);
render();
}
}
Expand All @@ -52,15 +59,16 @@ 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);
}
let tbody = table.getElementsByTagName("tbody")[0]; // Get the existing <tbody> element

// Clear all rows in the tbody (except the header row)
tbody.innerHTML = ""; // Clears all rows (including the initial empty one)


//insert updated row and cells
let length = myLibrary.length;
for (let i = 0; i < length; i++) {
let row = table.insertRow(1);
let row = tbody.insertRow();
let titleCell = row.insertCell(0);
let authorCell = row.insertCell(1);
let pagesCell = row.insertCell(2);
Expand All @@ -71,30 +79,25 @@ function render() {
pagesCell.innerHTML = 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;
let toggleReadButton = document.createElement("button");
//changeBut.id = i; No need to assign an ID here
toggleReadButton.className = "btn btn-success";
wasReadCell.appendChild(toggleReadButton);
let readStatus = myLibrary[i].check ? "Yes" : "No";
toggleReadButton.innerText = readStatus;

changeBut.addEventListener("click", function () {
toggleReadButton.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 () {
let deleteButton = document.createElement("button");
//delButton.id = i; // Use `i` directly for the delete button's ID
deleteCell.appendChild(deleteButton);
deleteButton.className = "btn btn-warning";
deleteButton.innerHTML = "Delete";
deleteButton.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
Expand Down