Skip to content

Working #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gboyega wants to merge 20 commits into
base: master
Choose a base branch
from
Open

Working #1

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7dc6389
created get request
gboyega Oct 18, 2019
1bb5267
Created cards and onLoad function to populate window
gboyega Oct 18, 2019
99b5762
Moved style.css and index.js into newly created css and js folders
gboyega Oct 18, 2019
c9fbb06
fixed css and js links
gboyega Oct 18, 2019
a05be79
added search function
gboyega Oct 19, 2019
b1cf3e8
modified links to open in new page and changed links styling
gboyega Oct 19, 2019
cb53124
fixed responsiveness issues and cleaned up code
gboyega Oct 19, 2019
f1a8512
changed onLoad parameters
gboyega Oct 19, 2019
0936c8a
fixing bugs
gboyega Oct 19, 2019
4b456f2
done fixing bugs, ready to merge
gboyega Oct 19, 2019
70f47ff
trying to troubleshoot gh pages
gboyega Oct 19, 2019
b6c47d6
added attribution
gboyega Oct 19, 2019
d84fe20
abstracted getData into a function and added conditional statement to…
gboyega Oct 22, 2019
a1179f8
made a few changes to the ui
gboyega Nov 18, 2019
0c69b3e
made some changes to the card
gboyega Nov 18, 2019
f7cd2a8
added download link
gboyega Nov 18, 2019
3636658
added preview and download tag
gboyega Dec 26, 2019
525cf68
added book name to image alt
gboyega Dec 26, 2019
7a36f06
broke if statement conditions to several lines
gboyega Dec 28, 2019
c3fd3c1
added getUrl function and refactored getData function
gboyega Dec 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,18 @@ var search = document.getElementById("search");

search.addEventListener("click", () => {
Copy link

@GodwinEkuma GodwinEkuma Oct 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use an abstraction for the repeated code

Copy link
Owner Author

@gboyega gboyega Oct 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't think of that before. Will do that now. Thank you

Copy link
Owner Author

@gboyega gboyega Dec 28, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

var searchText = document.getElementById("searchText").value;
url = `https://www.googleapis.com/books/v1/volumes?q=${searchText}&maxResults=40`;
url = `https://www.googleapis.com/books/v1/volumes?q=${searchText}&download=pdf&maxResults=40`;
if (searchText !== "" && searchText.trim(" ").length !== 0) {
getData(url);

} else {
window.alert("Please enter a search term that contains at least one alphanumeric character")
}
searchText = "";
})

window.onload = () => {
url = "https://www.googleapis.com/books/v1/volumes?q=pride+prejudice&maxResults=40"
url = "https://www.googleapis.com/books/v1/volumes?q=pride+prejudice&download=epub&maxResults=40"
Copy link

@GodwinEkuma GodwinEkuma Nov 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are repeating this URL. Declare it in the global scope and reuse it

Copy link
Owner Author

@gboyega gboyega Dec 28, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. had to use a function however

getData(url);
}

Expand All @@ -25,6 +27,7 @@ const getData = (url) => {
var data = JSON.parse(request.responseText);
var books = data.items;
var eligible = [];
console.log(eligible);
for (x = 0; x < books.length; x++) {
if (books[x].volumeInfo.imageLinks != null && books[x].volumeInfo.authors != null && books[x].volumeInfo.industryIdentifiers != null) {
Copy link

@GodwinEkuma GodwinEkuma Oct 28, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Multiple if/else usually make the code difficult to read. Think of refactoring it or maybe see if you can use a switch

Copy link
Owner Author

@gboyega gboyega Dec 28, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's a single if-else statement but has multiple conditions, and I think a switch statement will be longer. please advise appropriately

eligible.push(books[x]);
Expand Down Expand Up @@ -56,13 +59,14 @@ const displayCards = (books, i) => {
<div class="col-xl-2 text-center">
<a href="${info.previewLink}" class="bkCover" target="_blank"><img src="${info.imageLinks.thumbnail}" class="card-img m-2" alt="cover" style="width:200px;"></a>

<p><a href="${info.infoLink}" class="card-link text-success" target="_blank">Get book</a></p>
<p><a href="${books[i].accessInfo.pdf.downloadLink}" class="card-link text-success" target="_blank">Download</a></p>

</div>

<div class="col-xl-10">
<div class="card-body">
<h5 class="card-title">${info.title}</h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text">${info.description}</p>
</div>
<ul class="list-group list-group-flush">
Expand All @@ -73,7 +77,7 @@ const displayCards = (books, i) => {
<li class="list-group-item">Category: ${info.categories}</li>
</ul>
<div class="card-footer text-muted">
Data from <a href="https://books.google.com/" class="card-link text-success" target="_blank">Google Books</a>
Data from <a href="${info.infoLink}" class="card-link text-success" target="_blank">Google Books</a>
</div>

</div>
Expand Down