Introduction
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?
- Download the project.
- Extract the zip file & get the folder.
- Set up an editor or IDE.(vs code, sublime text, atom)
- Open the project folder on the editor.
- Launch the program in the browser. (Google Chrome, Mozilla Firefox, Brave)
- Use the project.
- Enjoy & Share.
Click the button below to get the source code for this pokedox project.