Skip to content

Commit d2fb66a

Browse files
MohammedNaruMohammedNaru
committed
Refactor book form and submission logic; enhance validation and local storage handling
1 parent 282246f commit d2fb66a

2 files changed

Lines changed: 103 additions & 95 deletions

File tree

‎debugging/book-library/index.html‎

Lines changed: 42 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -27,48 +27,49 @@ <h1>Library</h1>
2727
Add new book
2828
</button>
2929

30-
<div id="demo" class="collapse">
31-
<div class="form-group">
32-
<label for="title">Title:</label>
30+
<div id="demo" class="collapse">
31+
<form id="book-form">
32+
<div class="form-group">
33+
<label for="title">Title:</label>
34+
<input
35+
type="text"
36+
class="form-control"
37+
id="title"
38+
name="title"
39+
required
40+
/>
41+
<label for="author">Author:</label>
42+
<input
43+
type="text"
44+
class="form-control"
45+
id="author"
46+
name="author"
47+
required
48+
/>
49+
<label for="pages">Pages:</label>
50+
<input
51+
type="number"
52+
class="form-control"
53+
id="pages"
54+
name="pages"
55+
required
56+
/>
57+
<label class="form-check-label">
3358
<input
34-
type="title"
35-
class="form-control"
36-
id="title"
37-
name="title"
38-
required
39-
/>
40-
<label for="author">Author: </label>
41-
<input
42-
type="author"
43-
class="form-control"
44-
id="author"
45-
name="author"
46-
required
47-
/>
48-
<label for="pages">Pages:</label>
49-
<input
50-
type="number"
51-
class="form-control"
52-
id="pages"
53-
name="pages"
54-
required
55-
/>
56-
<label class="form-check-label">
57-
<input
58-
type="checkbox"
59-
class="form-check-input"
60-
id="check"
61-
value=""
62-
/>Read
63-
</label>
64-
<input
65-
type="submit"
66-
value="Submit"
67-
class="btn btn-primary"
68-
onclick="submit();"
69-
/>
70-
</div>
59+
type="checkbox"
60+
class="form-check-input"
61+
id="check"
62+
value=""
63+
/>Read
64+
</label>
65+
<input
66+
type="submit"
67+
value="Submit"
68+
class="btn btn-primary"
69+
/>
7170
</div>
71+
</form>
72+
</div>
7273

7374
<table class="table" id="display">
7475
<thead class="thead-dark">
@@ -81,16 +82,9 @@ <h1>Library</h1>
8182
</tr>
8283
</thead>
8384
<tbody>
84-
<tr>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
</tr>
9185
</tbody>
9286
</table>
9387

9488
<script src="script.js"></script>
9589
</body>
96-
</html>
90+
</html>

‎debugging/book-library/script.js‎

Lines changed: 61 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,70 @@
11
let myLibrary = [];
22

3-
window.addEventListener("load", function (e) {
3+
window.addEventListener("load", function () {
44
populateStorage();
55
render();
66
});
77

8+
// Attach form submit event listener
9+
document.getElementById("book-form").addEventListener("submit", function (event) {
10+
event.preventDefault(); // Prevent default form submission
11+
submit();
12+
});
13+
814
function populateStorage() {
9-
if (myLibrary.length == 0) {
10-
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
11-
let book2 = new Book(
12-
"The Old Man and the Sea",
13-
"Ernest Hemingway",
14-
"127",
15-
true
16-
);
17-
myLibrary.push(book1);
18-
myLibrary.push(book2);
19-
render();
15+
const storedLibrary = localStorage.getItem("myLibrary");
16+
if (storedLibrary) {
17+
myLibrary = JSON.parse(storedLibrary);
18+
} else {
19+
let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
20+
let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true);
21+
myLibrary.push(book1, book2);
22+
localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
2023
}
24+
render();
2125
}
2226

2327
const title = document.getElementById("title");
2428
const author = document.getElementById("author");
2529
const pages = document.getElementById("pages");
2630
const check = document.getElementById("check");
2731

28-
//check the right input from forms and if its ok -> add the new book (object in array)
29-
//via Book function and start render function
3032
function submit() {
33+
console.log("submit() function called");
34+
console.log("Input values:", {
35+
title: title.value,
36+
author: author.value,
37+
pages: pages.value,
38+
read: check.checked
39+
});
40+
41+
const maxPages = 30000; // Maximum allowed pages
42+
const pageCount = parseInt(pages.value);
3143
if (
32-
title.value == null ||
33-
title.value == "" ||
34-
pages.value == null ||
35-
pages.value == ""
44+
!title.value.trim() ||
45+
!author.value.trim() ||
46+
!pages.value ||
47+
isNaN(pageCount) ||
48+
pageCount <= 0 ||
49+
pageCount > maxPages
3650
) {
37-
alert("Please fill all fields!");
38-
return false;
39-
} else {
40-
let book = new Book(title.value, title.value, pages.value, check.checked);
41-
library.push(book);
42-
render();
51+
console.log("Validation failed: One or more fields are empty or invalid");
52+
alert(
53+
`Please fill all fields with valid data! Pages must be a number between 1 and ${maxPages}.`
54+
);
55+
return;
4356
}
57+
58+
let book = new Book(title.value.trim(), author.value.trim(), pageCount, check.checked);
59+
console.log("New book created:", book);
60+
myLibrary.push(book);
61+
console.log("myLibrary after push:", myLibrary);
62+
localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
63+
render();
64+
document.querySelector("form").reset();
65+
console.log("Form reset");
66+
$("#demo").collapse("hide");
67+
console.log("Form collapsed");
4468
}
4569

4670
function Book(title, author, pages, check) {
@@ -53,14 +77,11 @@ function Book(title, author, pages, check) {
5377
function render() {
5478
let table = document.getElementById("display");
5579
let rowsNumber = table.rows.length;
56-
//delete old table
57-
for (let n = rowsNumber - 1; n > 0; n-- {
80+
for (let n = rowsNumber - 1; n > 0; n--) {
5881
table.deleteRow(n);
5982
}
60-
//insert updated row and cells
61-
let length = myLibrary.length;
62-
for (let i = 0; i < length; i++) {
63-
let row = table.insertRow(1);
83+
for (let i = 0; i < myLibrary.length; i++) {
84+
let row = table.insertRow(-1);
6485
let titleCell = row.insertCell(0);
6586
let authorCell = row.insertCell(1);
6687
let pagesCell = row.insertCell(2);
@@ -70,34 +91,27 @@ function render() {
7091
authorCell.innerHTML = myLibrary[i].author;
7192
pagesCell.innerHTML = myLibrary[i].pages;
7293

73-
//add and wait for action for read/unread button
7494
let changeBut = document.createElement("button");
75-
changeBut.id = i;
95+
changeBut.id = `read-${i}`;
7696
changeBut.className = "btn btn-success";
97+
changeBut.innerText = myLibrary[i].check ? "Yes" : "No";
7798
wasReadCell.appendChild(changeBut);
78-
let readStatus = "";
79-
if (myLibrary[i].check == false) {
80-
readStatus = "Yes";
81-
} else {
82-
readStatus = "No";
83-
}
84-
changeBut.innerText = readStatus;
85-
8699
changeBut.addEventListener("click", function () {
87100
myLibrary[i].check = !myLibrary[i].check;
101+
localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
88102
render();
89103
});
90104

91-
//add delete button to every row and render again
92105
let delButton = document.createElement("button");
93-
delBut.id = i + 5;
94-
deleteCell.appendChild(delBut);
95-
delBut.className = "btn btn-warning";
96-
delBut.innerHTML = "Delete";
97-
delBut.addEventListener("clicks", function () {
106+
delButton.id = `delete-${i}`;
107+
delButton.className = "btn btn-warning";
108+
delButton.innerHTML = "Delete";
109+
deleteCell.appendChild(delButton);
110+
delButton.addEventListener("click", function () {
98111
alert(`You've deleted title: ${myLibrary[i].title}`);
99112
myLibrary.splice(i, 1);
113+
localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
100114
render();
101115
});
102116
}
103-
}
117+
}

0 commit comments

Comments
 (0)