-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
138 lines (105 loc) · 3.17 KB
/
index.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
const form = document.querySelector("#form-book");
const list = document.querySelector("#list-book");
class Book {
constructor(title, author, isbn) {
this.title = title;
this.author = author;
this.isbn = isbn;
}
}
class UI {
addBookToList(book) {
const list = document.getElementById("list-book");
const row = document.createElement("tr");
row.innerHTML = `
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.isbn}</td>
<td><a href="#" class="delete">X</a></td>
`;
list.appendChild(row);
}
showAlert(message, className) {
const div = document.createElement("div");
div.className = `alert ${className}`;
div.appendChild(document.createTextNode(message));
const container = document.querySelector(".container");
const form = document.querySelector("#form-book");
container.insertBefore(div, form);
setTimeout(() => {
document.querySelector(".alert").remove();
}, 2000);
}
deleteBook(target) {
if (target.className === "delete") {
target.parentElement.parentElement.remove();
}
}
clearFields() {
document.getElementById("title").value = "";
document.getElementById("author").value = "";
document.getElementById("isbn").value = "";
}
}
class Storage {
static getBook() {
let books;
if (localStorage.getItem("books") === null) {
books = [];
} else {
books = JSON.parse(localStorage.getItem("books"));
}
return books;
}
static displayBooks() {
const books = Storage.getBook();
books.forEach(function(book){
const ui = new UI;
ui.addBookToList(book);
});
}
static addBook(book) {
const books = Storage.getBook();
books.push(book);
localStorage.setItem("books", JSON.stringify(books));
}
static removeBook(isbn) {
const books = Storage.getBook();
books.forEach((book, index) => {
if (book.isbn === isbn) {
books.splice(index, 1);
}
});
localStorage.setItem('books', JSON.stringify(books))
}
}
//DOM LOAD EVENT
document.addEventListener("DOMContentLoaded", Storage.displayBooks);
//EVENT LISTENER FOR BOOK TO BE ADDED
form.addEventListener("submit", (e) => {
const title = document.getElementById("title").value;
const author = document.getElementById("author").value;
const isbn = document.getElementById("isbn").value;
//instantiate
const book = new Book(title, author, isbn);
//instantiate UI
const ui = new UI();
//validation
if (title === "" || author === "" || isbn === " ") {
ui.showAlert("Please Enter the required field", "error");
} else {
ui.addBookToList(book);
Storage.addBook(book);
//if book is added
ui.showAlert("Book is added", "success");
ui.clearFields();
}
e.preventDefault();
});
list.addEventListener("click", (e) => {
const ui = new UI();
ui.deleteBook(e.target);
Storage.removeBook(e.target.parentElement.previousElementSibling.textContent);
ui.showAlert("Book Removed", "error");
e.preventDefault();
});