Pokedox project in JavaScript with source code

Pokedox project in JavaScript with source code


Pokedox project is a pokemon based web project. Pokedex displays all the pokemon cards with name, image, and type. It is easy to use and implement.

We are creating a pokemon based Pokedex project in this project. It is coded in HTMl5, CSS3, and JavaScript. This project is built for pokemon fans out there. This project displays a bunch of pokemon cards with their specialty.  The card has a pokemon image, id, name, type, and background color according to their ability.

If a pokemon is grass type the color is green, fire type for red, water type for blue, and many more. It is a front-end project. So. the backend functionality may not be available. This project is inspired by this dribble shot. You can view more than 100+ Pokemon in this project. Have a look at the screenshot below.


Building the pokedex project

Pokedex project is built using HTML5, CSS3, and JavaScript.  HTML is used for placing elements on the browser. CSS is used for styling the HTML content. We are using CSS for creating the layouts and cards where the pokemon appears. JavaScript is used for making it functional and we are fetching the pokemon data from poke API via id. Poke rest API has a bunch of pokemon data that we can get for our project.

This project is clean, simple, and responsive. We are using flexbox, CSS grid to display the cards. We are using JavaScript inner HTML property to write the HTML code. Further, we are always using online google fonts. It is a beginner pokedox project for enhancing the sill and ideas. Download the project and get experienced by yourself.

How to use this pokedox project?

Click the button below to get the source code for this pokedox project.