Week 10 - Saturday, June 19th

Class Lecture

Topics

Switch Statement

Switch

Client-Server

Client-server ArchitectureWeb API OverviewServer-side Web FrameworksNode.js, npmExpress

Homework

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.

Building from Scratch

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.

Clean up the current branch you are working on

  • 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.

Get the latest sources from the main branch

  • Move to the main branch, git checkout main.

  • Get the latest code from the remote repo - git pull

Create a new branch

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.

Create a project folder

Within the labs/nyt-books folder, create a folder with your initials. So I would create a folder labs/nyt-books/ac.

Create your files for your project.

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 the Bootstrap stylesheet CDNs

Include these two lines in your <head> section. There is an example of doing this in the tickets.html file.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Include axios CDN for getting NY Times Books API

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.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Add the code to retrieve the books data from the NY Times Books API

Add this code to your data file.

async function getBooks () {  
    const response = await axios.get(`https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=5Vd8O8baGS3WEG1eQVAaS2mG6K0VyHH8`)
    return response.data.results.books;
};

Add the code to show the books

In your script file, you will need to mark your function that calls the getBooks function with the "async" keyword.

async function showBooks() {
    const books = await getBooks();
}

showBooks();

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.

Populate and Style the Book Card Content

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.

The Final Product

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.

Make the Page Responsive

Look at the stylesheet for the article grid project (css/styles.css) if you need help figuring out how to do this.

Commit Your Branch

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.

Help Session

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.

Coding Challenges

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.

function howManyLightsabersDoYouOwn(name) {
  if (name==='Zach') return 18;
  else return 10;
}
function abbrevName(name){
  const parts = name.split(" ");
  return `${parts[0][0]}.${parts[1][0]}`;
}
function updateLight(current) {
  switch (current) {
      case 'yellow':
        return 'red';
      case 'red':
        return 'green'
      case 'green':
        return 'yellow';
  }
}
function takeUmbrella(weather, chance) {
  if (weather==='rainy' || (weather==='cloudy' && chance>.2)) return true;
  if (weather==='sunny' && chance>.5) return true;
  return false;    
}

function take(arr, n) {
  return arr.filter((x,i)=>i<n);
}
function makeNegative(num) {
  return (num<0?num:-num);
}
function greet(name){
  return `Hello, ${name} how are you doing today?`;
}
const reverseSeq = n => {
  let results = [];
  for (let i=n;i>=1;--i) {
    results.push(i);
  }
  return results;
};
PreviousWeek 9 - Wednesday, June 16thNextWeek 10 - Wednesday, June 24th

Last updated