/cart-react

The main thumbnail should dynamically update based on the selected band color. Upon clicking "Add to Cart," a floating checkout button with a count of added items will appear. Clicking this button will open a "Your Cart" modal preview, displaying the added items. The modal should be dynamically updated to reflect item details such as photo, color,

Primary LanguageJavaScript

Here is some UI and work shown in this repository and Project details are share

Live Preview Project

Project Requirements –

The main thumbnail should change based on the Band Color selection.

When clicking Add to Cart it should show a floating Checkout button with a count number.

Once you click on the floating Checkout button it will open Modal Preview (Your Cart) with added items.

Your Cart modal should be updated accordingly, including photo, color, size, quantity, price, etc.

Technology Use

  1. React js
  2. React Hooks
  3. Event Handlers
  4. Arrow Functions
  5. react-star-ratings
  6. react-toastify
  7. HTML5
  8. CSS3
  9. Bootstrap5

Project Run Process

  1. Download or Clone this repository
  2. npm install
  3. npm start

Project Deploy

  1. Netlify

Project UI

Cart Page

image

Checkout Modal

image