laurynxrobson/skin-ecommerce-website

skinEcommerceWebsite is my first Capstone Project. It is an online cosmetics store made with HTML, CSS and JavaScript. The project contains a functional shopping cart, allows the user to enter a discount code as well as set a delivery option and is charged accordingly. The other features are is the user is able to add items to the cart and when the user is redirected from one page to another or refreshes the page the data enter will remain. This project is for developers wanting to create an online store.

skin-ecommerce-website

skinEcommerceWebsite is my first Capstone Project. It is an online cosmetics store made with HTML, CSS and JavaScript. The project contains a functional shopping cart, allows the user to enter a discount code as well as set a delivery option and is charged accordingly. The other features are is the user is able to add items to the cart and when the user is redirected from one page to another or refreshes the page the data enter will remain. This project is for developers wanting to create an online store.

Table of Contents

• Installation
• Usage
• Credits

Installation

1. Click on the "Code" button.
2. Select the "Download ZIP".
3. Once the file is downloaded right click on the file in your downloads folder and select "Extract All..."
4. Then click "Browse" to choose the location of the extracted file.
5. Click the "Extract button".
6. Once the extraction is complete you can open the folder content in your code editor.

Usage

Shop Page:

When you land on the shop page under each product picture is the product information which includes the name of the product, the price and an "Add to Cart" button.

When you click on the "Add to Cart" button you get an alert to notify the customer that the item has been added to the cart and how much the current total is.

You can also click on the image of the item or product (1) and it will take you to the item's page where there is another "Add to Cart" button (2) with the same alert(3).

(1)

(2)

(3)

In the navigation bar is cart preview (1), when you click on it opens up a modal that contains the items added to the cart (2).

(1)

(2)

In the modal, you can increase the quantity of items already added to the cart as well as decrease the quantity or delete the item altogether. The total price of the item is also displayed.

At the bottom of the list is the total cost of all the items in the modal is displayed along with the "Close" button and the "Check Out" button.

Cart Page:

When you click on the "Check Out" button is takes you to the Cart page where the modal is reflected.

A form input is added to the cart page where the customer can add a discount code which is calculated to the total.

A dropdown form to display a "Collect or Delivery" option.

Another dropdown form to display the different delivery options which are added to the total according to the option selected.

Then vat amount is also added to the total amount along with the discount code and the delivery option.

Credits

https://github.com/laurynxrobson