From 8c443009c3ab1887f2262675e545dd8e96be8249 Mon Sep 17 00:00:00 2001
From: Priscilla <cpjm0033@gmail.com>
Date: Sat, 5 Apr 2025 14:10:45 +0100
Subject: [PATCH 1/6] Fixed the delete function and added the missing syntax in
the render function
---
debugging/book-library/script.js | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 75ce6c1..f4d1284 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -54,7 +54,7 @@ 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
@@ -90,11 +90,11 @@ function 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 () {
+ delButton.id = i + 5;
+ deleteCell.appendChild(delButton);
+ delButton.className = "btn btn-warning";
+ delButton.innerHTML = "Delete";
+ delButton.addEventListener("click", function () {
alert(`You've deleted title: ${myLibrary[i].title}`);
myLibrary.splice(i, 1);
render();
From a409a7eda7c63e26f95e111687a22a9670f46dbb Mon Sep 17 00:00:00 2001
From: Priscilla <cpjm0033@gmail.com>
Date: Sat, 5 Apr 2025 14:14:13 +0100
Subject: [PATCH 2/6] fixed the submit function to work properly
---
debugging/book-library/script.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index f4d1284..455acf3 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -31,13 +31,15 @@ function submit() {
if (
title.value == null ||
title.value == "" ||
+ author.value == null ||
+ author.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);
+ let book = new Book(title.value, author.value, pages.value, check.checked);
library.push(book);
render();
}
From 8fd9cbee2d65ab629f9121d4ea3078d539ee6989 Mon Sep 17 00:00:00 2001
From: Priscilla <cpjm0033@gmail.com>
Date: Sat, 5 Apr 2025 14:24:56 +0100
Subject: [PATCH 3/6] Fixed the variable name
---
debugging/book-library/script.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 455acf3..7126889 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -40,7 +40,7 @@ function submit() {
return false;
} else {
let book = new Book(title.value, author.value, pages.value, check.checked);
- library.push(book);
+ myLibrary.push(book);
render();
}
}
From c3866fb145830b015a332a2979214fec2903fd3b Mon Sep 17 00:00:00 2001
From: Priscilla <cpjm0033@gmail.com>
Date: Sat, 5 Apr 2025 14:29:31 +0100
Subject: [PATCH 4/6] Adjusted the if function
---
debugging/book-library/script.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 7126889..a91d44a 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -79,9 +79,9 @@ function render() {
wasReadCell.appendChild(changeBut);
let readStatus = "";
if (myLibrary[i].check == false) {
- readStatus = "Yes";
- } else {
readStatus = "No";
+ } else {
+ readStatus = "Yes";
}
changeBut.innerText = readStatus;
From eaef660136e8c04d96d754d6631bd86d726c309a Mon Sep 17 00:00:00 2001
From: Priscilla <cpjm0033@gmail.com>
Date: Mon, 14 Apr 2025 08:37:03 +0100
Subject: [PATCH 5/6] fixed the errors in the html file
---
debugging/book-library/index.html | 30 ++++++++++++++----------------
1 file changed, 14 insertions(+), 16 deletions(-)
diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 23acfa7..8d7bc9f 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -1,20 +1,18 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
- <title> </title>
- <meta
- charset="utf-8"
- name="viewport"
- content="width=device-width, initial-scale=1.0"
- />
+ <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" />
+ >
+ <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
@@ -31,20 +29,20 @@ <h1>Library</h1>
<div class="form-group">
<label for="title">Title:</label>
<input
- type="title"
+ type="text"
class="form-control"
id="title"
name="title"
required
- />
+ >
<label for="author">Author: </label>
<input
- type="author"
+ type="text"
class="form-control"
id="author"
name="author"
required
- />
+ >
<label for="pages">Pages:</label>
<input
type="number"
@@ -52,21 +50,21 @@ <h1>Library</h1>
id="pages"
name="pages"
required
- />
+ >
<label class="form-check-label">
<input
type="checkbox"
class="form-check-input"
id="check"
value=""
- />Read
+ >Read
</label>
<input
type="submit"
value="Submit"
class="btn btn-primary"
onclick="submit();"
- />
+ >
</div>
</div>
From e4d8b810a6fd1972dec70242664d931015246fec Mon Sep 17 00:00:00 2001
From: Priscilla <cpjm0033@gmail.com>
Date: Mon, 14 Apr 2025 08:44:24 +0100
Subject: [PATCH 6/6] Adjusted the function to correctly validate input and
clear rows efficiently
---
debugging/book-library/script.js | 102 ++++++++++++++-----------------
1 file changed, 46 insertions(+), 56 deletions(-)
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index a91d44a..18a8ef9 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -6,7 +6,7 @@ window.addEventListener("load", function (e) {
});
function populateStorage() {
- if (myLibrary.length == 0) {
+ if (myLibrary.length === 0) {
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
let book2 = new Book(
"The Old Man and the Sea",
@@ -28,78 +28,68 @@ 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 == "" ||
- author.value == null ||
- author.value == "" ||
- pages.value == null ||
- pages.value == ""
- ) {
+ // Trim the title and check if it's empty
+ const trimmedTitle = title.value.trim();
+ const trimmedAuthor = author.value.trim();
+
+ if (trimmedTitle === "" || trimmedAuthor === "" || pages.value.trim() === "") {
alert("Please fill all fields!");
return false;
- } else {
- let book = new Book(title.value, author.value, pages.value, check.checked);
- myLibrary.push(book);
- render();
}
+
+ // Validate the "pages" field so that it is always a positive integer
+ const pagesValue = parseInt(pages.value, 10);
+ if (isNaN(pagesValue) || pagesValue <= 0) {
+ alert("Please enter a valid number of pages!");
+ return false;
+ }
+
+ // If all fields are valid, create and add the book to the library
+ let book = new Book(trimmedTitle, trimmedAuthor, pages.value, check.checked);
+ myLibrary.push(book);
+ render();
}
+
function Book(title, author, pages, check) {
this.title = title;
this.author = author;
- this.pages = pages;
+ this.pages = pages;
this.check = 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);
- }
- //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;
+ const table = document.getElementById("display");
+ const tbody = table.getElementsByTagName("tbody")[0]; // Access the <tbody> directly
- //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 = "No";
- } else {
- readStatus = "Yes";
- }
- changeBut.innerText = readStatus;
+ // Clear all rows in tbody
+ tbody.innerHTML = '';
- changeBut.addEventListener("click", function () {
- myLibrary[i].check = !myLibrary[i].check;
+ myLibrary.forEach((book, index) => {
+ const row = tbody.insertRow();
+ row.insertCell(0).innerText = book.title;
+ row.insertCell(1).innerText = book.author;
+ row.insertCell(2).innerText = book.pages;
+
+ // Toggle Read Button
+ const toggleBtn = document.createElement("button");
+ toggleBtn.className = "btn btn-success";
+ toggleBtn.innerText = book.check ? "Yes" : "No";
+ toggleBtn.addEventListener("click", function () {
+ book.check = !book.check;
render();
});
+ row.insertCell(3).appendChild(toggleBtn);
- //add delete button to every row and render again
- let delButton = document.createElement("button");
- delButton.id = i + 5;
- deleteCell.appendChild(delButton);
- delButton.className = "btn btn-warning";
- delButton.innerHTML = "Delete";
- delButton.addEventListener("click", function () {
- alert(`You've deleted title: ${myLibrary[i].title}`);
- myLibrary.splice(i, 1);
+ // Delete Button
+ const deleteBtn = document.createElement("button");
+ deleteBtn.className = "btn btn-warning";
+ deleteBtn.innerText = "Delete";
+ deleteBtn.addEventListener("click", function () {
+ alert(`You've deleted title: ${book.title}`);
+ myLibrary.splice(index, 1);
render();
});
- }
+ row.insertCell(4).appendChild(deleteBtn);
+ });
}