Skip to content

Commit 3c0fb60

Browse files
Mo-MuchunuMo-Muchunu
committed
Fixed JS bugs and improved HTML form semantics
1 parent b55215d commit 3c0fb60

File tree

2 files changed

+85
-127
lines changed

2 files changed

+85
-127
lines changed

‎debugging/book-library/index.html

Lines changed: 45 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,53 @@
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>Book Library</title> <!--set page title-->
6+
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
9+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
11+
<link rel="stylesheet" type="text/css" href="style.css" />
12+
</head>
13+
14+
<body>
15+
<div class="jumbotron text-center">
16+
<h1>My Library</h1> <!--improve header text-->
17+
<p>Add books to your virtual library</p>
18+
</div>
2519

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

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

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>
50+
<script src="script.js"></script>
51+
</body>
9352

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

‎debugging/book-library/script.js

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
let myLibrary = [];
1+
const myLibrary = [];
22

33
window.addEventListener("load", function (e) {
44
populateStorage();
@@ -7,39 +7,42 @@ 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);
11-
let book2 = new Book(
12-
"The Old Man and the Sea",
13-
"Ernest Hemingway",
14-
"127",
15-
true
16-
);
10+
const book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true);
11+
const book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", "127", true);
12+
1713
myLibrary.push(book1);
1814
myLibrary.push(book2);
19-
render();
15+
//render(); // already called in 'load' event
2016
}
2117
}
2218

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-
2819
//check the right input from forms and if its ok -> add the new book (object in array)
2920
//via Book function and start render function
3021
function submit() {
22+
23+
const title = document.getElementById("title"); // move form elements previously declared outside of function / in global scope
24+
const author = document.getElementById("author");
25+
const pages = document.getElementById("pages");
26+
const check = document.getElementById("check");
27+
3128
if (
32-
title.value == null ||
29+
title.value == null ||
3330
title.value == "" ||
31+
author.value == null || // reset all form field after submission
32+
author.value == "" ||
3433
pages.value == null ||
3534
pages.value == ""
3635
) {
3736
alert("Please fill all fields!");
3837
return false;
3938
} else {
40-
let book = new Book(title.value, title.value, pages.value, check.checked);
41-
library.push(book);
39+
const book = new Book(title.value, author.value, pages.value, check.checked); // correct 'author' key
40+
myLibrary.push(book); // correct array name
4241
render();
42+
title.value = "";
43+
author.value = "";
44+
pages.value = "";
45+
check.checked = false;
4346
}
4447
}
4548

@@ -51,36 +54,34 @@ function Book(title, author, pages, check) {
5154
}
5255

5356
function render() {
54-
let table = document.getElementById("display");
55-
let rowsNumber = table.rows.length;
57+
const table = document.getElementById("display");
58+
const rowsNumber = table.rows.length;
5659
//delete old table
57-
for (let n = rowsNumber - 1; n > 0; n-- {
60+
for (let n = rowsNumber - 1; n > 0; n--) { // add missing closing bracket
5861
table.deleteRow(n);
5962
}
6063
//insert updated row and cells
61-
let length = myLibrary.length;
64+
const length = myLibrary.length; // change to 'const' for variables
6265
for (let i = 0; i < length; i++) {
63-
let row = table.insertRow(1);
64-
let titleCell = row.insertCell(0);
65-
let authorCell = row.insertCell(1);
66-
let pagesCell = row.insertCell(2);
67-
let wasReadCell = row.insertCell(3);
68-
let deleteCell = row.insertCell(4);
66+
const row = table.insertRow(1);
67+
const titleCell = row.insertCell(0);
68+
const authorCell = row.insertCell(1);
69+
const pagesCell = row.insertCell(2);
70+
const wasReadCell = row.insertCell(3);
71+
const deleteCell = row.insertCell(4);
6972
titleCell.innerHTML = myLibrary[i].title;
7073
authorCell.innerHTML = myLibrary[i].author;
7174
pagesCell.innerHTML = myLibrary[i].pages;
7275

7376
//add and wait for action for read/unread button
74-
let changeBut = document.createElement("button");
77+
const changeBut = document.createElement("button");
7578
changeBut.id = i;
7679
changeBut.className = "btn btn-success";
7780
wasReadCell.appendChild(changeBut);
7881
let readStatus = "";
79-
if (myLibrary[i].check == false) {
80-
readStatus = "Yes";
81-
} else {
82-
readStatus = "No";
83-
}
82+
83+
readStatus = myLibrary[i].check ? "Yes" : "No"; // correct read status logic for not read
84+
8485
changeBut.innerText = readStatus;
8586

8687
changeBut.addEventListener("click", function () {
@@ -89,12 +90,12 @@ function render() {
8990
});
9091

9192
//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 () {
93+
const delButton = document.createElement("button");
94+
delButton.id = i + 5;
95+
deleteCell.appendChild(delButton); // correct delButton variable name
96+
delButton.className = "btn btn-warning";
97+
delButton.innerHTML = "Delete";
98+
delButton.addEventListener("click", function () { // click not clicks
9899
alert(`You've deleted title: ${myLibrary[i].title}`);
99100
myLibrary.splice(i, 1);
100101
render();

0 commit comments

Comments
 (0)