Skip to content

Commit 450911b

Browse files
AdnaanAAdnaanA
committed
Refactor HTML structure, improve form handling, and update README for clarity
1 parent c89c066 commit 450911b

4 files changed

Lines changed: 96 additions & 102 deletions

File tree

‎debugging/book-library/index.html‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title> </title>
4+
<meta charset="utf-8" />
55
<meta
6-
charset="utf-8"
76
name="viewport"
87
content="width=device-width, initial-scale=1.0"
98
/>
9+
<title>My Library</title>
10+
11+
<!-- jQuery, Popper, Bootstrap -->
1012
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
1113
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
1214
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
1315
<link
1416
rel="stylesheet"
1517
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
1618
/>
19+
1720
<link rel="stylesheet" type="text/css" href="style.css" />
1821
</head>
1922

@@ -23,71 +26,70 @@ <h1>Library</h1>
2326
<p>Add books to your virtual library</p>
2427
</div>
2528

26-
<button data-toggle="collapse" data-target="#demo" class="btn btn-info">
29+
<button data-toggle="collapse" data-target="#demo" class="btn btn-info mb-3">
2730
Add new book
2831
</button>
2932

3033
<div id="demo" class="collapse">
31-
<div class="form-group">
32-
<label for="title">Title:</label>
34+
<form id="bookForm" class="form-group">
35+
<label for="book-title">Book title:</label>
3336
<input
34-
type="title"
37+
type="text"
3538
class="form-control"
36-
id="title"
37-
name="title"
39+
id="book-title"
40+
name="book-title"
3841
required
3942
/>
40-
<label for="author">Author: </label>
43+
44+
<label for="author" class="mt-2">Author:</label>
4145
<input
42-
type="author"
46+
type="text"
4347
class="form-control"
4448
id="author"
4549
name="author"
4650
required
4751
/>
48-
<label for="pages">Pages:</label>
52+
53+
<label for="pages" class="mt-2">Pages:</label>
4954
<input
5055
type="number"
5156
class="form-control"
5257
id="pages"
5358
name="pages"
5459
required
5560
/>
56-
<label class="form-check-label">
61+
62+
<div class="form-check mt-2">
5763
<input
5864
type="checkbox"
5965
class="form-check-input"
6066
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>
67+
/>
68+
<label class="form-check-label" for="check">Read</label>
69+
</div>
70+
71+
<button
72+
type="button"
73+
class="btn btn-primary mt-3"
74+
onclick="addBook()"
75+
>
76+
Submit
77+
</button>
78+
</form>
7179
</div>
7280

73-
<table class="table" id="display">
81+
<table class="table mt-4" id="display">
7482
<thead class="thead-dark">
7583
<tr>
7684
<th>Title</th>
7785
<th>Author</th>
78-
<th>Number of Pages</th>
86+
<th>Pages</th>
7987
<th>Read</th>
8088
<th></th>
8189
</tr>
8290
</thead>
8391
<tbody>
84-
<tr>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
</tr>
92+
<!-- rows inserted by JS -->
9193
</tbody>
9294
</table>
9395

‎debugging/book-library/readme.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ My website should be able to:
1212

1313
## Bugs to be fixed
1414

15-
1. Website loads but doesn't show any books
16-
2. Error in console when you try to add a book
17-
3. It uses the title name as the author name
18-
4. Delete button is broken
19-
5. When I add a book that I say I've read - it saves the wrong answer
15+
1. Website loads but doesn't show any books. Done
16+
2. Error in console when you try to add a book. Done
17+
3. It uses the title name as the author name. Done
18+
4. Delete button is broken. Done
19+
5. When I add a book that I say I've read - it saves the wrong answer. Done
2020

21-
I think there are other some other small bugs in my code...but I'm lazy so I can't fix them all.
21+
I think there are some other small bugs in my code...but I'm lazy so I can't fix them all.
2222

2323
I wish somebody would help me!

‎debugging/book-library/script.js‎

Lines changed: 50 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,89 @@
11
let myLibrary = [];
22

3-
window.addEventListener("load", function (e) {
3+
window.addEventListener("load", function () {
44
populateStorage();
55
render();
66
});
77

88
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();
9+
if (myLibrary.length === 0) {
10+
myLibrary.push(new Book("Robinson Crusoe", "Daniel Defoe", 252, true));
11+
myLibrary.push(new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true));
2012
}
2113
}
2214

23-
const title = document.getElementById("title");
15+
const bookTitle = document.getElementById("book-title");
2416
const author = document.getElementById("author");
2517
const pages = document.getElementById("pages");
2618
const check = document.getElementById("check");
2719

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() {
20+
// renamed so we don’t conflict with form.submit()
21+
function addBook() {
3122
if (
32-
title.value == null ||
33-
title.value == "" ||
34-
pages.value == null ||
35-
pages.value == ""
23+
!bookTitle.value.trim() ||
24+
!author.value.trim() ||
25+
!pages.value.trim()
3626
) {
3727
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();
28+
return;
4329
}
30+
31+
const book = new Book(
32+
bookTitle.value.trim(),
33+
author.value.trim(),
34+
pages.value.trim(),
35+
check.checked
36+
);
37+
38+
myLibrary.push(book);
39+
render();
4440
}
4541

46-
function Book(title, author, pages, check) {
47-
this.title = title;
42+
function Book(bookTitle, author, pages, check) {
43+
this.bookTitle = bookTitle;
4844
this.author = author;
4945
this.pages = pages;
5046
this.check = check;
5147
}
5248

5349
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);
50+
const table = document.getElementById("display");
51+
52+
// remove all rows except the header
53+
while (table.rows.length > 1) {
54+
table.deleteRow(1);
5955
}
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;
7256

73-
//add and wait for action for read/unread button
74-
let changeBut = document.createElement("button");
75-
changeBut.id = i;
57+
myLibrary.forEach((book, i) => {
58+
const row = table.insertRow(1);
59+
60+
row.insertCell(0).textContent = book.bookTitle;
61+
row.insertCell(1).textContent = book.author;
62+
row.insertCell(2).textContent = book.pages;
63+
64+
// read/unread toggle
65+
const wasReadCell = row.insertCell(3);
66+
const changeBut = document.createElement("button");
7667
changeBut.className = "btn btn-success";
68+
changeBut.textContent = book.check ? "Yes" : "No";
7769
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;
8570

86-
changeBut.addEventListener("click", function () {
87-
myLibrary[i].check = !myLibrary[i].check;
71+
changeBut.addEventListener("click", () => {
72+
book.check = !book.check;
8873
render();
8974
});
9075

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);
76+
// delete button
77+
const deleteCell = row.insertCell(4);
78+
const delBut = document.createElement("button");
9579
delBut.className = "btn btn-warning";
96-
delBut.innerHTML = "Delete";
97-
delBut.addEventListener("clicks", function () {
98-
alert(`You've deleted title: ${myLibrary[i].title}`);
80+
delBut.textContent = "Delete";
81+
deleteCell.appendChild(delBut);
82+
83+
delBut.addEventListener("click", () => {
84+
alert(`You've deleted: ${book.bookTitle}`);
9985
myLibrary.splice(i, 1);
10086
render();
10187
});
102-
}
88+
});
10389
}

‎debugging/book-library/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,9 @@
1717
button.btn-info {
1818
margin: 20px;
1919
}
20+
21+
@media (min-width: 576px) {
22+
.jumbotron {
23+
padding: 2rem 32px 2rem;
24+
}
25+
}

0 commit comments

Comments
 (0)