Skip to content

Commit 788b19b

Browse files
HannaOdudHannaOdud
committed
more fixes
1 parent e9dbd8d commit 788b19b

File tree

3 files changed

+35
-40
lines changed

3 files changed

+35
-40
lines changed

‎debugging/book-library/index.html‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
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>
1310
<link
1411
rel="stylesheet"
1512
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
16-
/>
17-
<link rel="stylesheet" type="text/css" href="style.css" />
13+
>
14+
<link rel="stylesheet" type="text/css" href="style.css" >
1815
</head>
1916

2017
<body>
@@ -31,42 +28,42 @@ <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
39-
/>
36+
>
4037
<label for="author">Author: </label>
4138
<input
42-
type="author"
39+
type="text"
4340
class="form-control"
4441
id="author"
4542
name="author"
4643
required
47-
/>
44+
>
4845
<label for="pages">Pages:</label>
4946
<input
50-
type="number"
47+
type="text"
5148
class="form-control"
5249
id="pages"
5350
name="pages"
5451
required
55-
/>
52+
>
5653
<label class="form-check-label">
5754
<input
5855
type="checkbox"
5956
class="form-check-input"
6057
id="check"
6158
value=""
62-
/>Read
59+
>Read
6360
</label>
6461
<input
62+
id="submit-btn"
6563
type="submit"
6664
value="Submit"
6765
class="btn btn-primary"
68-
onclick="submit();"
69-
/>
66+
>
7067
</div>
7168
</div>
7269

@@ -91,6 +88,6 @@ <h1>Library</h1>
9188
</tbody>
9289
</table>
9390

94-
<script src="script.js"></script>
91+
<script src="script.js" type="module"></script>
9592
</body>
9693
</html>

‎debugging/book-library/script.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ let myLibrary = [];
22

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

87
function populateStorage() {
@@ -20,24 +19,25 @@ 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 titleDom = document.getElementById("title");
23+
const authorDom = document.getElementById("author");
24+
const pagesDom = document.getElementById("pages");
25+
const checkDom = document.getElementById("check");
26+
27+
document.getElementById('submit-btn').addEventListener('click', submit);
2728

2829
//check the right input from forms and if its ok -> add the new book (object in array)
2930
//via Book function and start render function
3031
function submit() {
3132
if (
32-
title.value == null ||
33-
title.value == "" ||
34-
pages.value == null ||
35-
pages.value == ""
33+
titleDom.value == "" ||
34+
authorDom.value == "" ||
35+
pagesDom.value == 0
3636
) {
3737
alert("Please fill all fields!");
3838
return false;
3939
} else {
40-
let book = new Book(title.value, author.value, pages.value, check.checked);
40+
let book = new Book(titleDom.value.trim(), authorDom.value.trim(), pagesDom.value, checkDom.checked);
4141
myLibrary.push(book);
4242
render();
4343
}
@@ -52,11 +52,9 @@ function Book(title, author, pages, check) {
5252

5353
function render() {
5454
let table = document.getElementById("display");
55-
let rowsNumber = table.rows.length;
5655
//delete old table
57-
for (let n = rowsNumber - 1; n > 0; n-- ){
58-
table.deleteRow(n);
59-
}
56+
let tableBody = table.querySelector("tbody");
57+
tableBody.textContent = '';
6058
//insert updated row and cells
6159
let length = myLibrary.length;
6260
for (let i = 0; i < length; i++) {
@@ -66,9 +64,9 @@ function render() {
6664
let pagesCell = row.insertCell(2);
6765
let wasReadCell = row.insertCell(3);
6866
let deleteCell = row.insertCell(4);
69-
titleCell.innerHTML = myLibrary[i].title;
70-
authorCell.innerHTML = myLibrary[i].author;
71-
pagesCell.innerHTML = myLibrary[i].pages;
67+
titleCell.textContent = myLibrary[i].title;
68+
authorCell.textContent = myLibrary[i].author;
69+
pagesCell.textContent = myLibrary[i].pages;
7270

7371
//add and wait for action for read/unread button
7472
let changeBut = document.createElement("button");
@@ -81,7 +79,7 @@ function render() {
8179
} else {
8280
readStatus = "Yes";
8381
}
84-
changeBut.innerText = readStatus;
82+
changeBut.textContent = readStatus;
8583

8684
changeBut.addEventListener("click", function () {
8785
myLibrary[i].check = !myLibrary[i].check;
@@ -93,10 +91,10 @@ function render() {
9391
delBut.id = i + 5;
9492
deleteCell.appendChild(delBut);
9593
delBut.className = "btn btn-warning";
96-
delBut.innerHTML = "Delete";
94+
delBut.textContent = "Delete";
9795
delBut.addEventListener("click", function () {
98-
alert(`You've deleted title: ${myLibrary[i].title}`);
9996
myLibrary.splice(i, 1);
97+
alert(`You've deleted title: ${myLibrary[i].title}`);
10098
render();
10199
});
102100
}

‎debugging/book-library/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.form-group {
22
width: 400px;
33
height: 300px;
4-
align-self: left;
4+
align-self: flex-start;
55
padding-left: 20px;
66
}
77

0 commit comments

Comments
 (0)