bandana9singh/pokedex

A Pokedex implementation by various contributors.

Pokedex

A Pokedex implementation by various contributors.

Welcome to our Pokedex. We collaborate on this fun project to build one of the best Pokedexes in the world. It's Open Source and it's free! We at Refocus give this task to our prospective team-mates. It's not easy, it is challenging at it's best and you'll have to push yourselves to meet the expectations of the expected finished product. This Pokedex needs to be built from scratch without using any frameworks or tools! Pure HTML, CSS and JavaScript. Let's see what greatness awaits, looking forward to seeing you contribute some great code and help you learn quite a bit through these tasks.

What you'll be building

You'll be building a Pokdex from scratch or extending it. Read the instructions of the TODO index you've been assigned and work on it. It's a web version of Pokdex, so it doesn't need to be responsive(yet).

Guidelines to follow

• Clone the repository and work on local in your Nodejs environment. This is mandatory.
• Feel free to add files, but also make sure you heavily document your code. Explain everything with details.
• Use the folder structure provided and keep your code modular and organized
• index.html is entry point into your app, so this needs to be served via Jerkyll. Make sure you know how to use GitHub pages for serving static files before submitting your contributions.
• You need to send us a pull request once you're done.

TODO:

1. A UI that is similar to the cartoon version of pokedex. This needs to be built entirely with CSS, so make sure you're handy with CSS before attempting this. You should be good with layouts, positioning and creating shapes out of CSS. You can add interactivity by plugging in event listeners to your HTML with plain JavaScript.

• The Skeleton of the Pokdex must be pure CSS too. You're first task would be to build a open/close/flip Pokedex. Notice the dark yellow triangle when the Pokdex is closed? That's where you need to attach your event listeners to open/close the Pokedex.

• Once you're done with Opening the Pokedex, it needs to turn on automatically. (Make sure the transitions of the dark screen turns to a different color when it's turned on)

• Build every button that you see in the image through CSS.

This concludes your task 1.

2. Parse the Data from js/pokedex.json and display the below listed fields on the Pokedex. // Replace the 'XXX' in https://assets.pokemon.com/assets/cms2/img/pokedex/full/XXX.png with the pokemon ID to request an image of the pokemon, instead of using the img in the json file(has better quality pictures!).

Checkout https://www.pokemon.com/us/pokedex/bulbasaur for Pokedex reference

A list of 151 Pokemon are present in the js/pokedex.json file. These following fields need to be displayed.

Pokemon Data

Attributes -

• Number
• Name
• img
• type
• height
• weight
• candy
• candy count
• egg
• spawn_chance
• avg_spawns
• multipliers
• weaknesses
• next_evolution

CONTRIBUTING

Send a pull request with what you worked on and we'll do a merge if everything seems fine.