Skip to content

Commit 4a0a268

Browse files
shreefAhmedMshreefAhmedM
committed
book laibrary has been completed
1 parent c89c066 commit 4a0a268

File tree

3 files changed

+141
-112
lines changed

3 files changed

+141
-112
lines changed

‎debugging/book-library/index.html‎

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,9 @@ <h1>Library</h1>
3030
<div id="demo" class="collapse">
3131
<div class="form-group">
3232
<label for="title">Title:</label>
33-
<input
34-
type="title"
35-
class="form-control"
36-
id="title"
37-
name="title"
38-
required
39-
/>
33+
<input type="text" class="form-control" id="title" name="title" required />
4034
<label for="author">Author: </label>
41-
<input
42-
type="author"
43-
class="form-control"
44-
id="author"
45-
name="author"
46-
required
47-
/>
35+
<input type="text" class="form-control" id="author" name="author" required />
4836
<label for="pages">Pages:</label>
4937
<input
5038
type="number"
@@ -61,12 +49,7 @@ <h1>Library</h1>
6149
value=""
6250
/>Read
6351
</label>
64-
<input
65-
type="submit"
66-
value="Submit"
67-
class="btn btn-primary"
68-
onclick="submit();"
69-
/>
52+
<input type="button" value="Submit" class="btn btn-primary" onclick="addBook();" />
7053
</div>
7154
</div>
7255

@@ -80,15 +63,9 @@ <h1>Library</h1>
8063
<th></th>
8164
</tr>
8265
</thead>
83-
<tbody>
84-
<tr>
85-
<td></td>
86-
<td></td>
87-
<td></td>
88-
<td></td>
89-
<td></td>
90-
</tr>
91-
</tbody>
66+
<tbody>
67+
</tbody>
68+
9269
</table>
9370

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

‎debugging/book-library/script.js‎

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

3-
window.addEventListener("load", function (e) {
4-
populateStorage();
5-
render();
3+
window.addEventListener("load", function () {
4+
populateStorage();
5+
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();
20-
}
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+
}
2121
}
2222

2323
const title = document.getElementById("title");
2424
const author = document.getElementById("author");
2525
const pages = document.getElementById("pages");
2626
const check = document.getElementById("check");
2727

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);
28+
// Check the input from forms and, if valid, add the new book (object in array)
29+
// via Book constructor and start render function
30+
function addBook() {
31+
if (
32+
title.value == null ||
33+
title.value === "" ||
34+
pages.value == null ||
35+
pages.value === ""
36+
) {
37+
showError("Please fill all fields!");
38+
return false;
39+
}
40+
41+
if (myLibrary.some(b => b.title === title.value && b.author === author.value)) {
42+
showError("This book already exists!");
43+
return;
44+
}
45+
46+
if (!isNaN(title.value.trim()) || !isNaN(author.value.trim())) {
47+
showError("Title and Author must be text!");
48+
return;
49+
}
50+
51+
let book = new Book(title.value, author.value, Number(pages.value), check.checked);
52+
myLibrary.push(book);
4253
render();
43-
}
4454
}
4555

46-
function Book(title, author, pages, check) {
47-
this.title = title;
48-
this.author = author;
49-
this.pages = pages;
50-
this.check = check;
56+
// Clear any previous error messages
57+
document.getElementById("errorMessage").style.display = "none";
58+
59+
function Book(title, author, pages, read) {
60+
this.title = title;
61+
this.author = author;
62+
this.pages = pages;
63+
this.read = read;
5164
}
5265

66+
5367
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);
59-
}
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";
68+
let table = document.getElementById("display");
69+
let rowsNumber = table.rows.length;
70+
71+
// Delete old table rows
72+
for (let n = rowsNumber - 1; n > 0; n--) {
73+
table.deleteRow(n);
74+
}
75+
76+
// Insert updated rows and cells
77+
let length = myLibrary.length;
78+
for (let i = 0; i < length; i++) {
79+
let row = table.insertRow(1);
80+
let titleCell = row.insertCell(0);
81+
let authorCell = row.insertCell(1);
82+
let pagesCell = row.insertCell(2);
83+
let wasReadCell = row.insertCell(3);
84+
let deleteCell = row.insertCell(4);
85+
86+
titleCell.innerHTML = myLibrary[i].title;
87+
authorCell.innerHTML = myLibrary[i].author;
88+
pagesCell.innerHTML = myLibrary[i].pages;
89+
90+
// Add and configure read/unread button
91+
let changeBut = document.createElement("button");
92+
changeBut.id = i;
93+
changeBut.className = "btn btn-primary";
94+
wasReadCell.appendChild(changeBut);
95+
96+
let readStatus = myLibrary[i].check ? "Yes" : "No";
97+
changeBut.innerHTML = readStatus;
98+
99+
if (myLibrary[i].check) {
100+
changeBut.className = "btn btn-success";
101+
}
102+
103+
changeBut.addEventListener("click", function () {
104+
myLibrary[i].check = !myLibrary[i].check;
105+
render();
106+
});
107+
108+
// Add delete button to each row
109+
let delBut = document.createElement("button");
110+
delBut.id = i + 5;
111+
delBut.className = "btn btn-warning";
112+
delBut.innerHTML = "Delete";
113+
deleteCell.appendChild(delBut);
114+
115+
delBut.setAttribute("data-index", i);
116+
delBut.addEventListener("click", function () {
117+
let index = this.getAttribute("data-index");
118+
showError(`You've deleted title: ${myLibrary[index].title}`);
119+
myLibrary.splice(index, 1);
120+
render();
121+
});
83122
}
84-
changeBut.innerText = readStatus;
85-
86-
changeBut.addEventListener("click", function () {
87-
myLibrary[i].check = !myLibrary[i].check;
88-
render();
89-
});
90-
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}`);
99-
myLibrary.splice(i, 1);
100-
render();
101-
});
102-
}
103123
}
124+
125+
// Handle error messages
126+
function showError(message) {
127+
let errorMessCont = document.getElementById("errorMessage");
128+
errorMessCont.textContent = message;
129+
errorMessCont.classList.add("show");
130+
131+
setTimeout(() => {
132+
errorMessCont.classList.remove("show");
133+
}, 3000);
134+
}

‎debugging/book-library/style.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,24 @@
1717
button.btn-info {
1818
margin: 20px;
1919
}
20+
#errorMessage {
21+
margin-right: 0;
22+
color: white;
23+
background-color: hsla(0, 88%, 42%, 0.7);
24+
padding: 20px;
25+
border-radius: 5px;
26+
width: 30%;
27+
text-align: center;
28+
font-weight: bold;
29+
display:none ;
30+
position: absolute;
31+
z-index: 1000;
32+
top: 20px;
33+
right: 20px
34+
}
35+
36+
#errorMessage.show {
37+
display: block;
38+
opacity: 1;
39+
transform: translateX(0)
40+
}

0 commit comments

Comments
 (0)