Stephanie's Ghetto Shopping Cart is your go-to storefront for all your shopping needs. This shopping cart is created using JavaScript and features a vibrant food-themed background to enhance your shopping experience.
This project focuses on building the core functionality for a storefront application. The visual design of the storefront and the necessary JavaScript code have already been created, allowing you to focus on the JavaScript fundamentals.
Shopping carts are an excellent way to practice and improve your JavaScript skills.
To work on this project, you can choose to work exclusively within the src folder, or you can take advantage of the live server and tests for a more enhanced development experience.
To get started with the project, you can:
- Download the project from GitHub by clicking the green "Download" button.
- Fork the repository and clone it to your local machine. For guidance on forking, refer to the GitHub documentation: Fork a repo.
To take full advantage of the live server and testing, you need to have Node.js installed on your system. You can check if Node.js is installed by running the following command in your terminal:
node -v
If Node.js is not installed, you can download it from Nodejs.org (select the LTS, "Recommended for most users" version).
Accessing the Working Directory
Once Node.js is installed, navigate to the starter folder in this repository as your working directory. This is where all the scripts, such as npm start or npm test, should be executed.
Install Dependencies
In your working directory, run the following command to install all the Node.js dependencies required for the live server and Jest:
npm install
This command creates a node_modules folder that contains essential packages to make the live server and Jest work.
Running the Live Server
The live server automatically updates every time you make changes to files in the src directory. To start the live server, use the following command in your terminal:
npm run start
The live server eliminates the need to manually refresh your browser after making changes to your code. To stop the live server, press Ctrl+C.
Using Jest to Test Your Code
Jest is a JavaScript testing framework used for creating small unit tests that verify different parts of your application's functionality. You have the option to use prewritten unit tests or create your own. To run the tests, use the following command:
npm run test
When running the tests, you'll see the results in the terminal, indicating both failed and passing tests.
Project Instructions
This project consists of several steps, including:
Step 1: Review the starter code
Step 2: Build the product catalog
Step 3: Create cart functionality with functions like addProductToCart, increaseQuantity, decreaseQuantity, and removeProductFromCart.
Step 4: Implement the checkout functionality with functions like cartTotal and pay.
Step 5: Refactor and improve your code
Step 6: Re-test the user interface
Step 7 (Optional): Add extra features, such as clearing the cart with an empty cart function or implementing a currency switcher for USD, EUR, and YEN.
Built With
Node.js - A JavaScript runtime for creating JavaScript servers
Live Server - Live reloading for your workspace
Jest - A JavaScript testing framework
License
License
Author
Stephanie Stewart - Stephanie Stewart the Digital Designer