Shopping Cart Template

Table of Content

• About the Project
• Live Version
• Built with
• Prerequisites
• Next Releases
• Contribution Rules
• Contact

About the Project

A reusable and easy-to-integrate functional shopping cart template for E-commerce web applications. This project also features responsive hero and minimal navigation sections. AsyncJS, JS Classes, WebAPIs, the DOM and Storage API are among the key features used in this project.

Live Version

Check out the live version here.

Built with

• JavaScript & WebAPI
• JSON, JSON API
• HTML
• CSS
• Git
• GitHub
• Terminal
• Chrome DevTool
• Firefox DevTool
• Responsive Styling
• Interactive Coding
• Visual Studio Code
• Cross-Browser Testing
• Debugging Techniques

Prerequisites

Minimum recommended technical knowledge prior to rebuilding the project:

• HTML
  • basic knowledge
  • viewport meta tag
  • linking external css & js files including third-party files
  • data- attribute
• CSS
  • basic knowledge
  • css pseudo elements
  • css pseudo classes
  • variables
  • position & display properties
  • box model
  • transform property
  • -webkit
  • responsive css units
  • media queries
  • font awesome
• JavaScript, WebAPI & JSON
  • writing and reading JSON file
  • fetch API from JSON
  • DOM manipulation & DOM methods
  • object oriented programming
  • async JS, promises and async/await
  • Local object and Local object methods
  • static methods
  • try/catch
  • array and string methods
  • JS classes, class methods
  • event listeners
  • template literals
  • arrow functions
  • self-invoked functions
  • this, return, const & let keywords
  • spread
  • default parameters
  • if/else statement
  • switch
  • Number object
• Chrome DevTool
  • console
  • application
  • elements
  • sources
  • toggle device toolbar

Next Releases

• v1.1
  • checking flexbox gap property for safari and small devices.
  • adding margin top/bottom for the checkout btn
  • changing pixels to rem
  • safari incompatibilty: smooth transition between sections
  • hover and click effect for touch devices
  • navbar won't remain visible in mobile browsers
  • further quality control for small devices and big screens
• v2.0
  • checkout page featuring tax calculator based on postal code

Contribution Rules

• Before a pull request, please run cross-browsing tests first and make sure the changes have not created any bug.
• The project indentation is set to 4 spaces.
• Have fun and let me know of any suggestion for improvement.

Contact

Email | Portfolio | GitHub | Dev.to | LinkedIn
Stack Overflow | Twitter | YouTube | Instagram | Facebook