-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
210 lines (193 loc) · 7.66 KB
/
script.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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
//global variable to be used by any function
let resultsContainer = document.querySelector('#results')//grab the location for where the data should be and use later to clear div
//get data from the Google Books API for book title search
async function getBookDataByTitle(text) {
try {
const url = `https://www.googleapis.com/books/v1/volumes?q=intitle:${text}&maxResults=40&key=AIzaSyApQSdy4EmsF3dMV0XrbvCJ6HQAc1yqhlw`;
const response = await axios.get(url)
let data = response.data.items
bookData(data)
return data
} catch (error) {
console.log(error)
alert('Please enter the correct search type.')
}
}
//allows user to search book(s) by author's name
async function getBookDataByAuthor(text) {
try {
const url = `https://www.googleapis.com/books/v1/volumes?q=inauthor:${text}&maxResults=40&key=AIzaSyApQSdy4EmsF3dMV0XrbvCJ6HQAc1yqhlw`;
const response = await axios.get(url)
let data = response.data.items
bookData(data)
return data
} catch (error) {
console.log(error)
alert("Please enter the correct search type."); //if the correct search type was not entered then it will alert the user
}
}
//allows user to search by book's ISBN number
async function getBookDataByISBN(text) {
try {
const url = `https://www.googleapis.com/books/v1/volumes?q=isbn:${text}&maxResults=40&key=AIzaSyApQSdy4EmsF3dMV0XrbvCJ6HQAc1yqhlw`;
const response = await axios.get(url)
let data = response.data.items
bookData(data)
return data
} catch (error) {
console.log(error)
alert("Please enter the correct search type.");
}
}
function bookData(bookInfo) {
//iterate through the the data and grab the data needed
bookInfo.forEach(book => {
//create variables for the data needed
let title = book.volumeInfo.title
let author = ""
if (book.volumeInfo.authors != undefined) {
author = book.volumeInfo.authors
}else author = "N/A"
let date = book.volumeInfo.publishedDate
let publisher = ''
if (book.volumeInfo.publisher != undefined) {
publisher = book.volumeInfo.publisher
} else publisher = 'N/A'
//if there is no image provided create images for book titles
let image = ''
if (book.volumeInfo.imageLinks === undefined ) { //if there is no image use image in the image folder
image = 'images/bkcover.jpg'
} else image = book.volumeInfo.imageLinks.thumbnail
let preview = book.volumeInfo.previewLink
let plot = ""
if (book.volumeInfo.description != undefined) {
plot = book.volumeInfo.description
} else plot = 'N/A'
let pageNum = ''
if (book.volumeInfo.pageCount != undefined) {
pageNum = `${book.volumeInfo.pageCount}`
} else pageNum = `N/A`
let isbn = ''
let isbn13 = ''
if (book.volumeInfo.industryIdentifiers != undefined) {
if (book.volumeInfo.industryIdentifiers[1] == undefined) {
isbn = book.volumeInfo.industryIdentifiers[0].identifier
isbn13 = 'N/A'
}
else if (book.volumeInfo.industryIdentifiers[0].identifier != undefined && book.volumeInfo.industryIdentifiers[1].identifier != undefined) {
isbn = book.volumeInfo.industryIdentifiers[0].identifier
isbn13 = book.volumeInfo.industryIdentifiers[1].identifier
}
}else {
isbn = "N/A";
isbn13 = "N/A";
}
let price = '' //intialize price and check if book can be sold
let currency = ''
let buyLk = ''
if (book.saleInfo.saleability == "FOR_SALE") {
price = book.saleInfo.retailPrice.amount
currency = book.saleInfo.retailPrice.currencyCode
buyLk = book.saleInfo.buyLink
} else {
price = 'N/A'
currencyCode = 'N/A'
}
//formatBookData(bookInformation)
formatBookData(title, author, date, publisher, image, preview, plot, pageNum, isbn,isbn13, price, currency, buyLk)
addModoalListeners()
});
}
//format the data and send data into the DOM(title, author, date, publisher, image, preview, plot, pageN)
function formatBookData(title, author, date, publisher, image, preview, plot, pageN, isbn, isbn13, price, currency,blink) {
let resultsdiv = document.querySelector("#results")
//create new divs for each book
let bookDiv = document.createElement('div')
bookDiv.classList.add('book') //to refer to to style later in CSS
//POST MVP- price, preview link,
//source help from: https://www.w3schools.com/howto/howto_css_modals.asp
let bookData =
`<img src= "${image}"id="bkcover"></img>
<div class="intro">
<h4>${title}</h4>
<h5>Author(s):<br>${author}</h5>
<p>Price: <a href ="${blink}" target="_blank">${price} ${currency}</a></p>
<button class="modalbtn">Click for more...</button> </div>
<div class='bksModal bkContainer'>
<div class='modalContent'>
<span class="close">×</span>
<p><b>Publisher:</b> ${publisher}</p>
<p><b>Published Date:</b> ${date}</p>
<p><b>ISBN:</b> ${isbn}</p>
<p><b>ISBN-13:</b> ${isbn13}</p>
<p><b><b>Pages:</b> ${pageN}</p>
<p><b>Preview Links:</b> <a href="${preview}" target="_blank">Google Preview</a></p>
<p><b>Description:</b> ${plot}</p></div>
</div>`
//send data to DOM
bookDiv.insertAdjacentHTML('beforeend', bookData)
//console.log(resultsdiv) //to check for undefined
resultsdiv.insertAdjacentElement('beforeend', bookDiv)
}
//add modal listeners after modal containers were created so null is not returned
function addModoalListeners() {
//add event listener for Modal
let modalView = document.querySelectorAll('.bksModal')
let closemdl = document.querySelectorAll('.close')
let mdlbtn = document.querySelectorAll('.modalbtn')
//help from src:https://blr.design/blog/multiple-modals/ to make multiple modals work
let modalArray = Array.from(mdlbtn).entries()
for (let [index, btn] of modalArray) {
function show() {
modalView.forEach(modal => modal.style.display = "none") //closes all modals before opening a new one
modalView[index].style.display = "block"
}
function hide() {
modalView[index].style.display = "none"
}
btn.addEventListener("click", show)
closemdl[index].addEventListener("click", hide)
}
}
//add event listener for submit button
let form = document.querySelector('form')
form.addEventListener('submit', (ebtn) => {
ebtn.preventDefault()//to prevent form from refreshing when the search icon is clicked
let searchText = document.querySelector('#search-txt').value
//if statements for each drop down to run appropriate fetch function -POST MVP
let searchType = document.getElementById('type') //post-MVP
//src: https://stackoverflow.com/questions/14976495/get-selected-option-text-with-javascript
removeResults(resultsContainer)
if (searchType.options[searchType.selectedIndex].text == "Author") {
getBookDataByAuthor(searchText)
}
else if (searchType.options[searchType.selectedIndex].text == "ISBN Number") {
getBookDataByISBN(searchText)
}else getBookDataByTitle(searchText)
})
//reset for every new search
function removeResults(element) {
while (element.lastChild) {
element.removeChild(element.lastChild)
}
}
//Grabs anime quote data
async function getAnimeData() {
try {
const url = "https://animechan.vercel.app/api/random"
const response = await axios.get(url)
let data = response.data
animeQuote(data) //pass anime data to function that will send info to DOM
} catch (error) {
console.log(error)
}
}
//sends anime data to DOM
function animeQuote(quotes) {
let anime = quotes.anime
let name = quotes.character
let quote = quotes.quote
let quotep = document.querySelector('#quoteft p')
quotep.textContent = `"${quote}" - ${name}, ${anime}`
}
getAnimeData() //calls the fucntion to grab the quote then display it