Pokedex        

This is a solution to Building a Pokédex with JavaScript from Digital Innovation One. Dio.me is the platform for you to learn from experts, master the main technologies and enter the most desired companies faster.

This Pokedex load all pokemons and when you click on a pokemon, some details about the chosen pokemon will appear. It's possible to search for a specific pokemon and also look up just for types and search for a specific pokemon by type

Total Spent Time: 17h3m

Build with:

Table of contents

• Overview
  • The challenge
  • Project Composition
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Useful Resources
• Author
• Acknowledgments

Overview

The challenge

• The project goals was develop a pokedex that displays multiple pokemons and create a page that displays the details of the chosen pokemon.

Extra:

• Search for a specific pokemon
• Search by type and a specific Pokemon by type
• Swipe down close description card

Project Composition

Done: ✅

• Consume Pokemon RESTful API
• Build webpage dinamically
• Create pagination
• Limit to show only first generation Pokemons
• Create Pokemon Description page

Extra: 😎

• When you click on a pokemon, display the details of the chosen pokemon at middle of screen
• Search for a specific pokemon
• Filter by type
• Reload search list when choosing a type
• Navigate between search and pokédex and between search type and pokédex
• Page 404 personalized
• Changes the amount of pokemon cards it loads depending on the screen size.
• Search in real time, but it only shows if the pokemon exists if you type its name in full
• Gifs in the corner of the Pokémon's description card
• Description card animation going up when popping up and down when closing
• When swipe down at mobile the description card close
• When closing the description card with swipe on mobile, it does not scroll on the main page
• it is possible to deselect the type of pokemon from the filter
• After selecting a type, it is possible to do a search within the list of pokemons of that type

Bugs fixed: 🐛

• When a pokémon is selected to show its description, disable page scroll
• Some pokemons do not have habitat and this caused the pokemon not to be loaded
• The "dream_world" sprite does not exist for all pokemons, so now the "official-artwork" sprite is being used
• Don't load pokemons that don't have a sprite

Screenshot

Desktop view

Phone view

Links

• Solution URL: GitHub Repository
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS
• JavaScript
• PokeApi
• #region to organize some parts of the code

What I learned

• How to consume RESTful API
• How to manipulate the result of the request through a Promise
• How to use function Map to decrease code verbosity
• How to handle multiple requests in parallel
• How to convert PokeApi model to my model
• How to add subitems to HTML dinamically
• How to add pagination and remove the button when it reaches the limit
• How get Real Time Input

Useful Resources

• Saepul Nahwan - Pokedex App - This design was used as inspiration to develop this webpage.
• Pokemon RESTful API - All the Pokémon data you'll ever need in one place, easily accessible through a modern RESTful API.
• DIO.me - Digital Innovation One - Dio.me is the platform for you to learn from experts, master the main technologies and enter the most desired companies faster.
• CSS Search Box - Inspiration for Search Box Design
• CSS Box Shadow Examples - Used for add box shadow
• CSS Buttons Examples - Used for add styled buttons
• IconScout - For free icons

Author

_{Bianca Emi}

Made with ♥ by Bianca Emi 👋 Get in touch!

Acknowledgments

» Renan J. de Paula - Taught me how to develop a pokedex that displays multiple pokemons

» Mateus Rocha - Inspired me to make the pokemon search page

» Rodrigo Withers - Suggested me to filter by type of pokemon