Store Project (HTML & CSS)

Description

This repository contains a JavaScript-based shopping cart project that demonstrates the implementation of a working shopping cart with key features such as dynamic rendering of products, add to cart functionality, and local storage integration. We also used a Trello board to keep track of task progress.

Authors:

Hugh Sinclair GitHub / LinkedIn / [email protected]

Kash Ghanchi GitHub / LinkedIn / [email protected]

Tracey Ngo GitHub / LinkedIn / [email protected]

Our instructor/mentor - Elias Matta

Features

Shopping Cart Functionality:

• Implement a fully functional shopping cart.
• Users can add and remove items dynamically.
• Calculate and display the total price of items in the cart.

Dynamic Rendering:

• Dynamically render products and cart items to the DOM.
• Ensure seamless user experience with real-time updates.

Local Storage Integration:

• Persist cart items to local storage for data retention.
• Retrieve and render saved cart items on page load.

API Integration:

• Utilize an external API to display relevant information to users.
• Enhance user experience with dynamic content from the API.

Date and Time Display:

• Display the current date and time on the webpage.
• Enhance the user interface with real-time information.

Our Store's Wireframe

The store's initial wireframe:

More detailed wireframes for home page:

Web's view

Mobile's view

More detailed wireframes for shopping cart page:

Web's view

Mobile's view

Trello Board

This screenshot showcases our project's Trello board, which we use to manage tasks, track progress, and collaborate in our web development project.

Tools & Resources

We used a variety of tools and resources to collaborate, such as:

• GitHub
• Slack
• Zoom
• Visual Studio Code
• Live Share (Visual Studio Code's extension)
• Trello