Hello, your assignment today is to re-create the functionality of our Pokemon search engine.
p.s. Don't forget to include the ability to toggle the card image and reset the card image upon submission of a new search.
We're building out a search feature in our application (no backend persistence).
A user should be able to search for a Pokemon and flip that Pokemon card to see its alternate sprite.
Two files containing the same information are included:
pokemon.js. If you've learned
json-server to spin up a simple RESTful API that will give you your pokemon data:
$ npm install -g json-server
$ json-server --watch db.json
If you aren't yet familiar with
fetch, don't worry. We've included the same data in a file called
pokemon.js. You should see the
console.logged when you start this app.
Each Pokemon card might look something like this in HTML:
<div class="pokemon-card"> <div class="pokemon-frame"> <h1 class="center-text">charizard</h1> <div class="pokemon-image"> <img data-id="7" data-action="flip" class="toggle-sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png"> </div> </div> </div>
Take a look at
/style.css if you're curious about how this app is styled. Applying the classes appropriately from the snippet above should style your Pokemon cards.