Fetch Dog CEO

Learning Goals

• Practice accessing information from APIs and using it to update the DOM
• Practice listening for user events and updating the DOM in response

Introduction

In this lab, you will write JavaScript to get images of dogs and a list of dog breeds from API's and render them to the DOM. You will also add some click behavior to the list elements and implement a filter.

Note that this lab does not contain tests. You will be working from the requirements described below and verifying that your code is working correctly in the browser.

Once you're done, be sure to commit and push your code up to GitHub, then submit the assignment using CodeGrade. Even though this practice lab does not have tests, it must still be submitted through CodeGrade in order to be marked as complete in Canvas.

Challenge 1

This repository includes an index.html file that loads an index.js file.

const imgUrl = "https://dog.ceo/api/breeds/image/random/4";

Add JavaScript that:

• on page load, fetches the images using the url above ⬆️
• parses the response as JSON
• adds image elements to the DOM for each 🤔 image in the array

Hint: Recall that you will need to ensure that your JavaScript doesn't run until after the HTML has loaded. You can use whichever method you prefer to accomplish this.

Challenge 2

const breedUrl = "https://dog.ceo/api/breeds/list/all";

After the first challenge is completed, add JavaScript that:

• on page load, fetches all the dog breeds using the url above ⬆️
• adds the breeds to the page in the <ul> provided in index.html

Challenge 3

Once all of the breeds are rendered in the <ul>, add JavaScript so that, when the user clicks on any one of the <li>s, the font color of that <li> changes. This can be a color of your choosing.

Challenge 4

Once we are able to load all of the dog breeds onto the page, add JavaScript so that the user can filter breeds that start with a particular letter using a dropdown.

For example, if the user selects 'a' in the dropdown, only show the breeds with names that start with the letter a. For simplicity, the dropdown only includes the letters a-d. However, we can imagine expanding this to include the entire alphabet.