Scribd
Upload
11 views5 pages

Kshitij P2 Part2

dvsdvsv

Uploaded by

hassanmansuri570
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views5 pages

Kshitij P2 Part2

dvsdvsv

Uploaded by

hassanmansuri570
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

b) Problem definition 2: Design a scenario where the user can interact with a virtual

shopping cart. Use arithmetic operators to calculate the total price of items added to
the cart. Implement logical operators to apply discounts or promotions based on certain
conditions. Present the results of arithmetic and logical operations on the user interface.
Enable user interaction through input forms, buttons, or other interactive elements.
· Condition 1: Applying a discount to a total when the quantity is 5 or more.
· Condition 2: Free shipping is provided if the total is $50 or more; otherwise, there's a
flat shipping fee of $5.
· Condition 3: An additional discount is applied for premium users (in this case, 5% off
the discounted total).

Code-
ShoppingCart.js:-
import React, { useState } from 'react';
import './Cart.css'

const ShoppingCart = () => {


const [items, setItems] = useState([]);
const [total, setTotal] = useState(0);
const [shipping, setShipping] = useState(0);
const [isPremiumUser, setIsPremiumUser] = useState(false);

const addItem = (name, price) => {


const updatedItems = [...items, { name, price }];
setItems(updatedItems);
calculateTotal(updatedItems);
};

const calculateTotal = (updatedItems) => {

let totalPrice = updatedItems.reduce((acc, item) => acc +


item.price, 0);
let shippingCost = totalPrice >= 50 ? 0 : 5;
let discount = updatedItems.length >= 5 ? 0.1 : 0;

if (isPremiumUser) {
discount += 0.05;
}

totalPrice -= totalPrice * discount;


setTotal(totalPrice.toFixed(2));
setShipping(shippingCost);
};

const handlePremiumChange = (e) => {


setIsPremiumUser(e.target.checked);
calculateTotal(items);
};

return (
<div className='Parent'>
<h1>Virtual Shopping Cart</h1>
<div>

</div>
<div className='Buttons'>
<button onClick={() => addItem('airbuds', 5)}>Airbuds
($5)</button>

<button onClick={() => addItem('Bottle', 10)}>Bottle


($10)</button>
<button className='jacket' onClick={() =>
addItem('Jacket', 20)}>Jacket($20)</button>

</div>
<div>
<div className="cart">
<label for="labl">Premium User</label>
<input
id='labl'
type="checkbox"
checked={isPremiumUser}
onChange={handlePremiumChange}
/>
<h2>Items in Cart</h2>
<ul>
{items.map((item, index) => (
<li key={index}>{item.name} - $
{item.price.toFixed(1)}</li>
))}
</ul>
</div>
<p>Subtotal: ${total}</p>
<p>Shipping: ${shipping}</p>
<p>Total: ${parseFloat(total)+parseInt(shipping)}</p>
</div>
</div>
);
};

export default ShoppingCart;


App.js :-
// src/App.js
import React from "react";

import ShoppingCart from "./components/ShoppingCart";

function App() {

return (
<div className="App">

<ShoppingCart />

</div>
</div>
</div>
);
}

export default App;


Output:-

You might also like