- DOM Manipulation
- Events and Event Handlers
- Callbacks
- Constructors and Prototypes or ES6 Classes (optional)
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:
db.json
andpokemon.js
. If you've learnedfetch
, consider usingjson-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 calledpokemon.js
. You should see thePOKEMON
console.log
ged when you start this app.
- Implement a filter functionality for your Pokemon list.
- Implement a flip functionality on each Pokemon.
- Your search should include pokemon whose names are not exact matches
- AS A BONUS, add a way to show users details for a particular pokemon: moves, abilities, etc.
Note When creating constructors and prototypes, you may use ES6 classes or just create the constructor function separately. Your choice.