Skip to content

Commit bca0cbe

Browse files
Seti-JemalSeti-Jemal
committed
fix: book library bugs
1 parent 3a422e9 commit bca0cbe

5 files changed

Lines changed: 98 additions & 116 deletions

File tree

‎Module-Data-Flows‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit 3a422e9908e68be52f53add3f2cd6246eee39f98

‎Project-TV-Show‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit b91f40042ac04d38dd7af1110797826cbde33789

‎debugging/book-library/index.html‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!doctype 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>Library</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
108
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
119
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
1210
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
11+
1312
<link
1413
rel="stylesheet"
1514
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
1615
/>
17-
<link rel="stylesheet" type="text/css" href="style.css" />
16+
<link rel="stylesheet" href="style.css" />
1817
</head>
1918

2019
<body>
@@ -31,41 +30,42 @@ <h1>Library</h1>
3130
<div class="form-group">
3231
<label for="title">Title:</label>
3332
<input
34-
type="title"
33+
type="text"
3534
class="form-control"
3635
id="title"
3736
name="title"
3837
required
3938
/>
40-
<label for="author">Author: </label>
39+
40+
<label for="author">Author:</label>
4141
<input
42-
type="author"
42+
type="text"
4343
class="form-control"
4444
id="author"
4545
name="author"
4646
required
4747
/>
48+
4849
<label for="pages">Pages:</label>
4950
<input
5051
type="number"
5152
class="form-control"
5253
id="pages"
5354
name="pages"
55+
min="1"
5456
required
5557
/>
58+
5659
<label class="form-check-label">
57-
<input
58-
type="checkbox"
59-
class="form-check-input"
60-
id="check"
61-
value=""
62-
/>Read
60+
<input type="checkbox" class="form-check-input" id="check" />
61+
Read
6362
</label>
63+
6464
<input
6565
type="submit"
6666
value="Submit"
6767
class="btn btn-primary"
68-
onclick="submit();"
68+
onclick="submit()"
6969
/>
7070
</div>
7171
</div>
@@ -77,18 +77,10 @@ <h1>Library</h1>
7777
<th>Author</th>
7878
<th>Number of Pages</th>
7979
<th>Read</th>
80-
<th></th>
80+
<th>Delete</th>
8181
</tr>
8282
</thead>
83-
<tbody>
84-
<tr>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
</tr>
91-
</tbody>
83+
<tbody id="table-body"></tbody>
9284
</table>
9385

9486
<script src="script.js"></script>

‎debugging/book-library/script.js‎

Lines changed: 74 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,12 @@
1-
let myLibrary = [];
1+
const titleInput = document.getElementById("title");
2+
const authorInput = document.getElementById("author");
3+
const pagesInput = document.getElementById("pages");
4+
const checkInput = document.getElementById("check");
25

3-
window.addEventListener("load", function (e) {
4-
populateStorage();
5-
render();
6-
});
7-
8-
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();
20-
}
21-
}
22-
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-
) {
37-
alert("Please fill all fields!");
38-
return false;
39-
} else {
40-
let book = new Book(title.value, title.value, pages.value, check.checked);
41-
library.push(book);
42-
render();
43-
}
44-
}
6+
const myLibrary = [
7+
new Book("The Hobbit", "J.R.R. Tolkien", 310, true),
8+
new Book("Harry Potter", "J.K. Rowling", 223, false),
9+
];
4510

4611
function Book(title, author, pages, check) {
4712
this.title = title;
@@ -50,54 +15,79 @@ function Book(title, author, pages, check) {
5015
this.check = check;
5116
}
5217

53-
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);
18+
function submit() {
19+
const title = titleInput.value.trim();
20+
const author = authorInput.value.trim();
21+
const pages = pagesInput.value.trim();
22+
const check = checkInput.checked;
23+
24+
if (title === "" || author === "" || pages === "") {
25+
alert("Please fill all fields!");
26+
return;
5927
}
60-
//insert updated row and cells
61-
let length = myLibrary.length;
62-
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);
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);
78-
let readStatus = "";
79-
if (myLibrary[i].check == false) {
80-
readStatus = "Yes";
81-
} else {
82-
readStatus = "No";
83-
}
84-
changeBut.innerText = readStatus;
85-
86-
changeBut.addEventListener("click", function () {
28+
29+
const book = new Book(title, author, Number(pages), check);
30+
myLibrary.push(book);
31+
32+
render();
33+
34+
titleInput.value = "";
35+
authorInput.value = "";
36+
pagesInput.value = "";
37+
checkInput.checked = false;
38+
}
39+
40+
function render() {
41+
const tableBody = document.getElementById("table-body");
42+
43+
tableBody.innerHTML = "";
44+
45+
for (let i = 0; i < myLibrary.length; i++) {
46+
const row = document.createElement("tr");
47+
48+
const titleCell = document.createElement("td");
49+
titleCell.textContent = myLibrary[i].title;
50+
51+
const authorCell = document.createElement("td");
52+
authorCell.textContent = myLibrary[i].author;
53+
54+
const pagesCell = document.createElement("td");
55+
pagesCell.textContent = myLibrary[i].pages;
56+
57+
const readCell = document.createElement("td");
58+
const readButton = document.createElement("button");
59+
readButton.className = "btn btn-success";
60+
readButton.textContent = myLibrary[i].check ? "Yes" : "No";
61+
62+
readButton.addEventListener("click", function () {
8763
myLibrary[i].check = !myLibrary[i].check;
8864
render();
8965
});
9066

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}`);
67+
readCell.appendChild(readButton);
68+
69+
const deleteCell = document.createElement("td");
70+
const deleteButton = document.createElement("button");
71+
deleteButton.className = "btn btn-warning";
72+
deleteButton.textContent = "Delete";
73+
74+
deleteButton.addEventListener("click", function () {
75+
const deletedTitle = myLibrary[i].title;
9976
myLibrary.splice(i, 1);
10077
render();
78+
alert("You've deleted title: " + deletedTitle);
10179
});
80+
81+
deleteCell.appendChild(deleteButton);
82+
83+
row.appendChild(titleCell);
84+
row.appendChild(authorCell);
85+
row.appendChild(pagesCell);
86+
row.appendChild(readCell);
87+
row.appendChild(deleteCell);
88+
89+
tableBody.appendChild(row);
10290
}
10391
}
92+
93+
render();

‎debugging/book-library/style.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
.form-group {
22
width: 400px;
3-
height: 300px;
4-
align-self: left;
53
padding-left: 20px;
64
}
75

@@ -11,7 +9,7 @@
119

1210
.form-check-label {
1311
padding-left: 20px;
14-
margin: 5px 0px 5px 0px;
12+
margin: 5px 0;
1513
}
1614

1715
button.btn-info {

0 commit comments

Comments
 (0)