Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mosnad-web01/abdulmajeed-phase-1-practice-dog-ceo
https://github.com/mosnad-web01/abdulmajeed-phase-1-practice-dog-ceo
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mosnad-web01/abdulmajeed-phase-1-practice-dog-ceo
- Owner: Mosnad-Web01
- Created: 2024-08-27T12:11:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-27T12:12:59.000Z (5 months ago)
- Last Synced: 2024-08-27T13:35:08.217Z (5 months ago)
- Language: JavaScript
- Size: 29.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fetch Dog CEO
## Learning Goals
- 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.
```js
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
```js
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 `
- ` provided in `index.html`
- `s, the font color of that `
- `
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](https://www.w3docs.com/learn-html/html-select-tag.html).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.---
---
## Challenge 3
Once all of the breeds are rendered in the `
- `, add JavaScript so that, when
the user clicks on any one of the `