Cart done

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() {
 
     <Navbar cartToggle={cartToggle} setCartToggle={setCartToggle}/>
     <Cart cartToggle={cartToggle} setCartToggle={setCartToggle}/>
+    <Product cartToggle={cartToggle} setCartToggle={setCartToggle}/>
 
 
 

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 (
+    <div style={{display : "flex"}}>
+      <div>
+        <Shipping_address/>
+        <Payment/>
+
+      </div>
+      <div>
+          <OrderRecipt/>
+      </div>
+
+
+    </div>
+  )
+}
+
+export { Checkout }

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 (
+   <>
+
+        <div className='promobox'>
+            <p>Order Summary ( 4 items)</p>  
+            <div className={styles.miniCont}>
+                <h3>Subtotal:</h3>
+                <h3>${}</h3>
+            </div>
+
+            <div className={styles.miniCont}>
+                <p>Shipping:</p>
+                <p>Free</p>
+            </div>
+            <div className={styles.miniCont}>
+                <p>Total before tax:</p>
+                <p>${}</p>
+            </div>
+
+            <div className={styles.miniCont}>
+                <p>Total before tax:</p>
+                <p>${}</p>
+            </div>
+            <div className={styles.miniCont}>
+                <p>Estimated tax to be collected:</p>
+                <p>${}</p>
+            </div>
+            <hr />
+            <div className={styles.miniCont}>
+                <h2>Total before tax:</h2>
+                <h2>${}</h2>
+            </div>
+        </div>
+        <div className='promobox'>
+            <h2>Apply Gift Card or Promo Code</h2>
+            <div className={styles.promoCodeDiv}>
+                <input id='promoCode' type="text" style={{height : "30px",width:"70%", fontSize:"larger"}} placeholder='Enter Code' />
+                <button className='applyBtn' onClick={handlePromo} >APPLY</button>
+            </div>
+
+
+
+            <div>
+                <button className='placeOrderBtn'> PLACE YOUR ORDER </button>
+            </div>
+        </div>
+   </>
+  )
+}

src/CheckOut/OrderRecipt.module.css

@@ -0,0 +1,10 @@
+.miniCont{
+    display: flex;
+   justify-content: space-between;
+}
+.promoCodeDiv{
+    display: flex;
+    gap : 10px;
+
+
+}

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 (
+    <div className={styles.mainCont}>
+        <div><h2>2.Payment</h2></div>
+        <form>
+            <div>
+                <input id='cardHolderName'className={styles.inputFied} name='cardHolderName' value={Payment.cardHolderName}
+                onChange={handlePayment} placeholder='Name on Card' required /> 
+            </div>
+
+            <div>
+                <input id='cardNo' className={styles.inputFied} name='cardNo' value={Payment.cardNo}
+                onChange={handlePayment} placeholder='Card Number' required /> 
+            </div>
+
+            <div style={{display : "flex", gap : "20px"}}>
+                <input id='month' type="month" className={styles.smallInput} name='month' value={Payment.month}
+                onChange={handlePayment} placeholder='' required /> 
+
+                <input id='cvv' type="cvv" className={styles.smallInput} name='cvv' value={Payment.year}
+                onChange={handlePayment} placeholder=' CVV' required /> 
+            </div>
+
+            <button type='submit' className="saveAddressBtn" onClick={handleSubmit}>ADD THIS PAYMENT METHOD</button>
+
+        </form>
+
+
+    </div>
+  )
+}

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 (
+    <div className={styles.mainCont}> 
+        <h2>1. Shipping Address</h2>
+        <div className='address_cont'>
+            <h2>New Shipping Address</h2>
+            <hr/>
+            <form className='address_form' >
+                <div>
+                    <label>Country</label>
+                    <select name='country' className={styles.inputFied}  id='country' value={address.country} onChange={handleInput} required>
+                        <option value="United states">United States</option>
+                        <option value="Palau">Palau</option>
+                        <option value="Virgin Islands,U.S.">Virgin Islands,U.S.</option>
+                        <option value="Puerto Rico">Puerto Rico</option>
+                        <option value="Northern Mariana Islands">  Northern Mariana Islands</option>
+                    </select>
+                </div>
+
+            <div >
+                <label>Full Name</label>
+                <input id='fullname' className={styles.inputFied} name='fullname' value={address.fullname} onChange={handleInput} placeholder='First and last name' required />
+            </div>
+
+            <div>
+                <label >Address Line 1</label>
+                <input id='address_line1' className={styles.inputFied} name='address_line1' value={address.address_line1} onChange={handleInput} placeholder='Street address, company name, c/o' required />
+            </div>
+
+            <div>
+                <label>Address Line 2</label>
+                <input id='address_line2' className={styles.inputFied} name='address_line2' value={address.address_line2} onChange={handleInput} placeholder='Apartment,suite,unit,building,floor,etc' />
+            </div>
+
+                <div style={{display : "flex"}} >
+                    <div>
+                        <label style={{display : "block"}} >City</label>
+                        <input id='city' name='city' className={styles.smallInput} value={address.city} onChange={handleInput} placeholder='eg. Las Vegas' required/>
+                    </div>
+
+                <div>
+                    <label style={{display : "block"}} >State</label>
+                    <input id='state' name='state' className={styles.smallInput} value={address.state} onChange={handleInput} placeholder='eg. Nevada' required/>
+                </div>
+
+                <div>
+                    <label style={{display : "block"}} >Zip</label>
+                    <input id='zip' name='zip' className={styles.smallInput} value={address.zip} onChange={handleInput} type="number" placeholder='eg. 89101' required/>
+                </div>
+
+
+                </div>
+                <div>
+                    <label>Phone Number</label>
+                    <input id='phoneNo' className={styles.inputFied} name='phoneNo' value={address.phoneNo} onChange={handleInput} type="number" placeholder="Including area code" required/>
+                </div>
+
+                <div>
+                    <input id='checkbox'className={styles.checkbox} type="checkbox" required/>
+                </div>
+
+            <div>
+                <input type="submit" className="saveAddressBtn"   onClick={handleSubmit} value="SHIP TO THIS ADDRESS"/>
+            </div>
+
+            </form>
+
+
+        </div>
+
+    </div>
+  )
+}
+
+export { Shipping_address }

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;
+
+}

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;
+}