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.
In this Codesandbox, you have a complete environment with all you need to run your app. You just have to follow the instructions below:
-
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)
-
Inside the PokeCard component, show the data from the object mockPokemonData in the file pokedata.js which lives on the 'mock/' folder USING JSX
-
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/)
-
Render on your component the name of the pokemon using a
-
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)
-
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
Have fun!