Skip to content

learn-co-students/jsdom-fetch-dog-ceo-challenge-onl01-seng-pt-030220

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.


dog ceo

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published