Skip to content

Commit 559a7a2

Browse files
miriamjornamiriamjorna
committed
Book Library task done
1 parent 3a422e9 commit 559a7a2

2 files changed

Lines changed: 88 additions & 88 deletions

File tree

‎debugging/book-library/index.html‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
<!DOCTYPE html>
22
<html>
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>My 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"
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" />
12+
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
13+
<link rel="stylesheet" type="text/css" href="style.css">
1814
</head>
1915

2016
<body>
@@ -31,45 +27,47 @@ <h1>Library</h1>
3127
<div class="form-group">
3228
<label for="title">Title:</label>
3329
<input
34-
type="title"
30+
type="text"
3531
class="form-control"
3632
id="title"
3733
name="title"
3834
required
39-
/>
40-
<label for="author">Author: </label>
35+
>
36+
<label for="author">Author:</label>
4137
<input
42-
type="author"
38+
type="text"
4339
class="form-control"
4440
id="author"
4541
name="author"
4642
required
47-
/>
43+
>
4844
<label for="pages">Pages:</label>
4945
<input
5046
type="number"
5147
class="form-control"
5248
id="pages"
5349
name="pages"
5450
required
55-
/>
51+
>
5652
<label class="form-check-label">
5753
<input
5854
type="checkbox"
5955
class="form-check-input"
6056
id="check"
6157
value=""
62-
/>Read
58+
>Read
6359
</label>
6460
<input
6561
type="submit"
6662
value="Submit"
6763
class="btn btn-primary"
68-
onclick="submit();"
69-
/>
64+
id="submit-button;"
65+
>
7066
</div>
7167
</div>
7268

69+
<div id="message-container"></div>
70+
7371
<table class="table" id="display">
7472
<thead class="thead-dark">
7573
<tr>
@@ -81,16 +79,9 @@ <h1>Library</h1>
8179
</tr>
8280
</thead>
8381
<tbody>
84-
<tr>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
</tr>
9182
</tbody>
9283
</table>
9384

94-
<script src="script.js"></script>
85+
<script src="script.js" type="module"></script>
9586
</body>
9687
</html>

‎debugging/book-library/script.js‎

Lines changed: 71 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1-
let myLibrary = [];
1+
const myLibrary = [];
22

3-
window.addEventListener("load", function (e) {
4-
populateStorage();
5-
render();
3+
const titleInput = document.getElementById("title");
4+
const authorInput = document.getElementById("author");
5+
const pagesInput = document.getElementById("pages");
6+
const readCheckbox = document.getElementById("check");
7+
const submitButton = document.getElementById("submit-button");
8+
9+
window.addEventListener("load", function () {
10+
populateStorage();
611
});
12+
submitButton.addEventListener("click", addBook);
713

814
function populateStorage() {
9-
if (myLibrary.length == 0) {
10-
let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
11-
let book2 = new Book(
15+
if (myLibrary.length === 0) {
16+
const book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
17+
const book2 = new Book(
1218
"The Old Man and the Sea",
1319
"Ernest Hemingway",
14-
"127",
20+
127,
1521
true
1622
);
1723
myLibrary.push(book1);
@@ -20,84 +26,87 @@ function populateStorage() {
2026
}
2127
}
2228

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-
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 == ""
36-
) {
33+
function addBook() {
34+
const title = titleInput.value.trim();
35+
const author = authorInput.value.trim();
36+
const pages = Number(pagesInput.value);
37+
38+
if (title === "" || author === "" || !Number.isInteger(pages) || pages < 1) {
3739
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-
}
40+
return;
41+
}
42+
const book = new Book(title, author, pages, readCheckbox.checked);
43+
myLibrary.push(book);
44+
titleInput.value = "";
45+
authorInput.value = "";
46+
pagesInput.value = "";
47+
readCheckbox.checked = false;
48+
render();
4449
}
4550

46-
function Book(title, author, pages, check) {
51+
function Book(title, author, pages, isRead) {
4752
this.title = title;
4853
this.author = author;
4954
this.pages = pages;
50-
this.check = check;
55+
this.isRead = isRead;
5156
}
5257

5358
function render() {
54-
let table = document.getElementById("display");
55-
let rowsNumber = table.rows.length;
59+
const table = document.getElementById("display");
60+
const tbody = table.tBodies[0] || table.createTBody();
5661
//delete old table
57-
for (let n = rowsNumber - 1; n > 0; n-- {
58-
table.deleteRow(n);
59-
}
62+
tbody.replaceChildren();
6063
//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;
64+
for (let i = 0; i < myLibrary.length; i++) {
65+
const row = tbody.insertRow();
66+
const titleCell = row.insertCell(0);
67+
const authorCell = row.insertCell(1);
68+
const pagesCell = row.insertCell(2);
69+
const wasReadCell = row.insertCell(3);
70+
const deleteCell = row.insertCell(4);
71+
72+
titleCell.textContent = myLibrary[i].title;
73+
authorCell.textContent = myLibrary[i].author;
74+
pagesCell.textContent = myLibrary[i].pages;
7275

7376
//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;
77+
const changeButton = document.createElement("button");
78+
changeButton.className = "btn btn-success";
79+
changeButton.textContent = myLibrary[i].isRead ? "Yes" : "No";
80+
wasReadCell.appendChild(changeButton);
8581

86-
changeBut.addEventListener("click", function () {
87-
myLibrary[i].check = !myLibrary[i].check;
82+
changeButton.addEventListener("click", function () {
83+
myLibrary[i].isRead = !myLibrary[i].isRead;
8884
render();
8985
});
9086

9187
//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}`);
88+
const delButton = document.createElement("button");
89+
deleteCell.appendChild(delButton);
90+
delButton.className = "btn btn-warning";
91+
delButton.textContent = "Delete";
92+
delButton.addEventListener("click", function () {
93+
const deletedBook = myLibrary[i].title;
9994
myLibrary.splice(i, 1);
10095
render();
96+
showMessage(`You've deleted title: ${deletedBook}`);
10197
});
10298
}
99+
function showMessage(message) {
100+
const container = document.getElementById("message-container");
101+
container.innerHTML = "";
102+
const alert = document.createElement("div");
103+
alert.className = "alert alert-warning alert-dismissible fade show";
104+
alert.role = "alert";
105+
106+
alert.innerHTML = `${message} <button type="button" class="close" data-dismiss="alert" aria-label="Close">
107+
<span aria-hidden="true">&times;</span>
108+
</button>`;
109+
110+
container.appendChild(alert);
111+
}
103112
}

0 commit comments

Comments
 (0)