Pokemon JavaScript Website Challenge

6 min readFeb 3, 2020

In Flatiron School everyone experiences a lab which requires DOM Manipulation , accessing Database, handling user driven events, creating appropriate functions and rendering views with HTML, CSS and JavaScript. Keeping tack of everything can be very tricky as there are many moving parts along with rules and conventions that must be followed. If all the components are not properly working together we will encounter issues with our website. It is important to understand the flow with building a website. This blog will show you the proper steps for solving this challenge or any similar challenges you experience when building a website with JavaScript.

The Pokemon Challenge

Below is the example of the Pokemon website we would like to build. The website shows a list of all the Pokemons along with a search option. There is also an option to change the view of the Pokemon from front to back or back to front when the image of the Pokemon is clicked.

When a user clicks an image of a Pokemon it will toggle between the front and back view of the Pokemon.

Deliverables

JS Pokemon Search Assignment

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:

Render all the pokemon
Implement a filter functionality for your Pokemon list.

Your search should include pokemon whose names are not exact matches

Implement a flip functionality on each Pokemon.
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>

Database Example for One Pokemon

Since we have access to the database through pokemon.js file we can access the database through the assigned constant POKEMON and iterate through it using the functions we create. We could also send a fetch request to the url of the database using the fetch( ) option.

Fetching Database from API

fetch(“http://localhost:3000/pokemons")

.then(r => r.json())

.then(data => {renderAllPokemons(data) })

//renderAllPokemons is a function that manipulates the database information using the JavaScript function you create.

Once we access to the database either through fetch( ) (a server request) or pokemon.js we can start to take a look at how to prevent the JavaScript functions from loading in the index.js file. When websites load they load the HTML and CSS first in order to render the webpage to the user quickly. However, if there are functions in the index.js file that try to load before the render the HTML and CSS in index.html it will create an error in the website loading. There are two ways to prevent this issue.

Ways to Prevent Actions in the index.js from loading before Index.html loads.

First Option

Team Defer- place a defer in index.html that loads the index.js

This prevents the index.js from loading before the index.html loads.

Second Option

Team DOM Contented Loaded-the second option is to check the index.js file and see if there is a function with the following information.

document.addEventListener(‘DOMContentLoaded’, () =>{}

Let’s explain what this actually does. Document is an object that allows us to view the entire document or view of the website in our browser. addEventListener checks to see if the DOMContentLoaded and if it does then we can write the function in the {} . The functions we write in the {} will only run when the DOMContentLoads properly. This prevents issues with the functions loading before the actual webpage is ready.

Since we have the document.addEventListener(‘DOMContentLoaded’, () =>{} option in the index.js file we will use that option.

Rendering the Pokemons from the database

We need to render the Pokemons from the database so that they display on our webpage. In order to do that we need to write a function that accesses our database and properly displays to our webpage.

Let’s find out first where we will place each example of the Pokemon first based on the information provided in the html file.

2. In the index.html file we see a div tag with id=”pokemon-container” where it says “There are no Pokemons here”. This looks like the appropiate place to place the list of Pokemons from our database.

3. In JavaScript we have options to search for that specific tags using different query methods. We will use the .querySelector on the document object and look for the specific id of pokemon-container. When searching for a specific id you must use # symbol for tag with id. If it was a class you would use . option. We then assign the results of that query to a constant that we can use later.

Be careful on how you name variables as information in a const variable cant be changed while a let variable can be. DON’T EVER USE VAR DUE TO HOISTING ISSUES.

*Declare constants that persist from index.html at the top for global scope

const pokeBowl = document.querySelector(“#pokemon-container”)

const search =document.querySelector(“#pokemon-search-input”)

Adding Event Listener for User Search Input

search.addEventListener(“input”, e =>{

constant userInput = e.target.value

const filteredList = POKEMON.filter(poke => {

return poke.name.includes(userInput))

pokeBowl.innerHTML = “”

renderAllPokemon(filteredList)

})

Adding Event Listener for Pokemon Image (Event Delegation Way)

pokeBowl.addEventListener(“click”, e => {

if (e.target.dataset.action === “flip”) {

const foundPoke =POKEMON.find((poke) => poke.id === parseInt(e.target.dataset.id))

let currentSprite = e.target.src

if (foundPoke.sprites.front === currentSprite) {

currentSprite = foundPoke.sprites.back

} else {

currentSprite = foundPoke.sprites.front

}

e.target.src =currentSprite

}

})

Function for rending one Pokemon

function renderOnePokemon(pokemon) {

const div= document.createElement(“div”)

div.className = “pokemon-card”

div.innerHTML = ` <div class=”pokemon-frame”>

<h1 class=”center-text”>${pokemon.name}</h1>

</div>

</div> `

pokeBowl.append(div)

}

Function for Rendering All Pokemons

function renderAllPokemon(pokeArray) {

pokeArray.foreach((onePokemon) => {

renderOnePokemon(onePokemon)

})

}

Calling Function for Rendering All Pokemons

renderAllPokemon(POKEMON)

Full Code

Pokemon Full Code