-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathScript.js
More file actions
108 lines (85 loc) · 2.85 KB
/
Copy pathScript.js
File metadata and controls
108 lines (85 loc) · 2.85 KB
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
let formInput = document.querySelectorAll('.form-input') // getting the form input
let formBookSubmit = document.getElementById('new-book-form') // getting the DOM
let cardContainer = document.querySelector('.card-container') // getting the card container
let totalBooks = document.querySelector('.total-books') // getting total books DOM
// array for saving book data
let myLibrary = []
function Book(title, author, pages, hasBeenRead) {
this.bookId = myLibrary.length
this.title = title
this.author = author
this.pages = pages
this.hasBeenRead = hasBeenRead
}
Book.prototype.saveBook = function() {
// arrange the object to push
let bookToSave = {
bookId: this.bookId,
title: this.title,
author: this.author,
pages: this.pages,
hasBeenRead: this.hasBeenRead
}
myLibrary.unshift(bookToSave)
render() // rendering list of book
}
function addBookToLibrary(e) {
e.preventDefault() // preventing browser to reload
let bookTitle = e.target[0].value // getting book title
let bookAuthor = e.target[1].value // getting book author
let bookPages = e.target[2].value // getting book pages
let hasBeenRead = e.target[3].value // getting has been read
let insertBook = new Book(bookTitle, bookAuthor, bookPages, hasBeenRead)
insertBook.saveBook()
// close the modal after insert the book
modal.style.display = "none"
// clear the form after submit
formInput.forEach(function(item, index){
item.value = ''
})
let deleteButton = document.querySelectorAll('.delete-button') // getting the delete button
deleteButton.forEach(key => key.addEventListener('click', deleteFunc))
}
// render array to HTML
function render() {
// remove card before adding new one
cardContainer.innerHTML = ''
myLibrary.forEach(function(currentValue, index) {
cardContainer.innerHTML += cardElement(currentValue)
})
// rendering total books
renderBooks()
}
// rendering total of the book
function renderBooks(){
totalBooks.innerHTML = myLibrary.length
}
// card element
function cardElement(data) {
return `
<div class="card">
<div class="card-top">
<div class="content">
<div class="left-side">
<p>${data.hasBeenRead}</p>
</div> <!-- left-side -->
<div class="right-side">
<p class="title"><b>${data.title}</b></p>
<p>${data.author} - ${data.pages} pages</p>
</div> <!-- right-side -->
</div>
</div> <!-- card-top -->
<div class="card-bottom">
<button class="read-button"><b>read</b></button>
<button class="delete-button" data-book="${data.bookId}${data.pages}">delete</button>
</div> <!-- card-bottom -->
</div> <!-- card -->
`
}
// function for deleting the book data
function deleteFunc(e){
console.log(e.target.dataset.book)
}
render()
// form submit eventListener
formBookSubmit.addEventListener('submit', addBookToLibrary)