-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
164 lines (136 loc) · 5.12 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
const btnAdd = document.querySelector('#btn-add');
const btnReset = document.querySelector('#btn-reset');
const bookForm = document.querySelector('.book-form');
const inputTitle = document.querySelector('#input-title');
const inputAuthor = document.querySelector('#input-author');
const inputPages = document.querySelector('#input-pages');
const inputRead = document.querySelector('#input-read');
const btnSubmit = document.querySelector('#btn-submit');
const booksGrid = document.querySelector('.books-grid');
const overlay = document.querySelector('.overlay');
const booksTotal = document.querySelector('#books-total');
const booksRead = document.querySelector('#books-read');
const booksUnread = document.querySelector('#books-unread');
let myLibrary = [];
class Book {
constructor(title, author, pages, read) {
this.title = title;
this.author = author;
this.pages = pages;
this.read = read;
}
toggleRead() {
this.read = this.read ? false : true;
}
}
function addBookToLibrary(title, author, pages, read) {
myLibrary.push(new Book(title, author, pages, read));
updateBookshelf();
}
const deleteBook = (e) => {
const index = e.target.parentNode.dataset.libraryIndex;
myLibrary.splice(index, 1);
updateBookshelf();
}
function updateBookshelf() {
booksGrid.replaceChildren();
// add book cards to the books grid
for (const book of myLibrary) {
// current book's index in myLibrary
const index = document.querySelectorAll('.book-card').length;
const bookCard = document.createElement('article');
bookCard.classList.add('book-card');
const bookTitle = document.createElement('p');
bookTitle.classList.add('book-title');
bookTitle.textContent = book.title;
const bookAuthor = document.createElement('p');
bookAuthor.classList.add('book-author');
bookAuthor.textContent = book.author;
const bookPages = document.createElement('p');
bookPages.classList.add('book-pages');
bookPages.textContent = `${book.pages} pages`;
const bookButtons = document.createElement('div');
bookButtons.classList.add('book-buttons');
bookButtons.dataset.libraryIndex = index;
const btnRead = document.createElement('button');
btnRead.classList.add('btn', 'btn-read');
btnRead.classList.add(book.read ? 'btn-green' : 'btn-red');
btnRead.textContent = (book.read ? "Read" : "Not read");
btnRead.addEventListener('click', toggleReadHandler);
bookButtons.appendChild(btnRead);
const btnDelete = document.createElement('button');
btnDelete.classList.add('btn', 'btn-delete');
btnDelete.textContent = "Delete";
btnDelete.addEventListener('click', deleteBook);
bookButtons.appendChild(btnDelete);
bookCard.appendChild(bookTitle);
bookCard.appendChild(bookAuthor);
bookCard.appendChild(bookPages);
bookCard.appendChild(bookButtons);
booksGrid.appendChild(bookCard);
}
// display info message when no books are present
if (!myLibrary.length) {
booksGrid.textContent = 'Add your first book.';
}
updateStats();
}
const updateStats = () => {
let totalCount = myLibrary.length;
let readCount = myLibrary.filter(book => book.read).length;
let unreadCount = totalCount - readCount;
booksTotal.textContent = `Total books: ${totalCount}`;
booksRead.textContent = `Books read: ${readCount}`;
booksUnread.textContent = `Books unread: ${unreadCount}`;
}
const submitBook = () => {
const title = inputTitle.value;
const author = inputAuthor.value;
const pages = inputPages.value;
const read = inputRead.checked;
// require all input fields to be filled
if (!(title && author && pages)) {
alert('Fill out the form.');
return;
}
// require book length to be positive
if (pages < 1) {
alert('Book can not be shorter than 1 page.');
return;
}
addBookToLibrary(title, author, pages, read);
toggleForm();
}
// call toggleRead() method with the right Book object
const toggleReadHandler = (e) => {
const index = e.target.parentNode.dataset.libraryIndex;
myLibrary[index].toggleRead();
updateBookshelf();
}
const toggleForm = () => {
bookForm.classList.toggle('active');
overlay.classList.toggle('active');
resetForm();
}
const resetForm = () => {
inputTitle.value = '';
inputAuthor.value = '';
inputPages.value = '';
inputRead.checked = false;
}
const clearLibrary = () => {
// ask user for confirmation
if (confirm('Delete all books?')) {
myLibrary = [];
updateBookshelf();
}
}
btnAdd.addEventListener('click', toggleForm);
btnReset.addEventListener('click', clearLibrary);
btnSubmit.addEventListener('click', submitBook)
overlay.addEventListener('click', toggleForm);
// add sample books
myLibrary.push(new Book('Rich Dad, Poor Dad', 'Robert T. Kiyosaki', 195, false));
myLibrary.push(new Book('Be Here Now', 'Ram Dass', 116, true));
myLibrary.push(new Book('PIHKAL', 'Alexander Shulgin', 978, false));
updateBookshelf();