Skip to content

Commit 7168d78

Browse files
KonvalyKonvaly
committed
Improve book form validation and render rows in tbody
1 parent 6acbd7c commit 7168d78

File tree

2 files changed

+107
-154
lines changed

2 files changed

+107
-154
lines changed

‎debugging/book-library/index.html‎

Lines changed: 48 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,56 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title> </title>
5-
<meta
6-
charset="utf-8"
7-
name="viewport"
8-
content="width=device-width, initial-scale=1.0"
9-
/>
10-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
12-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
13-
<link
14-
rel="stylesheet"
15-
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
16-
/>
17-
<link rel="stylesheet" type="text/css" href="style.css" />
18-
</head>
193

20-
<body>
21-
<div class="jumbotron text-center">
22-
<h1>Library</h1>
23-
<p>Add books to your virtual library</p>
24-
</div>
4+
<head>
5+
<title> </title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
10+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
12+
<link rel="stylesheet" type="text/css" href="style.css" />
13+
</head>
14+
15+
<body>
16+
<div class="jumbotron text-center">
17+
<h1>Library</h1>
18+
<p>Add books to your virtual library</p>
19+
</div>
2520

26-
<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
27-
Add new book
28-
</button>
21+
<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
22+
Add new book
23+
</button>
2924

30-
<div id="demo" class="collapse">
31-
<div class="form-group">
32-
<label for="title">Title:</label>
33-
<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>
25+
<div id="demo" class="collapse">
26+
<div class="form-group">
27+
<label for="title">Title:</label>
28+
<input type="text" class="form-control" id="title" name="title" required />
29+
<label for="author">Author: </label>
30+
<input type="text" class="form-control" id="author" name="author" required />
31+
<label for="pages">Pages:</label>
32+
<input type="number" class="form-control" id="pages" name="pages" required />
33+
<label class="form-check-label">
34+
<input type="checkbox" class="form-check-input" id="check" value="" />Read
35+
</label>
36+
<input type="submit" value="Submit" class="btn btn-primary" onclick="submit();" />
7137
</div>
38+
</div>
39+
40+
<table class="table" id="display">
41+
<thead class="thead-dark">
42+
<tr>
43+
<th>Title</th>
44+
<th>Author</th>
45+
<th>Number of Pages</th>
46+
<th>Read</th>
47+
<th></th>
48+
</tr>
49+
</thead>
50+
<tbody id="bookRows"></tbody>
51+
</table>
7252

73-
<table class="table" id="display">
74-
<thead class="thead-dark">
75-
<tr>
76-
<th>Title</th>
77-
<th>Author</th>
78-
<th>Number of Pages</th>
79-
<th>Read</th>
80-
<th></th>
81-
</tr>
82-
</thead>
83-
<tbody>
84-
<tr>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
</tr>
91-
</tbody>
92-
</table>
53+
<script src="script.js"></script>
54+
</body>
9355

94-
<script src="script.js"></script>
95-
</body>
96-
</html>
56+
</html>

‎debugging/book-library/script.js‎

Lines changed: 59 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,15 @@ window.addEventListener("load", function (e) {
77

88
function populateStorage() {
99
if (myLibrary.length == 0) {
10-
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
10+
let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
1111
let book2 = new Book(
1212
"The Old Man and the Sea",
1313
"Ernest Hemingway",
14-
"127",
14+
127,
1515
true
1616
);
1717
myLibrary.push(book1);
1818
myLibrary.push(book2);
19-
render();
2019
}
2120
}
2221

@@ -25,36 +24,39 @@ const author = document.getElementById("author");
2524
const pages = document.getElementById("pages");
2625
const check = document.getElementById("check");
2726

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
3027
function submit() {
31-
if (
32-
title.value == null ||
33-
title.value == "" ||
34-
pages.value == null ||
35-
pages.value == ""
36-
) {
28+
const titleValue = title.value.trim();
29+
const authorValue = author.value.trim();
30+
const pagesValue = pages.value.trim();
31+
const pagesNumber = Number(pagesValue);
32+
33+
if (!titleValue || !authorValue || !pagesValue) {
3734
alert("Please fill all fields!");
38-
return false;
39-
} else {
40-
const alreadyExists = myLibrary.some(
41-
(book) => book.title === title.value);
42-
if (alreadyExists) {
43-
alert("This book is already in your library!");
44-
return;
45-
}
35+
return;
4636
}
47-
let book = new Book(title.value, author.value, pages.value, check.checked);
48-
myLibrary.push(book);
49-
render();
50-
51-
//clear the form after submit
52-
title.value = "";
53-
author.value = "";
54-
pages.value = "";
55-
check.checked = false;
37+
38+
if (!Number.isFinite(pagesNumber) || pagesNumber <= 0) {
39+
alert("Pages must be a positive number.");
40+
return;
5641
}
5742

43+
const alreadyExists = myLibrary.some(
44+
(book) => book.title.toLowerCase() === titleValue.toLowerCase()
45+
);
46+
if (alreadyExists) {
47+
alert("This book is already in your library!");
48+
return;
49+
}
50+
51+
let book = new Book(titleValue, authorValue, pagesNumber, check.checked);
52+
myLibrary.push(book);
53+
render();
54+
55+
title.value = "";
56+
author.value = "";
57+
pages.value = "";
58+
check.checked = false;
59+
}
5860

5961
function Book(title, author, pages, check) {
6062
this.title = title;
@@ -64,53 +66,44 @@ function Book(title, author, pages, check) {
6466
}
6567

6668
function render() {
67-
let table = document.getElementById("display");
68-
let rowsNumber = table.rows.length;
69-
//delete old table
70-
for (let n = rowsNumber - 1; n > 0; n--) {
71-
table.deleteRow(n);
72-
}
73-
//insert updated row and cells
74-
let length = myLibrary.length;
75-
for (let i = 0; i < length; i++) {
76-
let row = table.insertRow(1);
77-
let titleCell = row.insertCell(0);
78-
let authorCell = row.insertCell(1);
79-
let pagesCell = row.insertCell(2);
80-
let wasReadCell = row.insertCell(3);
81-
let deleteCell = row.insertCell(4);
82-
titleCell.innerHTML = myLibrary[i].title;
83-
authorCell.innerHTML = myLibrary[i].author;
84-
pagesCell.innerHTML = myLibrary[i].pages;
85-
86-
//add and wait for action for read/unread button
87-
let changeBut = document.createElement("button");
88-
changeBut.id = i;
89-
changeBut.className = "btn btn-success";
90-
wasReadCell.appendChild(changeBut);
91-
let readStatus = "";
92-
if (myLibrary[i].check == false) {
93-
readStatus = "No";
94-
} else {
95-
readStatus = "Yes";
96-
}
97-
changeBut.innerText = readStatus;
69+
const tbody = document.getElementById("bookRows");
70+
tbody.textContent = "";
9871

72+
for (let i = 0; i < myLibrary.length; i++) {
73+
const book = myLibrary[i];
74+
75+
const row = tbody.insertRow();
76+
77+
const titleCell = row.insertCell(0);
78+
const authorCell = row.insertCell(1);
79+
const pagesCell = row.insertCell(2);
80+
const wasReadCell = row.insertCell(3);
81+
const deleteCell = row.insertCell(4);
82+
83+
titleCell.textContent = book.title;
84+
authorCell.textContent = book.author;
85+
pagesCell.textContent = book.pages;
86+
87+
const changeBut = document.createElement("button");
88+
changeBut.className = "btn btn-success";
89+
changeBut.textContent = book.check ? "Yes" : "No";
9990
changeBut.addEventListener("click", function () {
100-
myLibrary[i].check = !myLibrary[i].check;
91+
book.check = !book.check;
10192
render();
10293
});
94+
wasReadCell.appendChild(changeBut);
10395

104-
//add delete button to every row and render again
10596
let delBut = document.createElement("button");
106-
delBut.id = i + 5;
107-
deleteCell.appendChild(delBut);
10897
delBut.className = "btn btn-warning";
109-
delBut.innerHTML = "Delete";
98+
delBut.textContent = "Delete";
11099
delBut.addEventListener("click", function () {
111-
alert(`You've deleted title: ${myLibrary[i].title}`);
112-
myLibrary.splice(i, 1);
100+
const bookIndex = myLibrary.indexOf(book);
101+
if (bookIndex === -1) return;
102+
103+
myLibrary.splice(bookIndex, 1);
113104
render();
105+
alert(`You've deleted title: ${book.title}`);
114106
});
107+
deleteCell.appendChild(delBut);
115108
}
116109
}

0 commit comments

Comments
 (0)