Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/el634dev/pokemon-store

Store where a person can add and remove Pokémon from their cart, the quantity will grow or shrink. A vistor can also view pokemon and see different pokemon to purchase.
https://github.com/el634dev/pokemon-store

ecommerce-website html-css-javascript pokemon

Last synced: 29 days ago
JSON representation

Store where a person can add and remove Pokémon from their cart, the quantity will grow or shrink. A vistor can also view pokemon and see different pokemon to purchase.

Awesome Lists containing this project

README 

        
# Pokemon Store

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

> Live demo [_here_](https://pokemon-store-eight.vercel.app/learn.html). 



## Table of Contents

* [General Info](#general-information)

* [Technologies Used](#technologies-used)

* [Features](#features)

* [Setup](#setup)

* [Usage](#usage)

* [Project Status](#project-status)

* [Room for Improvement](#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