# Building a Fetching App

{% hint style="info" %}
Follow along with code examples [here](https://github.com/The-Marcy-Lab-School/3-0-2-pokedex-search-api-f23)!
{% endhint %}

## Setup

`npm create vite`

* name: pokedex
* Vanilla
* JavaScript

cd into pokedex and `npm i`

## Plan

draw a wireframe

![](https://github.com/raffycastlee/marcyannotes/blob/main/fullstack-curriculum/mod-3-async/pokedex-wireframe.svg)

plan out the logic:

* When the page loads:
  * fetch Pikachu (make sure to catch any errors)
  * render Pikachu data to the screen
  * add an event listener for the form
* When the form is submitted:
  * grab data from the form
  * use that data to fetch a new pokemon (make sure to catch any errors)
  * render that pokemon to the screen

## HTML

Within the `body` of our `index.html` file, we'll provide the structure for our application's front end

```html
<div id="app">
  <h1>Pokedex</h1>
  <form aria-label="pokemon search form" id="pokemon-search-form">
    <h2>Find a Pokemon</h2>
    <label for="pokemon"></label>
    <input type="text" name="pokemon" id="pokemon-input" />
    <button type="submit">Submit</button>
  </form>
  <section id="pokemon-display">
    <div id="pokemon-picture">
      <img src="" alt="" />
      <p></p>
    </div>
    <div id="pokemon-stats">
      <ul></ul>
    </div>
  </section>
</div>
```

## JavaScript

First, render Pikachu data when the page loads. Here we use a helper function that can fetch and render any pokemon. The flexibility of this generic helper function will be useful for the search functionality.

```js
const getPokemonData = (pokemonName) => {
  const promise = fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
  promise
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      // render the data
      const img = document.querySelector("#pokemon-picture>img")
      const p = document.querySelector("#pokemon-picture>p")
      img.src = data.sprites.front_default;
      p.textContent = data.name
    })
    .catch((error) => console.error(error.message));
}

const main = () => {
  getPokemonData("pikachu");
}

main(); // running when the page loads
```

Next, we implement the form search such that it can also fetch pokemon data. Make sure to use the `getPokemonData` helper from the last step!

```js
const searchForPokemon = (e) => {
  // stop the reload/redirect
  e.preventDefault();

  const form = e.target;
  const formData = new FormData(form);
  const formObj = Object.fromEntries(formData);

  console.log('here is your data:', formObj);

  // use the helper function, passing in the form's pokemon data
  getPokemonData(formObj.pokemon)

  form.reset();
}

const main = () => {
  getPokemonData("pikachu");

  // add a submit event listener to the form
  const form = document.querySelector("#pokemon-search-form")
  form.addEventListener('submit', searchForPokemon)
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://raffycastlee.gitbook.io/marcyannotes/fullstack-curriculum/mod-3-async/3-building-a-fetching-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.