Skip to content

Commit 3ccacab

Browse files
TzeMingHoTzeMingHo
committed
After reading feedback, some improvement
1 parent 1b926cf commit 3ccacab

File tree

2 files changed

+55
-67
lines changed

2 files changed

+55
-67
lines changed

‎debugging/book-library/index.html‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title> </title>
4+
<title>Virtual library</title>
5+
<meta charset="utf-8" />
56
<meta
6-
charset="utf-8"
77
name="viewport"
88
content="width=device-width, initial-scale=1.0"
99
/>
@@ -28,18 +28,18 @@ <h1>Library</h1>
2828
</button>
2929

3030
<div id="demo" class="collapse">
31-
<div class="form-group">
31+
<form class="form-group" id="book-form" onsubmit="handleSubmit(event)" >
3232
<label for="title">Title:</label>
3333
<input
34-
type="title"
34+
type="text"
3535
class="form-control"
3636
id="title"
3737
name="title"
3838
required
3939
/>
4040
<label for="author">Author: </label>
4141
<input
42-
type="author"
42+
type="text"
4343
class="form-control"
4444
id="author"
4545
name="author"
@@ -66,9 +66,8 @@ <h1>Library</h1>
6666
type="submit"
6767
value="Submit"
6868
class="btn btn-primary"
69-
onclick="submit();"
7069
/>
71-
</div>
70+
</form>
7271
</div>
7372

7473
<table class="table" id="display">
@@ -81,14 +80,8 @@ <h1>Library</h1>
8180
<th></th>
8281
</tr>
8382
</thead>
84-
<tbody>
85-
<tr>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
<td></td>
91-
</tr>
83+
<tbody id="display-body">
84+
9285
</tbody>
9386
</table>
9487

‎debugging/book-library/script.js‎

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ let myLibrary = [];
22

33
window.addEventListener("load", function (e) {
44
populateStorage();
5-
render();
65
});
76

87
function populateStorage() {
98
if (myLibrary.length == 0) {
10-
let book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true);
9+
let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
1110
let book2 = new Book(
1211
"The Old Man and the Sea",
1312
"Ernest Hemingway",
14-
"127",
13+
127,
1514
true
1615
);
1716
myLibrary.push(book1);
@@ -20,91 +19,87 @@ function populateStorage() {
2019
}
2120
}
2221

23-
const title = document.getElementById("title");
24-
const author = document.getElementById("author");
25-
const pages = document.getElementById("pages");
26-
const check = document.getElementById("check");
22+
const titleInput = document.getElementById("title");
23+
const authorInput = document.getElementById("author");
24+
const pagesInput = document.getElementById("pages");
25+
const checkInput = document.getElementById("check");
2726

2827
//check the right input from forms and if its ok -> add the new book (object in array)
2928
//via Book function and start render function
30-
function submit() {
29+
function handleSubmit(event) {
30+
event.preventDefault();
3131
if (
32-
!title.value.trim() ||
33-
!author.value.trim() ||
34-
!pages.value
32+
!titleInput.value.trim() ||
33+
!authorInput.value.trim() ||
34+
pagesInput.value <= 0
3535
) {
3636
alert("Please fill all fields!");
3737
return false;
3838
} else {
39-
let book = new Book(title.value, author.value, pages.value, check.checked);
39+
let book = new Book(String(titleInput.value), String(authorInput.value), Number(pagesInput.value), checkInput.checked);
4040
myLibrary.push(book);
4141
resetAddNewBook()
4242
render();
4343
}
4444
}
4545

4646
function resetAddNewBook() {
47-
title.value = '';
48-
author.value = '';
49-
pages.value = '';
50-
check.checked = false;
47+
// titleInput.value = '';
48+
// authorInput.value = '';
49+
// pagesInput.value = 0;
50+
// checkInput.checked = false;
51+
document.getElementById("book-form").reset()
5152
}
5253

53-
function Book(title, author, pages, check) {
54+
class Book {
55+
constructor (title, author, pages, check) {
5456
this.title = title;
5557
this.author = author;
5658
this.pages = pages;
5759
this.check = check;
60+
}
5861
}
5962

6063
function render() {
61-
let table = document.getElementById("display");
62-
let rowsNumber = table.rows.length;
6364
//delete old table
64-
for (let n = rowsNumber - 1; n > 0; n-- ){
65-
table.deleteRow(n);
66-
}
65+
let tableBody = document.getElementById("display-body")
66+
tableBody.innerHTML = '';
6767
//insert updated row and cells
68-
let length = myLibrary.length;
69-
for (let libraryBookIndex = 0; libraryBookIndex < length; libraryBookIndex++) {
70-
let row = table.insertRow(-1);
68+
myLibrary.forEach((book, index) => {
69+
let row = tableBody.insertRow(-1);
7170
let titleCell = row.insertCell(0);
7271
let authorCell = row.insertCell(1);
7372
let pagesCell = row.insertCell(2);
7473
let wasReadCell = row.insertCell(3);
7574
let deleteCell = row.insertCell(4);
76-
titleCell.innerHTML = myLibrary[libraryBookIndex].title;
77-
authorCell.innerHTML = myLibrary[libraryBookIndex].author;
78-
pagesCell.innerHTML = myLibrary[libraryBookIndex].pages;
75+
titleCell.innerText = book.title;
76+
authorCell.innerText = book.author;
77+
pagesCell.innerText = book.pages;
7978

80-
//add and wait for action for read/unread button
81-
let readOrUnreadButton = document.createElement("button");
82-
readOrUnreadButton.id = `readOrUnreadBtn${libraryBookIndex}`;
83-
readOrUnreadButton.className = "btn btn-success";
84-
wasReadCell.appendChild(readOrUnreadButton);
85-
let readStatus = "";
86-
if (myLibrary[libraryBookIndex].check) {
87-
readStatus = "Yes";
88-
} else {
89-
readStatus = "No";
90-
}
91-
readOrUnreadButton.innerText = readStatus;
79+
//add and wait for action for readToggle button
80+
let readToggleButton = document.createElement("button");
81+
readToggleButton.id = `readOrUnreadBtn${index}`;
82+
readToggleButton.className = "btn btn-success";
83+
wasReadCell.appendChild(readToggleButton);
84+
85+
readToggleButton.innerText = book.check ? "Yes" : "No";
9286

93-
readOrUnreadButton.addEventListener("click", function () {
94-
myLibrary[libraryBookIndex].check = !myLibrary[libraryBookIndex].check;
87+
readToggleButton.addEventListener("click", function () {
88+
book.check = !book.check;
9589
render();
9690
});
9791

9892
//add delete button to every row and render again
99-
let delButton = document.createElement("button");
100-
delButton.id = `delBtn${libraryBookIndex}`;
101-
deleteCell.appendChild(delButton);
102-
delButton.className = "btn btn-warning";
103-
delButton.innerHTML = "Delete";
104-
delButton.addEventListener("click", () => {
105-
alert(`You've deleted title: ${myLibrary[libraryBookIndex].title}`);
106-
myLibrary.splice(libraryBookIndex, 1);
107-
render();
93+
let deleteButton = document.createElement("button");
94+
deleteButton.id = `delBtn${index}`;
95+
deleteCell.appendChild(deleteButton);
96+
deleteButton.className = "btn btn-warning";
97+
deleteButton.innerText = "Delete";
98+
deleteButton.addEventListener("click", () => {
99+
if (confirm(`You've deleted title: ${book.title}`)) {
100+
myLibrary.splice(index, 1);
101+
render();
102+
}
108103
});
109-
}
104+
})
110105
}

0 commit comments

Comments
 (0)