Skip to content

Commit 1446f62

Browse files
ahmadehsasahmadehsas
committed
Update index.html and script.js code.
1 parent 6b41880 commit 1446f62

File tree

2 files changed

+83
-117
lines changed

2 files changed

+83
-117
lines changed

‎debugging/book-library/index.html‎

Lines changed: 49 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title> </title>
5-
<meta
6-
charset="utf-8"
7-
name="viewport"
8-
content="width=device-width, initial-scale=1.0"
9-
/>
4+
<title>Book Library</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
107
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
118
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
129
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
@@ -23,50 +20,55 @@ <h1>Library</h1>
2320
<p>Add books to your virtual library</p>
2421
</div>
2522

26-
<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
23+
<button data-toggle="collapse" data-target="#demo" class="btn btn-info" aria-expanded="false">
2724
Add new book
2825
</button>
2926

3027
<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">
28+
<form id="bookForm">
29+
<div class="form-group">
30+
<label for="title">Title:</label>
31+
<input
32+
type="text"
33+
class="form-control"
34+
id="title"
35+
name="title"
36+
required
37+
placeholder="Enter book title"
38+
/>
39+
<label for="author">Author: </label>
40+
<input
41+
type="text"
42+
class="form-control"
43+
id="author"
44+
name="author"
45+
required
46+
placeholder="Enter author's name"
47+
/>
48+
<label for="pages">Pages:</label>
5749
<input
58-
type="checkbox"
59-
class="form-check-input"
60-
id="check"
61-
value=""
62-
/>Read
63-
</label>
64-
<button
65-
type="button"
66-
id="SubmitBtn"
67-
class="btn btn-primary">submit</button>
68-
69-
</div>
50+
type="number"
51+
class="form-control"
52+
id="pages"
53+
name="pages"
54+
required
55+
min="1"
56+
placeholder="Enter number of pages"
57+
/>
58+
<label class="form-check-label">
59+
<input
60+
type="checkbox"
61+
class="form-check-input"
62+
id="check"
63+
name="read"
64+
/>Read
65+
</label>
66+
<button
67+
type="submit"
68+
id="SubmitBtn"
69+
class="btn btn-primary">Submit</button>
70+
</div>
71+
</form>
7072
</div>
7173

7274
<table class="table" id="display">
@@ -80,16 +82,10 @@ <h1>Library</h1>
8082
</tr>
8183
</thead>
8284
<tbody>
83-
<tr>
84-
<td></td>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
</tr>
85+
<!-- Rows will be dynamically added here -->
9086
</tbody>
9187
</table>
9288

9389
<script src="script.js"></script>
9490
</body>
95-
</html>
91+
</html>

‎debugging/book-library/script.js‎

Lines changed: 34 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
let myLibrary = [];
22

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

88
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();
9+
if (myLibrary.length === 0) {
10+
let book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true);
11+
let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", "127", true);
12+
myLibrary.push(book1, book2);
2013
}
2114
}
2215

@@ -25,87 +18,64 @@ const author = document.getElementById("author");
2518
const pages = document.getElementById("pages");
2619
const check = document.getElementById("check");
2720

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
21+
// Add a new book to the library
3022
function addBook() {
31-
if (
32-
!title.value.trim() ||
33-
!author.value.trim() ||
34-
!pages.value.trim()
35-
) {
23+
if (!title.value.trim() || !author.value.trim() || !pages.value.trim()) {
3624
alert("Please fill all fields!");
3725
return;
38-
}
39-
let book = new Book(title.value.trim(), author.value.trim(), pages.value, check.checked);
40-
myLibrary.push(book);
41-
render();
4226
}
27+
let book = new Book(title.value.trim(), author.value.trim(), pages.value, check.checked);
28+
myLibrary.push(book);
29+
render();
30+
}
4331

44-
32+
// Book constructor
4533
function Book(title, author, pages, read) {
4634
this.title = title;
4735
this.author = author;
4836
this.pages = pages;
4937
this.check = read;
5038
}
5139

40+
// Render the library table
5241
function render() {
5342
let table = document.getElementById("display");
5443
let rowsNumber = table.rows.length;
55-
//delete old table
44+
45+
// Clear existing rows (except the header)
5646
for (let n = rowsNumber - 1; n > 0; n--) {
5747
table.deleteRow(n);
5848
}
59-
//insert updated row and cells
60-
let length = myLibrary.length;
61-
for (let i = 0; i < length; i++) {
49+
50+
// Populate the table with updated library data
51+
myLibrary.forEach((book, i) => {
6252
let row = table.insertRow(1);
63-
let titleCell = row.insertCell(0);
64-
let authorCell = row.insertCell(1);
65-
let pagesCell = row.insertCell(2);
66-
let wasReadCell = row.insertCell(3);
67-
let deleteCell = row.insertCell(4);
68-
titleCell.innerHTML = myLibrary[i].title;
69-
authorCell.innerHTML = myLibrary[i].author;
70-
pagesCell.innerHTML = myLibrary[i].pages;
53+
row.insertCell(0).innerText = book.title;
54+
row.insertCell(1).innerText = book.author;
55+
row.insertCell(2).innerText = book.pages;
7156

72-
//add and wait for action for read/unread button
57+
// Add read/unread toggle button
58+
let wasReadCell = row.insertCell(3);
7359
let changeBut = document.createElement("button");
74-
changeBut.id = i;
7560
changeBut.className = "btn btn-success";
76-
wasReadCell.appendChild(changeBut);
77-
let readStatus = "";
78-
if (myLibrary[i].check) {
79-
readStatus = "Yes";
80-
} else {
81-
readStatus = "No";
82-
}
83-
changeBut.innerText = readStatus;
84-
61+
changeBut.innerText = book.check ? "Yes" : "No";
8562
changeBut.addEventListener("click", function () {
86-
myLibrary[i].check = !myLibrary[i].check;
63+
book.check = !book.check;
8764
render();
8865
});
66+
wasReadCell.appendChild(changeBut);
8967

90-
//add delete button to every row and render again
68+
// Add delete button
69+
let deleteCell = row.insertCell(4);
9170
let delButton = document.createElement("button");
9271
delButton.className = "btn btn-primary";
9372
delButton.textContent = "Delete";
94-
delButton.addEventListener("click", function() {
95-
if (confirm(`Delete "${myLibrary[i].title}" from your library?`)) {
96-
myLibrary.splice(i, 1);
97-
render();
73+
delButton.addEventListener("click", function () {
74+
if (confirm(`Delete "${book.title}" from your library?`)) {
75+
myLibrary.splice(i, 1);
76+
render();
9877
}
99-
10078
});
10179
deleteCell.appendChild(delButton);
102-
// deleteCell.appendChild(delBut);
103-
// delBut.className = "btn btn-warning";
104-
// delBut.innerHTML = "Delete";
105-
// delBut.addEventListener("clicks", function () {
106-
// alert(`You've deleted title: ${myLibrary[i].title}`);
107-
// myLibrary.splice(i, 1);
108-
// render();
109-
110-
}
111-
}
80+
});
81+
}

0 commit comments

Comments
 (0)