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 => (
- -
-
{cartItem.title}
- Quantity: {cartItem.quantity}
-
- ))}
-
+
+
+ {cartList.map(cartItem => (
+ -
+
+
{cartItem.title}
+
₹ {cartItem.price} X {cartItem.quantity} = ₹ {cartItem.price*cartItem.quantity}
+
+
+
+
+
+ ))}
+
+
+ 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