From ab9cd376dcae3aee06122cdce0bcd108af59eef4 Mon Sep 17 00:00:00 2001 From: Rahul Sinha Date: Sat, 7 May 2022 09:40:59 +0530 Subject: [PATCH 1/3] Cart done --- src/App.js | 2 + src/Styled/cartSyled.js | 79 ++++++++++++++++++++++++++++++--- src/Styled/navbar.module.css | 5 ++- src/cart/CartProduct.jsx | 24 +++++----- src/components/Cart.jsx | 47 ++++++++++++++------ src/components/Navbar.jsx | 14 ++++-- src/product/Product.jsx | 53 ++++++++++++++++++++++ src/product/product.module.css | 81 ++++++++++++++++++++++++++++++++++ 8 files changed, 268 insertions(+), 37 deletions(-) create mode 100644 src/product/Product.jsx create mode 100644 src/product/product.module.css diff --git a/src/App.js b/src/App.js index 8ff08bd..da3d048 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import { useState } from "react"; import "./App.css"; import { Cart } from "./components/Cart"; import { Navbar } from "./components/Navbar"; +import { Product } from "./product/Product"; function App() { @@ -12,6 +13,7 @@ function App() { + diff --git a/src/Styled/cartSyled.js b/src/Styled/cartSyled.js index 5e319d2..4913b4b 100644 --- a/src/Styled/cartSyled.js +++ b/src/Styled/cartSyled.js @@ -10,15 +10,16 @@ export const CartSidebar=styled.div` padding: 25px; position:fixed; min-height: 100vh; - transition: all ease-in-out 0.1s; + box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; + transition: all ease-in-out 0.3s; &.expand{ - transition: all ease-in-out 0.1s; + transition: all ease-in-out 0.3s; right:0; } &.shrink{ - transition: all ease-in-out 0.1s; + transition: all ease-in-out 0.3s; right:-550px; } ` @@ -67,6 +68,7 @@ export const EmptyImage=styled.div` font-weight:bold; border:none; border-radius:5px; + transition: all ease-in-out 0.3s; } button:hover{ background-color:#3366cc; @@ -80,14 +82,14 @@ export const ProdCart=styled.div` display:flex; flex-direction:row; gap:20px; - margin-top:20px; - + margin-top:10px; + justify-content:space-around; ` export const ProdSelect=styled.select` width:70px; height:40px; - padding:10px; + padding:0; border:1px solid purple; border-radius:5px; text-align:center; @@ -97,4 +99,67 @@ export const ProdSelect=styled.select` } -` \ No newline at end of file +` + +export const CheckoutButtonDiv=styled.div` +margin-left:-4vh; +position:fixed; +height:100px; +margin-top:auto; +background-color:rgb(245,245,245); +width:100%; +bottom:0; +display:block; +padding:20px; +`; +export const CheckoutButton1=styled.button` +border:2px solid black; +border-radius:5px; +background:transparent; +height:40px; +font-weight:bold; +color:#2F4F4F; +width:120px; +font-size:15px; +transition: all ease-in-out 0.3s; +&:hover{ + background-color:#3366cc; + border:2px solid #3366cc; + color:white; + transition: all ease-in-out 0.3s; +} +` + +export const CheckoutButton2=styled.button` +border:none; +border-radius:5px; +background:transparent; +background-color:#00FA9A; +margin-left:12%; +font-weight:bold; +color:#2F4F4F; +width:200px; +font-size:15px; +height:40px; +transition: all ease-in-out 0.3s; +&:hover{ + background-color:#98FB98; + transition: all ease-in-out 0.3s; +} +`; + +export const RemoveButton=styled.button` + + font-weight:bold; + color:rgb(88,88,88); + text-decoration:none; + font-size:14px; + background:transparent; + text-decoration:underline; + border:none; + margin-top:-50px; + &:hover{ + color:black; + } + +`; \ No newline at end of file diff --git a/src/Styled/navbar.module.css b/src/Styled/navbar.module.css index b0fd3a4..79a2c96 100644 --- a/src/Styled/navbar.module.css +++ b/src/Styled/navbar.module.css @@ -52,7 +52,8 @@ input + button:hover { margin-right: 35%; } .searchNav > div:last-child { - width: 12%; + width: auto; + } .searchNav > div:last-child button { background: transparent; @@ -60,6 +61,8 @@ input + button:hover { color: rgb(0, 57, 83); border-radius: 4px; width: 100%; + padding-left: 15px; + padding-right: 15px; font-weight: 600; } .searchNav > div:last-child button:hover { diff --git a/src/cart/CartProduct.jsx b/src/cart/CartProduct.jsx index e4e1d6f..364070b 100644 --- a/src/cart/CartProduct.jsx +++ b/src/cart/CartProduct.jsx @@ -1,20 +1,22 @@ -import React from 'react' -import { ProdCart, ProdSelect } from '../Styled/cartSyled' +import React from 'react'; +import { RemoveButton, ProdCart, ProdSelect } from '../Styled/cartSyled' -export const CartProduct = () => { +export const CartProduct = ({cartData})=> { + console.log(cartData) + return (
- p1 + {cartData.name}/
-

LAUREN Ralph Lauren

-

Foiled Jersey Cocktail Dress

-

Color: Desert Rose | Size: 4

+

{cartData.name}

+

{cartData.type}

-

$175.00

+

$ {cartData.price}

+ @@ -23,12 +25,12 @@ export const CartProduct = () => { - +

- + REMOVE
) -} +} \ No newline at end of file diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx index 170d7a4..61d6c78 100644 --- a/src/components/Cart.jsx +++ b/src/components/Cart.jsx @@ -1,10 +1,15 @@ import React, { useRef } from 'react' -import { CartSidebar, EmptyImage, EmptyCart, SidbarHeading, EmptyCartLink } from '../Styled/cartSyled' +import { CartSidebar, EmptyImage, EmptyCart, SidbarHeading, EmptyCartLink, CheckoutButtonDiv, CheckoutButton1, CheckoutButton2 } from '../Styled/cartSyled' import closeCart from '../cart/closeCart' import { CartProduct } from '../cart/CartProduct' export const Cart = ({ cartToggle, setCartToggle }) => { + let CartData = JSON.parse(localStorage.getItem("Cart")) || []; + let TotalPrice = CartData.reduce((acc, elem) => { + return acc + Number(elem.price); + }, 0) + console.log(CartData) const $sideBarRef = useRef() closeCart($sideBarRef, () => setCartToggle(false)) return ( @@ -15,11 +20,8 @@ export const Cart = ({ cartToggle, setCartToggle }) => {
- - - {/* Empty Cart Matter start*/} -
-

Nothing to see here yet! Sign in to see items that you've previously placed in your Cart or check out all the awesome things you can buy on Zappos.com!

+ {CartData.length === 0 ?
+

Nothing to see here yet! Sign in to see items that you've previously placed in your Cart or check out all the awesome things you can buy on Zappos.com!

Sign In Home Page @@ -27,19 +29,36 @@ export const Cart = ({ cartToggle, setCartToggle }) => { Contact Us - image1
+ image1
 -
- {/* Empty Cart Matter end*/} - + :
+
+ {CartData.map((elem) => { + return
+ })} + +
+ + + +

Cart Subtotal ({CartData.length} {CartData.length === 1 ? "item" : "items"}) $ {TotalPrice}.00

+ VIEW CART + PROCEED TO CHECKOUT + +
+ + } + + {/* Empty Cart Matter start*/} + + {/* Empty Cart Matter end*/} + + + -
- - -
) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index a3452d7..35cbce3 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -9,6 +9,7 @@ import { MdOutlineShoppingCart } from "react-icons/md"; import { RiArrowDropDownFill } from "react-icons/ri"; export const Navbar = ({cartToggle,setCartToggle}) => { + let CartData = JSON.parse(localStorage.getItem("Cart")) || []; console.log(cartToggle) return (
- + { CartData.length!==0 ? + : + + } +
{/* the dropdown starts */} diff --git a/src/product/Product.jsx b/src/product/Product.jsx new file mode 100644 index 0000000..e539c6b --- /dev/null +++ b/src/product/Product.jsx @@ -0,0 +1,53 @@ +import React from "react"; +import styles from "./product.module.css"; + +const data = { + name: "Crocs", + type: "Classic Clog", + price: "49", + img: "https://m.media-amazon.com/images/I/816yoL1mI4L._AC_SR920,736_.jpg", + ratings: "30,516", +}; + +export const Product = ({setCartToggle}) => { + + let CartData=JSON.parse(localStorage.getItem("Cart"))||[]; + + + const AddtoCart=()=>{ + + CartData.push(data) + localStorage.setItem("Cart",JSON.stringify(CartData)); + setCartToggle(true) + } + return ( +
+ {/*

Product Info:

*/} +
+ +
+
+

{data.name}

+

{data.type}

+
+ $

{data.price}

95 +
+
+ + ⭐⭐⭐⭐⭐ ({data.ratings}) +
+ +
+ FREE upgraded shipping & returns with +
+ +
+
+ ); +}; diff --git a/src/product/product.module.css b/src/product/product.module.css new file mode 100644 index 0000000..8cb15ff --- /dev/null +++ b/src/product/product.module.css @@ -0,0 +1,81 @@ +.parent{ + border: 1px solid black; + height: 600px; + display: flex; +} +.parent>div{ + width: 40%; + border: 1px solid red; + padding: 2%; +} +.parent>div:first-child{ + width: 60%; +} +.parent>div:first-child img{ + width: 100%; + height: 100%; +} +.shippingBtn{ + border: none; + background: rgb(0,118,189); + color: #fff; + font-size: 14px; + font-weight: 600; + display: flex; + align-items: center; + padding: 5px 8px; + margin-right: 3%; +} +.parent>div:last-child>div{ + display: flex; +} +h1{ + margin-bottom: -20px; +} + +.priceFlex{ + /* border: 1px solid red; */ + height: 80px; + display: flex; + align-items: flex-start; + font-size: 25px; + font-weight: 500; + color: darkslategray; +} +p{ + font-size: 36px; + /* line-height: 0px; */ + margin-top: 5px; + font-weight: 600; +} +.ratingSpan{ + font-size: 14px; + font-weight: 700; + margin-left: 2%; +} +.cartBtn{ + margin-top: 50px; + width: 100%; + background-color: lightgreen; + color: darkslategray; + border: none; + font-size: 15px; + border-radius: 5px; + cursor: pointer; + letter-spacing: 1px; + font-weight: 700; + padding: 2.5%; +} +.cartBtn:hover{ + background-color: rgb(172, 219, 172); + transition: all ease-in-out .5s; +} +.lastBox{ + width: 57%; + margin: auto; + margin-top: 15px; + margin-bottom: 5px; +} +.lastBox+img{ + margin-left: 40%; +} \ No newline at end of file From 4bdd83a829a21dd0d70ed039cfeceea1bf49d4ee Mon Sep 17 00:00:00 2001 From: Sumit Beniwal <99647169+SumitB1412@users.noreply.github.com> Date: Sat, 7 May 2022 10:06:25 +0530 Subject: [PATCH 2/3] Update Navbar.jsx --- src/components/Navbar.jsx | 154 +++++++++++++++++++++++++++++++++++++- 1 file changed, 151 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 35cbce3..e137790 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -101,15 +101,163 @@ export const Navbar = ({cartToggle,setCartToggle}) => { -
+
Women +
+
+

Shoes

+

Sneakers & Athletic

+

Sandals

+

Clogs & Mules

+

Heels

+

Boots & Booties

+

Slippers

+

Flats

+

Loafers

+

Comfort

+

Wide

+

Narrow

+

Single Shoes

+

Shop All Shoes

+
+
+

Clothing

+

Shirts & Tops

+

Swimwear

+

Dresses

+

Shorts

+

Jeans & Denim

+

Underwear & Intimates

+

Coats & Outerwear

+

Socks

+

Sleepwear

+

Activewear

+

Plus Size

+
+
+

Accessories & More

+

Bags & Handbags

+

Backpacks

+

Belt Bags

+

Hair

+

Sunglasses

+

Statement Earrings

+

Face Masks

+

Hats

+
+
+

Featured

+

The Find

+

The Style Room

+

UFC Shop

+

Female Founded

+

Influencer Favourites

+

Spring Sandal Guide

+

Wedding Shop

+
+
-
+
Men +
+
+

Shoes

+

Sneakers & Athletic

+

Boots

+

Running Shoes

+

Oxfords

+

Loafers

+

Clogs

+

Slippers

+
+
+

Clothing

+

Shirts & Tops

+

Shorts

+

Swimwear

+

Pants

+

Jeans

+

Underwear

+

Activewear

+

Hoodies & Sweatshirts

+

Big & Tall

+
+
+

Accessories & More

+

Bags

+

Hats

+

Sunglasses

+

Belts

+

Watches

+

Ties & Pocket Squares

+

Gloves

+

Wallets

+
+
+

Featured

+

The Style Room

+

The Fan Shop

+

Big & Tall

+

UFC Shop

+

Flatheads

+

Men's Golf Shoes & Clothing

+

Penny Luck

+

Fitville

+

Breath Walker

+

c9 Champion: $40 and Under

+
+
-
+
Kids +
+
+

Girls

+

Sneakers

+

Sandals

+

Swimwear

+

Flats

+

Shirts & Tops

+

Dresses

+

Heels

+

Shorts

+

Clogs

+

Light Jackets

+

Boots

+

Shop All Girls

+
+
+

Boys

+

Sneakers

+

Sandals

+

Swimwear

+

Shirts & Tops

+

Pants

+

Dresses

+

Heels

+

Shorts

+

Clogs

+

Light Jackets

+

Boots

+

Shop All Boys

+
+
+

Accessories

+

Backpacks

+

Sunglasses

+

Hats

+

Toys & Games

+
+
+

Top Brands

+

Vans Kids

+

Crocs Kids

+

Native Kids

+

adidas Kids

+

SKECHERS KIDS

+
+
Departments From 813ac752bd0e714605c9fe283278073e496c81e6 Mon Sep 17 00:00:00 2001 From: Rahul Sinha Date: Sun, 8 May 2022 10:21:20 +0530 Subject: [PATCH 3/3] Checkout --- src/CheckOut/Checkout.jsx | 22 ++++++ src/CheckOut/OrderRecipt.jsx | 66 +++++++++++++++++ src/CheckOut/OrderRecipt.module.css | 10 +++ src/CheckOut/Payment.jsx | 56 ++++++++++++++ src/CheckOut/Shipping_address.jsx | 111 ++++++++++++++++++++++++++++ src/CheckOut/checkoutExtra.css | 36 +++++++++ src/CheckOut/sop_address.module.css | 29 ++++++++ src/components/Cart.jsx | 11 ++- 8 files changed, 339 insertions(+), 2 deletions(-) create mode 100644 src/CheckOut/Checkout.jsx create mode 100644 src/CheckOut/OrderRecipt.jsx create mode 100644 src/CheckOut/OrderRecipt.module.css create mode 100644 src/CheckOut/Payment.jsx create mode 100644 src/CheckOut/Shipping_address.jsx create mode 100644 src/CheckOut/checkoutExtra.css create mode 100644 src/CheckOut/sop_address.module.css diff --git a/src/CheckOut/Checkout.jsx b/src/CheckOut/Checkout.jsx new file mode 100644 index 0000000..4a33d68 --- /dev/null +++ b/src/CheckOut/Checkout.jsx @@ -0,0 +1,22 @@ +import React from 'react' +import {Shipping_address} from './Shipping_address' +import { Payment } from './Payment' +import { OrderRecipt } from './OrderRecipt' +const Checkout = () => { + return ( +
+
+ + + +
+
+ +
+ + +
+ ) +} + +export { Checkout } \ No newline at end of file diff --git a/src/CheckOut/OrderRecipt.jsx b/src/CheckOut/OrderRecipt.jsx new file mode 100644 index 0000000..557565e --- /dev/null +++ b/src/CheckOut/OrderRecipt.jsx @@ -0,0 +1,66 @@ +import { hover } from '@testing-library/user-event/dist/hover'; +import React from 'react' +import styles from './OrderRecipt.module.css' +import './checkoutExtra.css' +export const OrderRecipt = () => { + const handlePromo = (e)=>{ + let totalPrice = 100; + let promocode = document.getElementById('promoCode').value; + if(promocode==="zappos10"){ + totalPrice -= totalPrice*(0.1); + console.log(totalPrice); + } + else{ + console.log("Invalid Promo Code !") + } + } + + return ( + <> + +
+

Order Summary ( 4 items)

+
+

Subtotal:

+

${}

+
+ +
+

Shipping:

+

Free

+
+
+

Total before tax:

+

${}

+
+ +
+

Total before tax:

+

${}

+
+
+

Estimated tax to be collected:

+

${}

+
+
+
+

Total before tax:

+

${}

+
+
+
+

Apply Gift Card or Promo Code

+
+ + +
+ + + +
+ +
+
+ + ) +} diff --git a/src/CheckOut/OrderRecipt.module.css b/src/CheckOut/OrderRecipt.module.css new file mode 100644 index 0000000..5492916 --- /dev/null +++ b/src/CheckOut/OrderRecipt.module.css @@ -0,0 +1,10 @@ +.miniCont{ + display: flex; + justify-content: space-between; +} +.promoCodeDiv{ + display: flex; + gap : 10px; + + +} \ No newline at end of file diff --git a/src/CheckOut/Payment.jsx b/src/CheckOut/Payment.jsx new file mode 100644 index 0000000..d8f5e30 --- /dev/null +++ b/src/CheckOut/Payment.jsx @@ -0,0 +1,56 @@ +import React, { useState } from 'react' +import { v4 as uuidv4 } from 'uuid'; +import styles from './sop_address.module.css' +import './checkoutExtra.css' +let cardData = [{cardNo : "123456789",cvv : "123"}] +export const Payment = () => { + + const [cardDetails, setCardDetails] = useState({ + cardHolderName : "", + cardNo : "", + month : "", + year : "", + + }) + + const handlePayment = (e)=>{ + const name = e.target.value; + const value = e.target.value; + + setCardDetails({...cardDetails, id : uuidv4()}) + } + const handleSubmit = (e)=>{ + e.preventDefault(); + + } + + return ( +
+

2.Payment

+
+
+ +
+ +
+ +
+ +
+ + + +
+ + + +
+ + +
+ ) +} diff --git a/src/CheckOut/Shipping_address.jsx b/src/CheckOut/Shipping_address.jsx new file mode 100644 index 0000000..4cc138f --- /dev/null +++ b/src/CheckOut/Shipping_address.jsx @@ -0,0 +1,111 @@ +import React, { useState } from 'react' +import styles from './sop_address.module.css' +import './checkoutExtra.css' +import { v4 as uuidv4 } from 'uuid'; +const Shipping_address = () => { + + const [address,setAddress] = useState({ + // country : "", + // fullname : "", + // address_line1 : "", + // address_line2 : "", + // city : "", + // state : "", + // zip : "", + // phoneNo : "", + + }) + const [records,setRecords] = useState([]) + + const handleInput = (e)=>{ + const name = e.target.name; + const value = e.target.value; + + setAddress({...address, [name] : value}) + } + const handleSubmit = (e)=>{ + e.preventDefault(); + console.log(address); + const newRecord = {...address, id : uuidv4()} + console.log("before",records); + setRecords([...records, newRecord]) + console.log( "after",records); + localStorage.setItem("shippingAddress" , JSON.stringify(records)); + setAddress({country : "", fullname : "", address_line1 : "", address_line2 : "", city : "", state : "", zip : "", phoneNo : "",}) + } + console.log(styles); + + return ( +
+

1. Shipping Address

+
+

New Shipping Address

+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ ) +} + +export { Shipping_address } \ No newline at end of file diff --git a/src/CheckOut/checkoutExtra.css b/src/CheckOut/checkoutExtra.css new file mode 100644 index 0000000..fac6a80 --- /dev/null +++ b/src/CheckOut/checkoutExtra.css @@ -0,0 +1,36 @@ +.saveAddressBtn{ + width:40%; + height:30px; + background-color: rgb(0,57,83); + color: white; + +} +.saveAddressBtn:hover{ + background-color: rgb(1,118,188); +} +.placeOrderBtn{ + /* margin: 10px; */ + margin-top: 15px; + background-color: rgb(0,57,83); + color: white; + width: 100%; + height:30px; + font-size: large; +} +.placeOrderBtn:hover{ + background-color: rgb(1,118,188); +} +.applyBtn{ + width : 25%; + color : white; + background-color: rgb(0,57,83); +} +.applyBtn:hover{ + background-color: rgb(1,118,188); +} +.promobox{ + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + padding: 30px; + margin-top: 5px; + +} \ No newline at end of file diff --git a/src/CheckOut/sop_address.module.css b/src/CheckOut/sop_address.module.css new file mode 100644 index 0000000..f40476e --- /dev/null +++ b/src/CheckOut/sop_address.module.css @@ -0,0 +1,29 @@ +label{ + display:block; +} +.mainCont { + margin-right: 20px; + margin-left : 100px; + margin-bottom: 50px; + +} +.inputFied { + width: 100%; + height: 30px; + margin-top : 8px; + margin-bottom :10px; + font-size: larger; +} +.smallInput{ + height : 30px; + width : auto; + margin-top : 8px; + margin-bottom :10px; + margin-right: 10px; + font-size: large; +} +.checkbox{ + height: 25px; + width: 25px; + margin-bottom :10px; +} diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx index 61d6c78..053a16e 100644 --- a/src/components/Cart.jsx +++ b/src/components/Cart.jsx @@ -1,7 +1,8 @@ import React, { useRef } from 'react' import { CartSidebar, EmptyImage, EmptyCart, SidbarHeading, EmptyCartLink, CheckoutButtonDiv, CheckoutButton1, CheckoutButton2 } from '../Styled/cartSyled' import closeCart from '../cart/closeCart' -import { CartProduct } from '../cart/CartProduct' +import { CartProduct } from '../cart/CartProduct'; +import {Checkout} from './CheckOut/Checkout' export const Cart = ({ cartToggle, setCartToggle }) => { @@ -12,6 +13,12 @@ export const Cart = ({ cartToggle, setCartToggle }) => { console.log(CartData) const $sideBarRef = useRef() closeCart($sideBarRef, () => setCartToggle(false)) + const handleCheckout = ({TotalPrice})=>{ + console.log("hii") + console.log(TotalPrice); + setCartToggle(false) + return (navigate("/checkout")); + } return ( @@ -46,7 +53,7 @@ export const Cart = ({ cartToggle, setCartToggle }) => {

Cart Subtotal ({CartData.length} {CartData.length === 1 ? "item" : "items"}) $ {TotalPrice}.00

VIEW CART - PROCEED TO CHECKOUT + handleCheckout(TotalPrice)}> PROCEED TO CHECKOUT