jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-20 12:03:11 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): move element selector after fetch (#53087)

Browse Source 
Co-authored-by: Mama Naomi <nhcarrigan@gmail.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Lasse Jørgensen
2024-01-12 05:04:58 +01:00
committed by GitHub
parent f9e9c9a6ab
commit 499a73ef67
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
View File

@@ -30,10 +30,10 @@ In this project, you'll build an app that will search for Pokémon by name or ID
1. When the `#search-input` element contains the value `Red` and the `#search-button` element is clicked, an alert should appear with the text `Pokémon not found`
1. When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the values in the `#pokemon-name`, `#pokemon-id`, `#weight`, `#height`, `#hp`, `#attack`, `#defense`, `#special-attack`, and `#special-defense` elements should be `PIKACHU`, `#25` or `25`, `Weight: 60` or `60`, `Height: 4` or `4`, `35`, `55`, `40`, `50`, `50`, and `90`, respectively
1. When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, you should add an `img` element with the `id` of `sprite` and the `src` set to the Pokémon's `front_default` sprite to the page
1. When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`
1. When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`. The `#types` element content should be cleared between searches
1. When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the values in the `#pokemon-name`, `#pokemon-id`, `#weight`, `#height`, `#hp`, `#attack`, `#defense`, `#special-attack`, and `#special-defense` elements should be `GENGAR`, `#94` or `94`, `Weight: 405` or `405`, `Height: 15` or `15`, `60`, `65`, `60`, `130`, `75`, and `110`, respectively
1. When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, you should add an `img` element with the `id` of `sprite` and the `src` set to the Pokémon's `front_default` sprite to the page
1. When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain a two inner element with the text values `GHOST` and `POISON`, respectively
1. When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain two inner elements with the text values `GHOST` and `POISON`, respectively. The `#types` element content should be cleared between searches
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
@@ -225,16 +225,14 @@ async () => {
};
```
When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`.
When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`. Make sure the `#type` element content is cleared between searches.
```js
async () => {
try {
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const typesEl = document.getElementById('types');
searchInput.value = 'Pikachu';
typesEl.innerHTML = ''; // Clear types element before test
searchButton.click();
const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/pikachu'); // Fetch from proxy to simulate network delay
@@ -242,6 +240,8 @@ async () => {
if (res.ok) {
await new Promise(resolve => setTimeout(resolve, 1000)); // Additional delay to allow UI to update
const typesEl = document.getElementById('types');
assert.lengthOf(typesEl.children, 1);
assert.strictEqual(typesEl?.children[0]?.innerText.trim().toLowerCase(), 'electric');
}
@@ -318,16 +318,14 @@ async () => {
};
```
When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain a two inner element with the text values `GHOST` and `POISON`, respectively.
When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain two inner elements with the text values `GHOST` and `POISON`, respectively. Make sure the `#type` element content is cleared between searches.
```js
async () => {
try {
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const typesEl = document.getElementById('types');
searchInput.value = '94';
typesEl.innerHTML = ''; // Clear types element before test
searchButton.click();
const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/94'); // Fetch from proxy to simulate network delay
@@ -336,6 +334,8 @@ async () => {
await new Promise(resolve => setTimeout(resolve, 1000)); // Additional delay to allow UI to update
const targetTypes = ['ghost', 'poison'];
const typesEl = document.getElementById('types');
assert.lengthOf(typesEl.children, 2);
assert.sameMembers(['ghost', 'poison'], [...typesEl.children].map(el => el.innerText.trim().toLowerCase()));
}