Skip to content

Commit a815cee

Browse files
TarawallyTarawally
committed
fix(book-library): resolve all functional bugs and update the html structure and titles
1 parent c89c066 commit a815cee

File tree

3 files changed

+219
-92
lines changed

3 files changed

+219
-92
lines changed

‎debugging/book-library/index.html‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
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>
@@ -19,7 +16,7 @@
1916

2017
<body>
2118
<div class="jumbotron text-center">
22-
<h1>Library</h1>
19+
<h1>My Book Library</h1>
2320
<p>Add books to your virtual library</p>
2421
</div>
2522

@@ -31,15 +28,15 @@ <h1>Library</h1>
3128
<div class="form-group">
3229
<label for="title">Title:</label>
3330
<input
34-
type="title"
31+
type="text"
3532
class="form-control"
3633
id="title"
3734
name="title"
3835
required
3936
/>
4037
<label for="author">Author: </label>
4138
<input
42-
type="author"
39+
type="text"
4340
class="form-control"
4441
id="author"
4542
name="author"
@@ -64,32 +61,26 @@ <h1>Library</h1>
6461
<input
6562
type="submit"
6663
value="Submit"
67-
class="btn btn-primary"
68-
onclick="submit();"
64+
class="btn btn-primary btn-block"
65+
id="submit-book-btn"
6966
/>
7067
</div>
7168
</div>
7269

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>
70+
<div class="table-responsive">
71+
<table class="table table-hover" id="display">
72+
<thead class="thead-dark">
73+
<tr>
74+
<th>Title</th>
75+
<th>Author</th>
76+
<th>Number of Pages</th>
77+
<th>Read</th>
78+
<th></th>
79+
</tr>
80+
</thead>
81+
<tbody></tbody>
82+
</table>
83+
</div>
9384

9485
<script src="script.js"></script>
9586
</body>

‎debugging/book-library/script.js‎

Lines changed: 73 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1+
const titleInput = document.getElementById("title");
2+
const authorInput = document.getElementById("author");
3+
const pagesInput = document.getElementById("pages");
4+
const readCheckbox = document.getElementById("check");
5+
const table = document.getElementById("display");
6+
const submitBtn = document.getElementById("submit-book-btn");
7+
18
let myLibrary = [];
29

3-
window.addEventListener("load", function (e) {
10+
window.addEventListener("load", function () {
411
populateStorage();
512
render();
613
});
714

15+
submitBtn.addEventListener("click", addBook);
16+
817
function populateStorage() {
9-
if (myLibrary.length == 0) {
18+
const storedLibrary = localStorage.getItem("myLibrary");
19+
if (storedLibrary) {
20+
myLibrary = JSON.parse(storedLibrary);
21+
} else {
22+
// Initialises default books if storage empty
1023
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
1124
let book2 = new Book(
1225
"The Old Man and the Sea",
@@ -16,30 +29,37 @@ function populateStorage() {
1629
);
1730
myLibrary.push(book1);
1831
myLibrary.push(book2);
19-
render();
32+
saveStorage();
2033
}
2134
}
2235

23-
const title = document.getElementById("title");
24-
const author = document.getElementById("author");
25-
const pages = document.getElementById("pages");
26-
const check = document.getElementById("check");
27-
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
30-
function submit() {
31-
if (
32-
title.value == null ||
33-
title.value == "" ||
34-
pages.value == null ||
35-
pages.value == ""
36-
) {
36+
function saveStorage() {
37+
localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
38+
}
39+
40+
// Validates input and adds new book
41+
function addBook(e) {
42+
if (e) e.preventDefault();
43+
44+
if (!titleInput.value || !authorInput.value || !pagesInput.value) {
3745
alert("Please fill all fields!");
3846
return false;
3947
} else {
40-
let book = new Book(title.value, title.value, pages.value, check.checked);
41-
library.push(book);
48+
let book = new Book(
49+
titleInput.value,
50+
authorInput.value,
51+
pagesInput.value,
52+
readCheckbox.checked
53+
);
54+
myLibrary.push(book);
55+
saveStorage();
4256
render();
57+
58+
// Clears inputs
59+
titleInput.value = "";
60+
authorInput.value = "";
61+
pagesInput.value = "";
62+
readCheckbox.checked = false;
4363
}
4464
}
4565

@@ -51,53 +71,56 @@ function Book(title, author, pages, check) {
5171
}
5272

5373
function render() {
54-
let table = document.getElementById("display");
55-
let rowsNumber = table.rows.length;
56-
//delete old table
57-
for (let n = rowsNumber - 1; n > 0; n-- {
58-
table.deleteRow(n);
59-
}
60-
//insert updated row and cells
74+
// Clears table body efficiently
75+
const tbody = table.querySelector("tbody");
76+
tbody.innerHTML = "";
77+
78+
// Inserts updated row and cells
6179
let length = myLibrary.length;
6280
for (let i = 0; i < length; i++) {
63-
let row = table.insertRow(1);
81+
// Insert at the end of the table
82+
let row = tbody.insertRow(-1);
6483
let titleCell = row.insertCell(0);
6584
let authorCell = row.insertCell(1);
6685
let pagesCell = row.insertCell(2);
6786
let wasReadCell = row.insertCell(3);
6887
let deleteCell = row.insertCell(4);
69-
titleCell.innerHTML = myLibrary[i].title;
70-
authorCell.innerHTML = myLibrary[i].author;
71-
pagesCell.innerHTML = myLibrary[i].pages;
72-
73-
//add and wait for action for read/unread button
74-
let changeBut = document.createElement("button");
75-
changeBut.id = i;
76-
changeBut.className = "btn btn-success";
77-
wasReadCell.appendChild(changeBut);
88+
89+
// Uses textContent to prevent XSS
90+
titleCell.textContent = myLibrary[i].title;
91+
authorCell.textContent = myLibrary[i].author;
92+
pagesCell.textContent = myLibrary[i].pages;
93+
94+
// Toggles read status
95+
let readBtn = document.createElement("button");
96+
readBtn.className = "btn btn-success";
97+
wasReadCell.appendChild(readBtn);
98+
7899
let readStatus = "";
79100
if (myLibrary[i].check == false) {
80-
readStatus = "Yes";
81-
} else {
82101
readStatus = "No";
102+
} else {
103+
readStatus = "Yes";
83104
}
84-
changeBut.innerText = readStatus;
105+
readBtn.textContent = readStatus;
85106

86-
changeBut.addEventListener("click", function () {
107+
readBtn.addEventListener("click", function () {
87108
myLibrary[i].check = !myLibrary[i].check;
109+
saveStorage();
88110
render();
89111
});
90112

91-
//add delete button to every row and render again
92-
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 () {
98-
alert(`You've deleted title: ${myLibrary[i].title}`);
99-
myLibrary.splice(i, 1);
100-
render();
113+
// Deletes book
114+
let deleteBtn = document.createElement("button");
115+
deleteCell.appendChild(deleteBtn);
116+
deleteBtn.className = "btn btn-warning";
117+
deleteBtn.textContent = "Delete";
118+
deleteBtn.addEventListener("click", function () {
119+
if (confirm(`Are you sure you want to delete: ${myLibrary[i].title}?`)) {
120+
myLibrary.splice(i, 1);
121+
saveStorage();
122+
render();
123+
}
101124
});
102125
}
103126
}

0 commit comments

Comments
 (0)