JS Pokemon Search Assignment

pikachu

Objectives

  • 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.


Instructions

  • 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 and pokemon.js. If you've learned fetch, consider using 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 POKEMON console.logged when you start this app.


Deliverables:

  1. Implement a filter functionality for your Pokemon list.
  2. Implement a flip functionality on each Pokemon.
  3. Your search should include pokemon whose names are not exact matches
  4. AS A BONUS, add a way to show users details for a particular pokemon: moves, abilities, etc.

Constructors and Prototypes (feel free to use either ES5 or ES6)

Note When creating constructors and prototypes, you may use ES6 classes or just create the constructor function separately. Your choice.