Pokemon Store

A place where people can buy plush pokemon and have a great starter set. Become the greatest trainer! Live demo here.

Table of Contents

• General Info
• Technologies Used
• Features
• Setup
• Usage
• Project Status
• Room for Improvement

General Information

• Project is built using HTML, CSS and Vanilla JavaScript
• The purpose of this project is to gain more practice with the core web languages
• This project was undertaken for hackathon

Important

• Create a seperate js file for your pokedex logic or the pokedex will not work
• If you use Github Pages to deploy your site it will not update if you make changes

Technologies Used

• HTML - version 5
• CSS - version 3
• JavaScript - ES6

Features

List of features here:

• Users can add, remove and delete items from their cart
• Users can navigate through mulitple web pages
• A functioning pokedex was built to help users learn about different pokemon by searching their name or number based on Kanto

Setup

The requirements for this project are simple and do not require much setup. You will need a code editor of your choice. I use VSCode because HTML, CSS, and JavaScript are built in, which makes setup easier. There are no dependencies, only additional plugins if you would like to set them up. If you are unsure, then I would say Prettier+ and ESLint are a good start, along with Live Server. Live Sercer is also a requirement for this project because it allows you to see your website in your browser. You can get all the plugins in VSCode in the side menu, it looks like blocks. You can add the Poke API which you can find by searching for it in your browser. To sum everything up, all you need is a code editor and a plugin to allow you to see your website.

Usage

How does one go about using it?

User navigates onto the home page and can click the shop button or use the navigation links in the header(top of the page) or footer(bottom of the page). Once the user is on the store page, they can click on Add to Cart and their item is added to the cart. They click the - for remove or + for adding an additional item and see the price along with the name of the item. If the user goes to the Learn page, they can see a pokemon and can click some buttons.

Project Status

Project is: completed

Room for Improvement

Room for improvement:

• The hero section can be more smoother
• The cart can be moved to a separate page

To do:

• Add more elements to the footer
• Add a separate cart page for improved UI

Acknowledgements

• This project was inspired by a random thought
• Many thanks to my teachers