-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
130 lines (112 loc) · 3.83 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
class Book {
constructor(title, author, isbn) {
this.title = title;
this.author = author;
this.isbn = isbn;
}
}
class UIMethods {
addBook(book) {
const row = document.createElement("tr");
row.innerHTML = `
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.isbn}</td>
<td><a href="#" id='delete'><i class="delete material-icons">delete_forever</i></a></td>
`;
document.querySelector("#book-list").appendChild(row);
}
showAlert(message, className) {
const div = document.createElement("div");
div.className = `center-align white-text ${className}`;
div.appendChild(document.createTextNode(message));
document.querySelector("#alert").appendChild(div);
setTimeout(() => document.querySelector("#alert").removeChild(div), 2500);
}
clearInput() {
document.querySelector("#title").value = "";
document.querySelector("#author").value = "";
document.querySelector("#isbn").value = "";
}
deleteBook(target) {
if (target.classList.contains("delete")) {
target.parentElement.parentElement.parentElement.remove();
}
}
clearFields() {
const bookList = document.getElementById("book-list");
while (bookList.firstChild) {
bookList.removeChild(bookList.firstChild);
}
}
}
class Store {
static getBooks() {
let books;
if (localStorage.getItem("books") === null) {
books = [];
} else {
books = JSON.parse(localStorage.getItem("books"));
}
return books;
}
static showBooksFromTheLocalStorage() {
const books = Store.getBooks();
books.forEach(function (book) {
const uiMetod = new UIMethods();
uiMetod.addBook(book);
});
}
static addBookToTheLocalStorage(book) {
const books = Store.getBooks();
books.push(book);
localStorage.setItem("books", JSON.stringify(books));
}
static removeFromTheLocalStorage(isbn) {
const books = Store.getBooks();
books.forEach(function (book, index) {
if (book.isbn === isbn) {
books.splice(index, 1);
}
});
localStorage.setItem("books", JSON.stringify(books));
}
}
const negative = "col s12 m10 l6 offset-m1 offset-l3 red lighten-2",
positive = "col s12 m10 l6 offset-m1 offset-l3 teal lighten-1";
document.getElementById("input-form").addEventListener("submit", function (e) {
const title = document.querySelector("#title").value,
author = document.querySelector("#author").value,
isbn = document.querySelector("#isbn").value;
const book = new Book(title, author, isbn);
const uiMethod = new UIMethods();
if (title === "" || author === "" || isbn === "") {
uiMethod.showAlert("Please fill in all the fields", negative);
} else {
uiMethod.addBook(book);
uiMethod.showAlert("Book successfully added!", positive);
Store.addBookToTheLocalStorage(book);
uiMethod.clearInput();
}
e.preventDefault();
});
document.getElementById("book-list").addEventListener("click", function (e) {
const uiMethod = new UIMethods();
if (e.target.classList.contains("delete")) {
uiMethod.deleteBook(e.target);
uiMethod.showAlert("Book deleted!", positive);
Store.removeFromTheLocalStorage(e.target.parentElement.parentElement.previousElementSibling.textContent);
}
e.preventDefault();
});
document.getElementById("clear-btn").addEventListener("click", function () {
const uiMethod = new UIMethods();
if (document.getElementById("book-list").hasChildNodes()) {
uiMethod.clearFields();
uiMethod.showAlert("Book list is cleared!", positive);
localStorage.clear();
} else {
uiMethod.showAlert("Book list is empty, please add books to the list", negative);
}
});
document.addEventListener("DOMContentLoaded", Store.showBooksFromTheLocalStorage);