- 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.
-
Our "server" is being faked with a package called json-server. This package uses a local file,
db.json
to spin up a RESTful JSON API in about 30 seconds. To run your server:$ npm install -g json-server
this will install the node package (similar to a gem) globally-g
on your machine$ json-server --watch db.json
this spins up the server, it will default tolocalhost:3000
- 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.
- We've also included a sample of the HTML that you can use to style your pokemon cards:
<div class="pokemon-container">
<div style="width:230px;margin:10px;background:#fecd2f;color:#2d72fc" class="pokemon-frame">
<h1 class="center-text">ivysaur</h1>
<div style="width:239px;margin:auto">
<div style="width:96px;margin:auto">
<img data-id="2" data-action="flip" class="toggle-sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png">
</div>
</div>
</div>
</div>