-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
76 lines (60 loc) · 2.26 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
import { DateTime } from './modules/luxon.js';
import Book from './modules/book.js';
import UI from './modules/ui.js';
import Store from './modules/store.js';
// define the current local time
const currentDate = DateTime.now().toLocaleString(DateTime.DATETIME_MED);
document.getElementById('current-date').innerHTML = currentDate;
// Event: Display Books
document.addEventListener('DOMContentLoaded', UI.displayBooks);
// Event: Add a Book
document.querySelector('#book-form').addEventListener('submit', (e) => {
// Prevent actual submit
e.preventDefault();
// Get form values
const title = document.querySelector('#title').value;
const author = document.querySelector('#author').value;
// Instatiate book
const book = new Book(title, author);
// Add Book to UI
UI.addBookToList(book);
// Add book to store
Store.addBook(book);
// Clear fields
UI.clearFields();
});
// Event: Remove a Book
document.querySelector('#book-list').addEventListener('click', (e) => {
// Remove book from UI
UI.deleteBook(e.target);
// Remove book from store
Store.removeBook(e.target.previousElementSibling.previousElementSibling.textContent);
});
// display the books list when click the button "List"
const bookList = document.querySelector('.book-list-container');
const listBtn = document.querySelector('.listBtn');
const formContainer = document.querySelector('.form-container');
const contactInfo = document.querySelector('.contact-info');
listBtn.addEventListener('click', () => {
bookList.style.display = 'block';
formContainer.style.display = 'none';
});
window.addEventListener('load', () => {
bookList.style.display = 'block';
formContainer.style.display = 'none';
contactInfo.style.display = 'none';
});
// display the Add book form when click the button "Add new"
const addNewBtn = document.querySelector('.add-new-btn');
addNewBtn.addEventListener('click', () => {
bookList.style.display = 'none';
formContainer.style.display = 'block';
contactInfo.style.display = 'none';
});
// display the Contact section when click the button "Contact"
const contactBtn = document.querySelector('.contact');
contactBtn.addEventListener('click', () => {
bookList.style.display = 'none';
formContainer.style.display = 'none';
contactInfo.style.display = 'block';
});