-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathappes6.js
141 lines (131 loc) · 3.81 KB
/
appes6.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
class Book {
constructor(title, author, isbn) {
this.title = title;
this.author = author;
this.isbn = isbn;
}
}
class UI {
constructor() {}
addBookToList(book) {
const list = document.getElementById('book-list');
// Create A Table Row Element
const row = document.createElement('tr');
// Insert Columns To Table Row
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) {
// Create Div Element
const div = document.createElement('div');
// Add Classes
div.className = `alert ${className}`;
// Add Text Node
div.appendChild(document.createTextNode(message));
// Get Parent
const container = document.querySelector('.container');
// Get Form
const form = document.querySelector('#book-form');
// Insert Alert
container.insertBefore(div, form);
// Clear Alert After 3 Seconds (Timeout)
setTimeout(() => {
document.querySelector('.alert').remove();
}, 3000);
}
deleteBook(target) {
if (target.className === 'delete') {
target.parentElement.parentElement.remove();
}
}
clearFields(form) {
document.getElementById('title').value = '';
document.getElementById('author').value = '';
document.getElementById('isbn').value = '';
}
}
// Local Storage Class
class Store {
constructor() {}
static addBook(book) {
const books = Store.getBooks();
books.push(book);
localStorage.setItem('books', JSON.stringify(books));
}
static getBooks() {
let books;
if (localStorage.getItem('books') === null) {
books = [];
}
else {
books = JSON.parse(localStorage.getItem('books'));
}
return books;
}
static displayBooks() {
const books = Store.getBooks();
// Loop Through Book Items In Array
books.forEach(book => {
new UI().addBookToList(book);
});
}
static removeBook(isbn) {
const books = Store.getBooks();
books.forEach((book, index) => {
if (book.isbn === isbn) {
books.splice(index, 1);
}
});
localStorage.setItem('books', JSON.stringify(books));
}
}
// Event Listener For Loading Books To DOM
document.addEventListener('DOMContentLoaded', Store.displayBooks);
// Event Listener For Adding Book
document.getElementById('book-form').addEventListener('submit', (event) => {
console.log('Test');
// Declaring Scope Variables
const title = document.getElementById('title').value;
const author = document.getElementById('author').value;
const isbn = document.getElementById('isbn').value;
// Instantiating Book
const book = new Book(title, author, isbn);
// Instantiating User Interface
const ui = new UI();
// Validate User Interface
if(title === '' || author === '' || isbn === '') {
// Error Alert
ui.showAlert('Please Fill In All Fields', 'error');
}
else {
// Adding UI Instance To Book List
ui.addBookToList(book);
// Add To Local Storage
Store.addBook(book);
// Show Alert
ui.showAlert('Book Added Successfully', 'success')
// Clear Input Fields
ui.clearFields();
}
event.preventDefault();
});
// Event Listener For Delete
document.getElementById('book-list').addEventListener('click', (event) => {
if (event.target) {
// Instantiate The User Interface
const ui = new UI();
// Delete Book Function
ui.deleteBook(event.target);
// Remove From Local Storage
Store.removeBook(event.target.parentElement.previousElementSibling.textContent);
// Show An Alert
ui.showAlert('Book Removed!', 'success');
}
event.preventDefault();
});