Fetch Dog CEO Challenge

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

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

---

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.

---