diff --git a/src/components/Cart/Cart.jsx b/src/components/Cart/Cart.jsx index 6c706b2..68a9863 100644 --- a/src/components/Cart/Cart.jsx +++ b/src/components/Cart/Cart.jsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import CartContext from '../../contexts/CartContext'; - +import AddToCart from '../AddToCart'; import styles from './Cart.module.css'; // { @@ -22,14 +22,25 @@ function Cart() { ); } else { return ( -
    - {cartList.map(cartItem => ( -
  1. -
    {cartItem.title}
    -
    Quantity: {cartItem.quantity}
    -
  2. - ))} -
+
+
    + {cartList.map(cartItem => ( +
  1. +
    +
    {cartItem.title}
    +
    ₹ {cartItem.price} X {cartItem.quantity} = ₹ {cartItem.price*cartItem.quantity}
    + + +

    +
    +
  2. + ))} +
+
+ Cart Total : ₹ {cartList.reduce((C,cartItem) => cartItem.price*cartItem.quantity + C,0)} +
+ +
) } } diff --git a/src/components/Cart/Cart.module.css b/src/components/Cart/Cart.module.css index 2e20eeb..c1f907d 100644 --- a/src/components/Cart/Cart.module.css +++ b/src/components/Cart/Cart.module.css @@ -2,4 +2,27 @@ margin: 20px; border: 2px solid black; padding: 20px; + padding-bottom: 20px; + +} +.cartItem:hover{ + background-color: aquamarine; +} +.cartItemPrice{ + width: 250px; + float: left; + margin-bottom: 10px; +} +.addToCart{ + width: 100px; + float: left; + margin-bottom: 10px; +} +.cartTotal{ + padding:10px; + margin-top: 20px; + background-color: #025f57; + color: white; + font-weight: bold; + } \ No newline at end of file