Skip to content

Commit 5d59ec0

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1661 from Ashutoshbind15/feat/spinner
add loading-state to book-buddy, replacing the alert block
2 parents 1b09622 + 5d92774 commit 5d59ec0

2 files changed

Lines changed: 222 additions & 211 deletions

File tree

‎Projects/Book Buddy/script.js‎

Lines changed: 81 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,89 @@
11
//This is the main function which will create a div for each book and display all the details in the proper format
2-
function search_book()
3-
{
4-
var search = document.getElementById("searchbar").value.toLowerCase();
5-
var container = document.getElementById("content");
6-
container.innerHTML="";
7-
fetch("https://openlibrary.org/search.json?q="+search)
8-
.then(alert("It might take a few seconds to load the data. \nPlease wait..."))
9-
.then(a=>a.json())
10-
.then(response=>{
11-
for(var i=0;i<response.docs.length;i++)
12-
{
13-
container.innerHTML=container.innerHTML+
14-
'<div class="book">'+
15-
'<div class="title">'+
16-
response.docs[i].title+
17-
'</div>'+
18-
'<div class="info">'+
19-
'<img src="http://covers.openlibrary.org/b/isbn/'+response.docs[i].isbn[0]+'-M.jpg"><br>'+
20-
'<div>'+
21-
'<span style="font-weight:500; color:rgb(122, 72, 15)">'+
22-
'Author: '+
23-
'</span>'+
24-
response.docs[i].author_name[0] +'<br>'+
25-
/*'<span style="font-weight:500; color:rgb(122, 72, 15)">'+
26-
'Subject: '+
27-
'</span>'+
28-
response.docs[i].subject[0] +'<br>'+*/
29-
'<span style="font-weight:500; color:rgb(122, 72, 15)">'+
30-
'No. of pages: '+
31-
'</span>'+
32-
response.docs[i].number_of_pages_median +'<br>'+
33-
'<span style="font-weight:500; color:rgb(122, 72, 15)">'+
34-
'First publish year: '+
35-
'</span>'+
36-
response.docs[i].first_publish_year +'<br>'+
37-
'<div class="rating"></div>'+
382

39-
/*'<button id="vm" onclick="display(\''+response.docs[i].key+'\')">view more</button>'+*/
40-
41-
'<a href="https://openlibrary.org'+response.docs[i].key+'" id="link">Redirect to the book page</a>'
3+
const addLoadingSpinner = () => {
4+
const loader = document.createElement("div");
5+
loader.id = "loader";
6+
loader.classList.add("loader");
7+
const container = document.getElementById("content");
8+
container.appendChild(loader);
9+
};
4210

43-
'</div>'+
44-
'</div>'+
45-
'</div>';
46-
rating(response.docs[i].key,i);
47-
}
48-
})
11+
const removeLoadingSpinner = () => {
12+
const loader = document.getElementById("loader");
13+
const container = document.getElementById("content");
14+
container.removeChild(loader);
15+
};
16+
17+
function search_book() {
18+
var search = document.getElementById("searchbar").value.toLowerCase();
19+
var container = document.getElementById("content");
20+
21+
container.innerHTML = "";
22+
addLoadingSpinner();
23+
fetch("https://openlibrary.org/search.json?q=" + search)
24+
.then((a) => a.json())
25+
.then((response) => {
26+
removeLoadingSpinner();
27+
for (var i = 0; i < response.docs.length; i++) {
28+
container.innerHTML =
29+
container.innerHTML +
30+
'<div class="book">' +
31+
'<div class="title">' +
32+
response.docs[i].title +
33+
"</div>" +
34+
'<div class="info">' +
35+
'<img src="http://covers.openlibrary.org/b/isbn/' +
36+
response.docs[i].isbn[0] +
37+
'-M.jpg"><br>' +
38+
"<div>" +
39+
'<span style="font-weight:500; color:rgb(122, 72, 15)">' +
40+
"Author: " +
41+
"</span>" +
42+
response.docs[i].author_name[0] +
43+
"<br>" +
44+
/*'<span style="font-weight:500; color:rgb(122, 72, 15)">'+
45+
'Subject: '+
46+
'</span>'+
47+
response.docs[i].subject[0] +'<br>'+*/
48+
'<span style="font-weight:500; color:rgb(122, 72, 15)">' +
49+
"No. of pages: " +
50+
"</span>" +
51+
response.docs[i].number_of_pages_median +
52+
"<br>" +
53+
'<span style="font-weight:500; color:rgb(122, 72, 15)">' +
54+
"First publish year: " +
55+
"</span>" +
56+
response.docs[i].first_publish_year +
57+
"<br>" +
58+
'<div class="rating"></div>' +
59+
/*'<button id="vm" onclick="display(\''+response.docs[i].key+'\')">view more</button>'+*/
60+
61+
'<a href="https://openlibrary.org' +
62+
response.docs[i].key +
63+
'" id="link">Redirect to the book page</a>';
64+
65+
"</div>" + "</div>" + "</div>";
66+
rating(response.docs[i].key, i);
67+
}
68+
});
4969
}
5070

5171
//this function wil fetch and display rating out of 5 by rounding it to the latest integer
52-
function rating(url_spec,book_no)
53-
{
54-
fetch("https://openlibrary.org"+url_spec+"/ratings.json")
55-
.then(a=>a.json())
56-
.then(response=>{
57-
var rating=document.getElementsByClassName("rating");
58-
rating[book_no].innerHTML='<span class="material-symbols-outlined star">star</span>'+
59-
'<span class="material-symbols-outlined star">star</span>'+
60-
'<span class="material-symbols-outlined star">star</span>'+
61-
'<span class="material-symbols-outlined star">star</span>'+
62-
'<span class="material-symbols-outlined star">star</span>'
63-
var stars=document.getElementsByClassName("star");
64-
65-
for(var j=0;j<Math.round(response.summary.average);j++)
66-
{
67-
stars[book_no*5+j].style.color="rgb(255, 145, 0)";
68-
}
72+
function rating(url_spec, book_no) {
73+
fetch("https://openlibrary.org" + url_spec + "/ratings.json")
74+
.then((a) => a.json())
75+
.then((response) => {
76+
var rating = document.getElementsByClassName("rating");
77+
rating[book_no].innerHTML =
78+
'<span class="material-symbols-outlined star">star</span>' +
79+
'<span class="material-symbols-outlined star">star</span>' +
80+
'<span class="material-symbols-outlined star">star</span>' +
81+
'<span class="material-symbols-outlined star">star</span>' +
82+
'<span class="material-symbols-outlined star">star</span>';
83+
var stars = document.getElementsByClassName("star");
6984

70-
})
85+
for (var j = 0; j < Math.round(response.summary.average); j++) {
86+
stars[book_no * 5 + j].style.color = "rgb(255, 145, 0)";
87+
}
88+
});
7189
}

0 commit comments

Comments
 (0)