Js Pokemon Search Practice 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.

Sample Markup:

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.


Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us