Skip to content

erfemega/MyReactPokeDex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Welcome to the second mini challenge!

with this mini challenge, you will apply some very basics skills about JavaScript and React. Here, you will find all the instructions needed for this mini challenge.

Instructions

In this Codesandbox, you have a complete environment with all you need to run your app. You just have to follow the instructions below:

  1. Build a new component (class or function it's up to you!) on the file PokeCard.js you can find it on the 'components/' folder This PokeCard component should be rendered on the App.js component (passed as a child)

  2. Inside the PokeCard component, show the data from the object mockPokemonData in the file pokedata.js which lives on the 'mock/' folder USING JSX

  3. Inside of the pokeData.js file, find an object called mockPokemonData which contains the information related to that pokemon: the name of the pokemon and three links to the pokemon's images front_default, front_shiny and video (all the info is based on the public PokeAPI which you can see with more detail here: https://pokeapi.co/)

  4. Render on your component the name of the pokemon using a

    HTML tag

  5. Render the images (front_default and front_shiny) of the pokemon using the HTML tag to show them (sprites property from the mock object contains them)

  6. Create a link to the Pokemon's video so when you click it, redirects you to the video on YouTube using the anchor HTML tag

Submitting your work

For submitting your work you should fill out this form and provide the requested information.

Have fun!