Pokemon Trading Cards
We're going to create a Pokemon Trading Cards show page. To achieve this, you'll use JS to dynamically create all the elements on the page. The end result should look like this:
Learning Objectives
- Use JavaScript and the DOM to render dynamic HTML
Instructions
- The
data.js
file contains a global array that contains information on different pokemon types - Inside
index.js
, you should loop through this array and render a "card" for each pokemon type. Use the example image as a reference. - You will also find an HTML example commented out in the
index.html
- Use the exact CSS classes you see in the example HTML to obtain the same style for each card
- The cards should be nested inside
<ul class="cards"></ul>
- Use the
official-artwork
object key as the images for the card. The images are all inside of thesprites
key, in each pokemon object - Render all the cards on the page that represents all the pokemons, recreating the same layout, using JS
Extended Requirements
- Add an extra section to each card that contains information about which games each pokemon appeared in.
- See if you can find a way to toggle between the different images of each card! (this is a hard one! You might want to use google...)