EcomCartApp

ecomcartapp.markdown

EcomCartApp

A Pen by arjun chaudhary on CodePen.

License.

index.html

<div id='count'>
  
</div>

script.babel

function EComApp() {
  const [total, setTotal] = React.useState({
    totalQty: 0,
    totalPrice: 0
  });
  const [data, setdata] = React.useState([
    {
      productImage:"http://assets.stickpng.com/images/580b57fcd9996e24bc43c1c6.png",
      productName: "Milk",
      productQty: 0,
      productPrice: 60,
      productTotal: 0
    },
    {
      productImage:"https://i.dlpng.com/static/png/326169_thumb.png",
      productName: "Butter",
      productQty: 0,
      productPrice: 600,
      productTotal: 0
    },
    {
      productImage:"https://www.freepnglogos.com/uploads/cake-png/cake-png-transparent-cake-images-pluspng-21.png",
      productName: "Cake",
      productQty: 0,
      productPrice: 360,
      productTotal: 0
    },
    {
      productImage:"https://www.pngall.com/wp-content/uploads/2016/07/Sugar-Free-Download-PNG.png",
      productName: "Sugar",
      productQty: 0,
      productPrice: 40,
      productTotal: 0
    },
    {
      productImage:"https://freepngimg.com/save/22665-chocolate-bar-file/500x400",
      productName: "Chocolate",
      productQty: 0,
      productPrice: 120,
      productTotal: 0
    }
  ]);
  const totalQtyAndPrice = () => {
    let qty = 0,
      price = 0;
    data.map(
      (item) => (
        (qty = qty + item.productQty), (price = price + item.productTotal)
      )
    );
    setTotal({ totalQty: qty, totalPrice: price });
  };
  const [eComList, setEComList] = React.useState(data);
  const Inc = (index) => {
    data[index].productQty = data[index].productQty + 1;
    data[index].productTotal =
      data[index].productPrice * data[index].productQty;
    setEComList(data);
    setdata(eComList);
    totalQtyAndPrice();
  };
  const Drc = (index) => {
    if (data[index].productQty <= 0) {
    } else {
      data[index].productQty = data[index].productQty - 1;
      data[index].productTotal =
        data[index].productPrice * data[index].productQty;
      setEComList(data);
      setdata(eComList);
      totalQtyAndPrice();
    }
  };

  return (
    <div>
      <div style={{display:'flex',backgroundColor:'blue',height:60,borderBottomLeftRadius:5,borderBottomRightRadius:5}}>
        <div style={{marginLeft:10,flex:1}}>
          <h3 style={{fontSize:24,color:'black',textAlign:'center'}}>Aj Mart</h3>
        </div>
        <div style={{marginRight:10,flex:1}}>
          <p style={{fontSize:12,color:'white',textAlign:'right'}}>Qty : {total.totalQty}</p>
           <p style={{fontSize:12,color:'white',textAlign:'right'}}>Total Amount : {total.totalPrice}</p>
        </div>
         </div>
      {data.map((item, index) => (
        <div style={{display:'flex',backgroundColor:'#F4EBE9',height:120,borderRadius:10,margin:20}} >
         <div style={{flex:1,margin:5}}>
           <img src={item.productImage} height={100} width={100} />
          </div>
         <div style={{flex:1}}>
            <h4  style={{fontSize:20,color:'black'}}>{item.productName}</h4>
            <p style={{fontSize:15,color:'black',textAlign:'left'}}>Price:{item.productPrice}</p>
          </div>
           <div style={{marginTop:30,marginLeft:20,flex:2}} >
            <button
            onClick={() => {
              Inc(index);
            }}
            style={{
              backgroundColor: "green",
              color: "white",
              fontSize: 20,
              width: 40,
              marginLeft: 20,
              marginRight: 20,
            }}
          >
            +
          </button>
             {item.productQty}
          <button
            onClick={() => {
              Drc(index);
            }}
            style={{
              backgroundColor: "red",
              color: "white",
              fontSize: 20,
              width: 40,
              marginLeft: 20
            }}
          >
            -
          </button>
              <p style={{fontSize:15,color:'black',textAlign:'right',paddingTop:20,paddingRight:20}}>Total:{item.productTotal}</p>
          </div>
        </div>
      ))}
       </div>
  );
}
      
ReactDOM.render(
      <EComApp/>,
      document.getElementById("count")
      );

scripts

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>