Week 10 - Saturday, June 19th
Last updated
Was this helpful?
Last updated
Was this helpful?
Your assignment is to use the NY Times Books API to create a page that displays a responsive grid containing a card for each of the best selling books.
You will continue working within the new-site-collab rehab. The code for this project should be modeled after the two other projects in this repo:
zoo animals - in your folder within the labs/class-16 folder. it has code for creating a grid of cards using the Bootstrap card styles.
news article grid - in the top-level, index.html is the starting file for this project. the scripts/scripts.js file contains code for creating a grid of cards (not using Bootstrap) as well as code for retrieving the article card data from the NY Time web API.
It's time for you to become more independent in your work. I want you to start this project from scratch, creating all of the files on your own. Before you start coding, you need to get your branches in order.
if you have a current branch that has modifications that are not committed, commit those changes.
git add .
git commit -m"comment"
git push
go to GitHub and create a pull request to merge your changes into the main branch.
Move to the main branch, git checkout main.
Get the latest code from the remote repo - git pull
Name it the name of the issue that I have assigned you in the repo, such as "dw-nyt-books"
git checkout -b [branch-name] (this will move you into the new branch)
Now you are ready to begin coding.
Within the labs/nyt-books folder, create a folder with your initials. So I would create a folder labs/nyt-books/ac.
You can organize and name the project files however you want. Just make sure they are correctly included in your HTML file. In addition to your HTML file, you will need to create and include the following three files:
stylesheet file
data file
script file
In addition, you will need to include a few external files to get the Bootstrap styles and the axios package that allows you to make remote calls to the NY Times web API.
Include these two lines in your <head> section. There is an example of doing this in the tickets.html file.
Include this line in your <head> section. This external JavaScript library is used to retrieve the books data from the NY Times Books API. There is an example of doing this in the top-level index.html for the article grid.
Add this code to your data file.
In your script file, you will need to mark your function that calls the getBooks function with the "async" keyword.
You now should have your basic project structure in place, and can begin coding the functionality to the showBooks function. Make sure it is working at this point with simple confirmations:
add a style to add padding to the body element and add an <h1>Hello World</h1> to the HTML document to confirm the stylesheet is being included correctly.
in the showBooks function, write the books array to the console to confirm that the data file is being included correctly.
If things aren't working, use the Chrome Developer Tools to check for errors, and make sure all of your files are being loaded.
Review the script code in your zoo lab that creates the cards for the animals. Model your books cards after that HTML, but supply the relevant data from the book in your card. The following data returned from the API should be included:
Book image
Book rank - Book Title
Book description
Clicking on the book image or title should redirect to the Amazon page for the book.
Here's a sample of how the page might look. You're free to style it as you like, or add additional information from the data.
Look at the stylesheet for the article grid project (css/styles.css) if you need help figuring out how to do this.
Do the ACP (add, commit, push) to your branch, and then create a pull request on GitHub to have the changes merged into the main branch.
Here's a video session I did with Yakob clarifying some of the steps necessary to complete this HW. If you're having trouble, look at this first.
codewars.com is a site that has code challenges (called katas) of increasing difficulty. It's a good place to practice. Here are a few free ones to try at the entry level (8). The entry-level ones tend to be free. I don't think you need to sign up.