// import Class1 from ".

/components/classComp/class1";
// import Fun from "./components/testing/test1";
// import Fun3 from "./components/testing/test3";
import Image from "./components/imageCalls/image";
import './App.css'
function App() {
return (
<div className="App">
{/* <Fun/>
<Fun3/>
<Fun3/>
<Class1/> */}
<Image/>
</div>
);
}

export default App;

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

import Nav from './components/staticpage/nav';

import './style.css'

import Banner from './components/staticpage/banner';

import Card1 from './components/cards/card1';

import Card2 from './components/cards/card2';

import Card3 from './components/cards/card3';

import Card4 from './components/cards/card4';

// import Fun from "./components/testBt";

function App() {

return (
 <div className="App">

{/* <Fun/> */}

<Nav/>

<Banner/>

<div className='container'>

<div className='row'>

<div className='col'>

<div>

<Card1/>

</div>

</div>

<div className='col'>

<div>

<Card2/>

</div>

</div>

<div className='col'>

<div>

<Card3/>

</div>

</div>

<div className='col'>

<div>

<Card4/>

</div>

</div>

</div>

</div>

</div>
 );

export default App;

import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import Main from './components/function/main';

function App() {
return (
<div className="App">
<Main/>
</div>
);
}

export default App;

https://cdn.shopify.com/s/files/1/0564/3685/0790/files/multiProduct.json

import React, { useState } from "react";

import {ToastContainer,toast} from 'react-toastify'

const Main=()=>{
const[formData,setFormData]=useState({
name:'',email:'',password:''
})
const handleChange=(e)=>{
setFormData({
...formData,
[e.target.name]:e.target.value
})
}

const handleSubmit=(e)=>{
e.preventDefault()
if(formData.name&&formData.email&&formData.password){
toast.success("Form Submit",{
position:'top-center'
})
setFormData({name :'',email:'',password:''})
 }else{
toast.error("Please Fill data",{
position:'top-right'
})
}
}
return(
<>
<form onSubmit={handleSubmit}>
<div>
<label>Name
<input className="form form-control"
name='name' value={formData.name}
onChange={handleChange}/>
</label>
</div>
<div>
<label>Email
<input className="form form-control"
name='email' value={formData.email}
onChange={handleChange}/>
</label>
</div>
<div>
<label>Password
<input className="form form-control"
name='password' value={formData.password}
onChange={handleChange}/>
</label>
</div>
<button className="btn btn-success mt-4" >submit</button>
</form>
<ToastContainer/>
</>
)
}
export default Main

import React from "react";

class Child extends React.Component{

render(){
return(
<>
{
this.props.data.map((item)=>(
<div className="col">
<div class="card">
<img src={item.image} class="card-img-top" alt="..."/>
<div class="card-body">
<h5 class="card-title">{item.title}</h5>
<p class="card-text">{item.price}</p>
<p class="btn btn-primary">{item.duration}</p>
<button className="btn btn-primary"
onClick={()=>this.props.updatePrice(item.id,10)}>Incs</button>
</div>
</div>
</div>
 ))
}

</>
)
}
}
export default Child

import React from "react";

import Child from "./cards";
import html from '../../assests/html.png'
import css from '../../assests/css.png'
import js from '../../assests/js.png'
import bt from '../../assests/bt.png'

class Main extends React.Component {

constructor() {
super()
this.state = {
courses:[
{
image: html,
title: 'HTML is used to create the structure of web pages using
elements like headings, paragraphs, links, and images.',
price: 200,
duration: 10,
id: 1
},
{
image: css,
title: 'CSS styles those pages, controlling layout, colors, fonts,
and responsiveness.',
price: 300,
duration: 20,
id: 2

},
{
image: js,
title: 'JavaScript adds interactivity to web pages, like form
validation, animations, and dynamic content.',
price: 400,
duration: 30,
id: 3
},
{
image: bt,
title: 'Bootstrap is a CSS framework that helps design responsive
and mobile-first websites quickly using prebuilt components.',
price: 500,
duration: 10,
id: 4
}
]
}
 }

updatePrice = (id, increment) => {

const updatedCourses = this.state.courses.map(course => {
if (course.id === id) {
return {
...course, price: course.price + increment
}
}
return course;
})
this.setState({ courses: updatedCourses })
}

render() {

return (
<>

<div className="container">
<div className="row">
<Child data={this.state.courses}
updatePrice={this.updatePrice} />
</div>
</div>

</>
)
}
}
export default Main

import React from "react";

const Nav=()=>{
return(
<>
<div className="navbar navbar-expand-lg bg-primary
text-white">Courses</div>
</>
)
}

export default Nav

import React from "react";

const About=()=>{
return(
<>
<h1>Its About Page</h1>
</>
)
}
export default About
import React from "react";
const Contact=()=>{
return(
<>
<h1>Its Contact Page</h1>
</>
)
}
export default Contact

import React from "react";

const Home=()=>{
return(
<>
<h1>Its Home Page</h1>
</>
)
}
export default Home

import React from "react";

import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom'
import Home from "./home";
import About from "./about";
import Contact from "./contact";
const Main=()=>{
return(
<div>
<Router>
<div className="bg-primary">
<Link to='/home' className="ms-4 text-white text-decoration-none fs-
2">Home</Link>
<Link to='/about' className="ms-4 text-white text-decoration-none fs-
2">About</Link>
<Link to='/contact' className="ms-4 text-white text-decoration-none fs-
2">Contact</Link>
</div>
<Routes>
<Route path="/home" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="/contact" element={<Contact/>}/>

</Routes>

</Router>
</div>
)
}
export default Main

import React from "react";

const Child=(props)=>{
return(
<>
 <h1>Josn Data</h1>
{/* <table className="table table-hover text-center table-striped">
<thead>
<tr>
<th>id</th>
<th>category</th>
<th>image</th>
<th>price</th>
</tr>
</thead>
<tbody>
{
props.data.map((item)=>(
<tr>
<td>{item.id}</td>
<td>{item.category}</td>
<td><img src={item.image} width={50} height={50}
alt="#"/></td>
<td>{item.price}</td>

</tr>
))
}
</tbody>
</table> */}

{
props.data.map((item)=>(
<div className="col">
<div class="card">
<img src={item.image} class="card-img-top" alt="..."/>
<div class="card-body">
<h5 class="card-title">{item.category}</h5>
<p class="card-text">{item.price}</p>
<button class="btn btn-primary">Add</button>
</div>
</div>
</div>
))
}

</>
)
}
export default Child
import React from "react";
import Child from "./child";

const MainTable=()=>{
const products=[
{
"id": 1,
"title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
"price": 109.95,
"description": "Your perfect pack for everyday use and walks in the forest.
Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
"rating": {
"rate": 3.9,
"count": 120
}
},
{
"id": 2,
"title": "Mens Casual Premium Slim Fit T-Shirts ",
"price": 22.3,
"description": "Slim-fitting style, contrast raglan long sleeve, three-button
henley placket, light weight & soft fabric for breathable and comfortable wearing.
And Solid stitched shirts with round neck made for durability and a great fit for
casual fashion wear and diehard baseball fans. The Henley style round neckline
includes a three-button placket.",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/71-
3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
"rating": {
"rate": 4.1,
"count": 259
}
},
{
"id": 3,
"title": "Mens Cotton Jacket",
"price": 55.99,
"description": "great outerwear jackets for Spring/Autumn/Winter, suitable for
many occasions, such as working, hiking, camping, mountain/rock climbing, cycling,
traveling or other outdoors. Good gift choice for you or your family member. A warm
hearted love to Father, husband or son in this thanksgiving or Christmas Day.",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
"rating": {
"rate": 4.7,
"count": 500
}
},
{
"id": 4,
"title": "Mens Casual Slim Fit",
"price": 15.99,
"description": "The color could be slightly different between on the screen and
in practice. / Please note that body builds vary by person, therefore, detailed
size information should be reviewed below on the product description.",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
"rating": {
"rate": 2.1,
"count": 430
}
},
{
"id": 5,
"title": "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain
Bracelet",
"price": 695,
 "description": "From our Legends Collection, the Naga was inspired by the
mythical water dragon that protects the ocean's pearl. Wear facing inward to be
bestowed with love and abundance, or outward for protection.",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 4.6,
"count": 400
}
},
{
"id": 6,
"title": "Solid Gold Petite Micropave ",
"price": 168,
"description": "Satisfaction Guaranteed. Return or exchange any order within 30
days.Designed and sold by Hafeez Center in the United States. Satisfaction
Guaranteed. Return or exchange any order within 30 days.",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 3.9,
"count": 70
}
},
{
"id": 7,
"title": "White Gold Plated Princess",
"price": 9.99,
"description": "Classic Created Wedding Engagement Solitaire Diamond Promise
Ring for Her. Gifts to spoil your love more for Engagement, Wedding, Anniversary,
Valentine's Day...",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 3,
"count": 400
}
},
{
"id": 8,
"title": "Pierced Owl Rose Gold Plated Stainless Steel Double",
"price": 10.99,
"description": "Rose Gold Plated Double Flared Tunnel Plug Earrings. Made of
316L Stainless Steel",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 1.9,
"count": 100
}
},
{
"id": 9,
"title": "WD 2TB Elements Portable External Hard Drive - USB 3.0 ",
"price": 64,
"description": "USB 3.0 and USB 2.0 Compatibility Fast data transfers Improve
PC Performance High Capacity; Compatibility Formatted NTFS for Windows 10, Windows
8.1, Windows 7; Reformatting may be required for other operating systems;
Compatibility may vary depending on user’s hardware configuration and operating
system",
"category": "electronics",
"image": "https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg",
"rating": {
"rate": 3.3,
"count": 203
}
},
{
"id": 10,
"title": "SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s",
"price": 109,
"description": "Easy upgrade for faster boot up, shutdown, application load and
response (As compared to 5400 RPM SATA 2.5” hard drive; Based on published
specifications and internal benchmarking tests using PCMark vantage scores) Boosts
burst write performance, making it ideal for typical PC workloads The perfect
balance of performance and reliability Read/write speeds of up to 535MB/s/450MB/s
(Based on internal testing; Performance may vary depending upon drive capacity,
host device, OS and application.)",
"category": "electronics",
"image": "https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg",
"rating": {
"rate": 2.9,
"count": 470
}
},
{
"id": 11,
"title": "Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA
III 2.5",
"price": 109,
"description": "3D NAND flash are applied to deliver high transfer speeds
Remarkable transfer speeds that enable faster bootup and improved overall system
performance. The advanced SLC Cache Technology allows performance boost and longer
lifespan 7mm slim design suitable for Ultrabooks and Ultra-slim notebooks. Supports
TRIM command, Garbage Collection technology, RAID, and ECC (Error Checking &
Correction) to provide the optimized performance and enhanced reliability.",
"category": "electronics",
"image": "https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg",
"rating": {
"rate": 4.8,
"count": 319
}
},
{
"id": 12,
"title": "WD 4TB Gaming Drive Works with Playstation 4 Portable External Hard
Drive",
"price": 114,
"description": "Expand your PS4 gaming experience, Play anywhere Fast and easy,
setup Sleek design with high capacity, 3-year manufacturer's limited warranty",
"category": "electronics",
"image": "https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg",
"rating": {
"rate": 4.8,
"count": 400
}
},
{
 "id": 13,
"title": "Acer SB220Q bi 21.5 inches Full HD (1920 x 1080) IPS Ultra-Thin",
"price": 599,
"description": "21. 5 inches Full HD (1920 x 1080) widescreen IPS display And
Radeon free Sync technology. No compatibility for VESA Mount Refresh Rate: 75Hz -
Using HDMI port Zero-frame design | ultra-thin | 4ms response time | IPS panel
Aspect ratio - 16: 9. Color Supported - 16. 7 million colors. Brightness - 250 nit
Tilt angle -5 degree to 15 degree. Horizontal viewing angle-178 degree. Vertical
viewing angle-178 degree 75 hertz",
"category": "electronics",
"image": "https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg",
"rating": {
"rate": 2.9,
"count": 250
}
},
{
"id": 14,
"title": "Samsung 49-Inch CHG90 144Hz Curved Gaming Monitor (LC49HG90DMNXZA) –
Super Ultrawide Screen QLED ",
"price": 999.99,
"description": "49 INCH SUPER ULTRAWIDE 32:9 CURVED GAMING MONITOR with dual 27
inch screen side by side QUANTUM DOT (QLED) TECHNOLOGY, HDR support and factory
calibration provides stunningly realistic and accurate color and contrast 144HZ
HIGH REFRESH RATE and 1ms ultra fast response time work to eliminate motion blur,
ghosting, and reduce input lag",
"category": "electronics",
"image": "https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg",
"rating": {
"rate": 2.2,
"count": 140
}
},
{
"id": 15,
"title": "BIYLACLESEN Women's 3-in-1 Snowboard Jacket Winter Coats",
"price": 56.99,
"description": "Note:The Jackets is US standard size, Please choose size as
your usual wear Material: 100% Polyester; Detachable Liner Fabric: Warm Fleece.
Detachable Functional Liner: Skin Friendly, Lightweigt and Warm.Stand Collar Liner
jacket, keep you warm in cold weather. Zippered Pockets: 2 Zippered Hand Pockets, 2
Zippered Pockets on Chest (enough to keep cards or keys)and 1 Hidden Pocket
Inside.Zippered Hand Pockets and Hidden Pocket keep your things secure. Humanized
Design: Adjustable and Detachable Hood and Adjustable cuff to prevent the wind and
water,for a comfortable fit. 3 in 1 Detachable Design provide more convenience, you
can separate the coat and inner as needed, or wear it together. It is suitable for
different season and help you adapt to different climates",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg",
"rating": {
"rate": 2.6,
"count": 235
}
},
{
"id": 16,
"title": "Lock and Love Women's Removable Hooded Faux Leather Moto Biker
Jacket",
"price": 29.95,
 "description": "100% POLYURETHANE(shell) 100% POLYESTER(lining) 75% POLYESTER
25% COTTON (SWEATER), Faux leather material for style and comfort / 2 pockets of
front, 2-For-One Hooded denim style faux leather jacket, Button detail on waist /
Detail stitching at sides, HAND WASH ONLY / DO NOT BLEACH / LINE DRY / DO NOT
IRON",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/81XH0e8fefL._AC_UY879_.jpg",
"rating": {
"rate": 2.9,
"count": 340
}
},
{
"id": 17,
"title": "Rain Jacket Women Windbreaker Striped Climbing Raincoats",
"price": 39.99,
"description": "Lightweight perfet for trip or casual wear---Long sleeve with
hooded, adjustable drawstring waist design. Button and zipper front closure
raincoat, fully stripes Lined and The Raincoat has 2 side pockets are a good size
to hold all kinds of things, it covers the hips, and the hood is generous but
doesn't overdo it.Attached Cotton Lined Hood with Adjustable Drawstrings give it a
real styled look.",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/71HblAHs5xL._AC_UY879_-2.jpg",
"rating": {
"rate": 3.8,
"count": 679
}
},
{
"id": 18,
"title": "MBJ Women's Solid Short Sleeve Boat Neck V ",
"price": 9.85,
"description": "95% RAYON 5% SPANDEX, Made in USA or Imported, Do Not Bleach,
Lightweight fabric with great stretch for comfort, Ribbed on sleeves and neckline /
Double stitching on bottom hem",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg",
"rating": {
"rate": 4.7,
"count": 130
}
},
{
"id": 19,
"title": "Opna Women's Short Sleeve Moisture",
"price": 7.95,
"description": "100% Polyester, Machine wash, 100% cationic polyester
interlock, Machine Wash & Pre Shrunk for a Great Fit, Lightweight, roomy and highly
breathable with moisture wicking fabric which helps to keep moisture away, Soft
Lightweight Fabric with comfortable V-neck collar and a slimmer fit, delivers a
sleek, more feminine silhouette and Added Comfort",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg",
"rating": {
"rate": 4.5,
"count": 146
}
},
 {
"id": 20,
"title": "DANVOUY Womens T Shirt Casual Cotton Short",
"price": 12.99,
"description": "95%Cotton,5%Spandex, Features: Casual, Short Sleeve, Letter
Print,V-Neck,Fashion Tees, The fabric is soft and has some stretch., Occasion:
Casual/Office/Beach/School/Home/Street. Season: Spring,Summer,Autumn,Winter.",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg",
"rating": {
"rate": 3.6,
"count": 145
}
}
]
return(
<>
<h1>Props Call data parent To Child</h1>
<div className="container">
<div className="row">

<Child data={products}/>

</div>
</div>

</>
)
}
export default MainTable

import React from "react";

const Child=(props)=>{
return(
<>
<h1>Its Child comp</h1>
<h1>its {props.title}</h1>
<h3>{props.title1}</h3>
<img src={props.image} width={100} height={100} alt="#"/>
</>
)
}
export default Child
import React from "react";
import logo from '../../assests/Image1.jpg'
import Child from "./child";
const Main=()=>{
const title="its Props data"
return(
<>
<h1>Its Props Topic</h1>
<Child image={logo} title={title} title1="its react props"/>
</>
)
}
export default Main

// import React from "react";

// const Child=(props)=>{
// return(
// <>
// <div className="row">
// {
// props.data.map((item)=>(
// <div className="col">
// <div class="card">
// <img src={item.image} class="card-img-top" alt="..."/>
// <div class="card-body">
// <h5 class="card-title">{item.title}</h5>
// <p class="card-text">{item.price}</p>
// <b class="btn btn-primary">{item.duration}</b>
// <button className="btn btn-success"
// onClick={()=>props.updateIncr(item.id,10)}>Ins</button>
// </div>
// </div>
// </div>
// ))
// }
// </div>
// </>

// )
// }
// export default Child

import React from "react";

const Child=({data,updateIncr})=>{
return(
<>
<div className="row">
{
data.map((item)=>(
<div className="col">
<div class="card">
<img src={item.image} class="card-img-top" alt="..."/>
<div class="card-body">
<h5 class="card-title">{item.title}</h5>
<p class="card-text">{item.price}</p>
<b class="btn btn-primary">{item.duration}</b>
<button className="btn btn-success"
onClick={()=>updateIncr(item.id,10)}>Ins</button>
</div>
</div>
</div>
))
}
</div>
</>

)
}
export default Child

import React, { useState } from "react";

import html from '../../assests/html.png'
import css from '../../assests/css.png'
import js from '../../assests/js.png'
import bt from '../../assests/bt.png'
import Child from "./child";

const Main=()=>{
const[data,setData]=useState([
{
image: html,
title: 'HTML is used to create the structure of web pages using
elements like headings, paragraphs, links, and images.',
price: 200,
duration: 10,
id: 1
},
{
image: css,
title: 'CSS styles those pages, controlling layout, colors, fonts,
and responsiveness.',
price: 300,
duration: 20,
id: 2

},
{
image: js,
title: 'JavaScript adds interactivity to web pages, like form
validation, animations, and dynamic content.',
price: 400,
duration: 30,
id: 3
},
{
image: bt,
title: 'Bootstrap is a CSS framework that helps design responsive
and mobile-first websites quickly using prebuilt components.',
price: 500,
duration: 10,
id: 4
}
])

const updateIncr=(id,ins)=>{
const updateCourses=data.map(course=>course.id===id?{
...course,price:course.price+ins}:course)
setData(updateCourses)
}

return(
<div className="container">
<h1 className="text-center text-success">UseState </h1>
<Child data={data} updateIncr={updateIncr}/>
</div>
)
}
export default Main
import React, { useState } from "react";
import logo1 from "../../assests/bt.png";
import logo2 from "../../assests/css.png";
import logo3 from "../../assests/html.png";
import logo4 from "../../assests/js.png";
import logo5 from "../../assests/bt.png";

const Crud = () => {

const [car, setCar] = useState([
{ id: "AQ1", image: logo1, brand: "Audi", price: 2000, qty: 3 },
{ id: "AQ2", image: logo2, brand: "Bmw", price: 3000, qty: 1 },
{ id: "AQ3", image: logo3, brand: "Polo", price: 4000, qty: 5 },
{ id: "AQ4", image: logo4, brand: "Copper", price: 5000, qty: 6 },
{ id: "AQ5", image: logo5, brand: "Porche", price: 6000, qty: 8 },
]);

const incQty = (id) => {

setCar(prev =>
prev.map(car =>
car.id === id ? { ...car, qty: car.qty + 1 } : car
)
);
};

const decQty = (id) => {

setCar(prev =>
prev.map(car =>
car.id === id ? { ...car, qty: car.qty > 0 ? car.qty - 1 : 0 } :
car
)
);
};

const delCar = (id) => {

setCar(prev => prev.filter(car => car.id !== id));
};

const GrandTotal = (data) => {

return data.reduce((total, car) => total + (car.qty * car.price), 0);
};

const [search, setSearch] = useState('');

const filterData = car.filter(s =>
s.brand.toLowerCase().includes(search.toLowerCase()));

const [newCar, setNewCar] = useState({ brand: "", image: "", price: "", qty: ""
});

const updateCar = (e) => {

e.preventDefault();
const newCarData = {
...newCar,
id: "AQ" + (car.length + 1),
price: parseFloat(newCar.price),
qty: parseInt(newCar.qty),
};
setCar([...car, newCarData]);
setNewCar({ brand: "", image: "", price: "", qty: "" });
 };

const [edit, setEdit] = useState(null);

const saveChange = (e) => {

e.preventDefault();
setCar(prev => prev.map(car => car.id === edit.id ? edit : car));
setEdit(null);
};

return (
<div className="container">
<h1 className="text-primary">Crud Application</h1>
<input
className="form-control mt-4 p-2"
placeholder="Search"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>

<button type="button" className="btn btn-primary mt-3" data-bs-

toggle="modal" data-bs-target="#addModal">
Add
</button>

<div className="modal fade" id="addModal" tabIndex="-1" aria-

labelledby="addModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="addModalLabel">Add
Car</h5>
<button type="button" className="btn-close" data-bs-
dismiss="modal" aria-label="Close" />
</div>
<div className="modal-body">
<form onSubmit={updateCar}>
<input className="form-control my-2"
placeholder="Brand" value={newCar.brand} onChange={(e) => setNewCar({ ...newCar,
brand: e.target.value })} />
<input className="form-control my-2"
placeholder="Image URL or import" value={newCar.image} onChange={(e) => setNewCar({
...newCar, image: e.target.value })} />
<input className="form-control my-2"
placeholder="Price" value={newCar.price} onChange={(e) => setNewCar({ ...newCar,
price: e.target.value })} />
<input className="form-control my-2"
placeholder="Quantity" value={newCar.qty} onChange={(e) => setNewCar({ ...newCar,
qty: e.target.value })} />
<button className="btn btn-success mt-2" data-bs-
dismiss="modal">Submit</button>
</form>
</div>
</div>
</div>
</div>

{edit && (
<div className="modal show fade d-block" tabIndex="-1">
 <div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Edit Car</h5>
<button type="button" className="btn-close"
onClick={() => setEdit(null)} />
</div>
<div className="modal-body">
<form onSubmit={saveChange}>
<input className="form-control my-2"
placeholder="Brand" value={edit.brand} onChange={(e) => setEdit({ ...edit, brand:
e.target.value })} />
<input className="form-control my-2"
placeholder="Image" value={edit.image} onChange={(e) => setEdit({ ...edit, image:
e.target.value })} />
<input className="form-control my-2"
placeholder="Price" value={edit.price} onChange={(e) => setEdit({ ...edit, price:
parseFloat(e.target.value) })} />
<input className="form-control my-2"
placeholder="Quantity" value={edit.qty} onChange={(e) => setEdit({ ...edit, qty:
parseInt(e.target.value) })} />
<button className="btn btn-warning mt-
2">Update</button>
</form>
</div>
</div>
</div>
</div>
)}

<table className="table table-hover text-center table-striped mt-4">

<thead>
<tr>
<th>S.No</th>
<th>Image</th>
<th>Brand</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{filterData.map((item, index) => (
<tr key={item.id}>
<td>{index + 1}</td>
<td><img src={item.image} width={30} height={30}
alt="#" /></td>
<td>{item.brand}</td>
<td>₹{item.price.toFixed(2)}</td>
<td>
<i className="fa-solid fa-minus mx-2" onClick={()
=> decQty(item.id)}></i>
{item.qty}
<i className="fa-solid fa-plus mx-2" onClick={() =>
incQty(item.id)}></i>
</td>
<td>₹{(item.qty * item.price).toFixed(2)}</td>
<td>
 <i className="fa-solid fa-pen-to-square text-
primary m-1" onClick={() => setEdit(item)}></i>
<i className="fa-solid fa-trash text-danger"
onClick={() => delCar(item.id)}></i>
</td>
</tr>
))}
</tbody>
<tfoot>
<tr>
<td colSpan={4}></td>
<td>Grand Total</td>
<td colSpan={2}>₹{GrandTotal(filterData).toFixed(2)}</td>
</tr>
</tfoot>
</table>
</div>
);
};

export default Crud;

import React, { useState } from "react";

import logo1 from "../../assests/bt.png";
import logo2 from "../../assests/css.png";
import logo3 from "../../assests/html.png";
import logo4 from "../../assests/js.png";
import logo5 from "../../assests/bt.png";

const Crud = () => {

const [car, setCar] = useState([

{ id: 1, brand: "Audi", image: logo1, price: 2000, qty: 3 },
{ id: 2, brand: "Polo", image: logo2, price: 10000, qty: 5 },
{ id: 3, brand: "Jaguar", image: logo3, price: 9000, qty: 9 },
{ id: 4, brand: "MiniCopper", image: logo4, price: 8000, qty: 3 },
{ id: 5, brand: "BMW", image: logo5, price: 5000, qty: 7 },
{ id: 6, brand: "Kia", image: logo1, price: 6000, qty: 1 },
]);

const incQty = (id) => {

setCar((prvCars) => {
return prvCars.map((car) => {
if (car.id === id) {
return {
...car,
qty: car.qty + 1,
};
} else {
return car;
}
});
});
};
 const decQty = (id) => {
setCar((prvCars) => {
return prvCars.map((car) => {
if (car.id === id) {
return {
...car,
qty: car.qty - 1 > 0 ? car.qty - 1 : 0,
};
} else {
return car;
}
});
});
};

const deleteCar=(id)=>{
setCar((prvCars)=>{
return prvCars.filter(car=>car.id!==id)
})
}

const grandTotal=(filterData)=>{
return filterData.reduce((total,car)=>{
return total+(car.qty*car.price)
},0)
}

const[search,setSearch]=useState('')
const
filterData=car.filter((e)=>e.brand.toLowerCase().includes(search.toLowerCase()))

const[newCar,setNewCar]=useState({
brand:'',image:'',price:'',qty:''
})

const updDateCar=(e)=>{
e.preventDefault()
const newCarData={
...newCar,
id:car.length+1,
price:parseFloat(newCar.price),
qty:parseInt(newCar.qty),
}
setCar([...car,newCarData])
setNewCar({
brand:'',image:'',price:'',qty:''
})

}
return (
<div className="container">
<div className="row">
<div className="col">
<div>
<h1 className="text-success">Crud Application</h1>
<h3>Search Car</h3>
<input className="form form-control" value={search}
onChange={(e)=>{setSearch(e.target.value)}}/>
 </div>

<button type="button" class="btn btn-primary mt-4" data-bs-toggle="modal" data-bs-

target="#exampleModal">
Add
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<form onSubmit={updDateCar}>
<div>
<label>Brand<input className="form form-control" value={newCar.brand}
onChange={(e)=>setNewCar({...newCar,brand:e.target.value})}/></label>
</div>
<div>
<label>Image<input className="form form-control" value={newCar.image}
onChange={(e)=>setNewCar({...newCar,image:e.target.value})}/></label>
</div>
<div>
<label>Price<input className="form form-control" value={newCar.price}
onChange={(e)=>setNewCar({...newCar,price:e.target.value})}/></label>
</div>
<div>
<label>Qty<input className="form form-control" value={newCar.qty}
onChange={(e)=>setNewCar({...newCar,qty:e.target.value})}/></label>
</div>
<button className="btn btn-success mt-4">submit</button>

</form>
</div>
</div>
</div>
</div>

<div>
<table className="mt-4 table table-hover text-center table-striped">
<thead>
<tr className="text-uppercase">
<th>s:no</th>
<th>brand</th>
<th>image</th>
<th>price</th>
<th>qty</th>
<th>total</th>
<th>action</th>
</tr>
</thead>
<tbody>
{filterData.map((item) => (
<tr>
 <td>{item.id}</td>
<td>{item.brand}</td>
<td>
<img src={item.image} width={50} height={50} alt="#"/>
</td>
<td>&#8377;{item.price}</td>
<td>
<i
class="fa-solid fa-minus"
onClick={() => decQty(item.id)}
></i>
{item.qty}
<i
class="fa-solid fa-plus text-success"
onClick={() => incQty(item.id)}
></i>
</td>
<td>&#8377;{(item.qty * item.price).toFixed(2)}</td>
<td>
<i class="fa-solid fa-pen-to-square text-primary"></i>
<i class="fa-solid fa-trash text-danger ms-1"
onClick={()=>deleteCar(item.id)}></i>
</td>
</tr>
))}
</tbody>
<tfoot>
<tr>
<td colSpan={4}></td>
<td>Grand Total</td>
<td>&#8377;{grandTotal(filterData)}</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
);
};
export default Crud;

import React, { useState } from "react";

import logo1 from "../../assests/bt.png";
import logo2 from "../../assests/css.png";
import logo3 from "../../assests/html.png";
import logo4 from "../../assests/js.png";
import logo5 from "../../assests/bt.png";
import { Collapse } from "bootstrap/dist/js/bootstrap.min";

const Crud = () => {

const [car, setCar] = useState([
{ id: 1, brand: "Audi", image: logo1, price: 2000, qty: 3 },
{ id: 2, brand: "Polo", image: logo2, price: 10000, qty: 5 },
{ id: 3, brand: "Jaguar", image: logo3, price: 9000, qty: 9 },
 { id: 4, brand: "MiniCopper", image: logo4, price: 8000, qty: 3 },
{ id: 5, brand: "BMW", image: logo5, price: 5000, qty: 7 },
{ id: 6, brand: "Kia", image: logo1, price: 6000, qty: 1 },
]);

const incQty = (id) => {

setCar((prvCars) => {
return prvCars.map((car) => {
if (car.id === id) {
return {
...car,
qty: car.qty + 1,
};
} else {
return car;
}
});
});
};
const decQty = (id) => {
setCar((prvCars) => {
return prvCars.map((car) => {
if (car.id === id) {
return {
...car,
qty: car.qty - 1 > 0 ? car.qty - 1 : 0,
};
} else {
return car;
}
});
});
};

const deleteCar=(id)=>{
setCar((prvCars)=>{
return prvCars.filter(car=>car.id!==id)
})
}

const grandTotal=(filterData)=>{
return filterData.reduce((total,car)=>{
return total+(car.qty*car.price)
},0)
}

const[search,setSearch]=useState('')
const
filterData=car.filter((e)=>e.brand.toLowerCase().includes(search.toLowerCase()))

return (
<div className="container">
<div className="row">
<div className="col">
<div>
<h1 className="text-success">Crud Application</h1>
<h3>Search Car</h3>
<input className="form form-control" value={search}
onChange={(e)=>{setSearch(e.target.value)}}/>
 </div>
<div>
<table className="mt-4 table table-hover text-center table-striped">
<thead>
<tr className="text-uppercase">
<th>s:no</th>
<th>brand</th>
<th>image</th>
<th>price</th>
<th>qty</th>
<th>total</th>
<th>action</th>
</tr>
</thead>
<tbody>
{filterData.map((item) => (
<tr>
<td>{item.id}</td>
<td>{item.brand}</td>
<td>
<img src={item.image} width={50} height={50} />
</td>
<td>&#8377;{item.price}</td>
<td>
<i
class="fa-solid fa-minus"
onClick={() => decQty(item.id)}
></i>
{item.qty}
<i
class="fa-solid fa-plus text-success"
onClick={() => incQty(item.id)}
></i>
</td>
<td>&#8377;{(item.qty * item.price).toFixed(2)}</td>
<td>
<i class="fa-solid fa-pen-to-square text-primary"></i>
<i class="fa-solid fa-trash text-danger ms-1"
onClick={()=>deleteCar(item.id)}></i>
</td>
</tr>
))}
</tbody>
<tfoot>
<tr>
<td colSpan={4}></td>
<td>Grand Total</td>
<td>&#8377;{grandTotal(filterData)}</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
);
};
export default Crud;
import React, { useState } from "react";

const Form=()=>{
const[form,setForm]=useState({
name:"",email:'',password:''
})

const handleChange=(e)=>{
const{name,value}=e.target
setForm((prv)=>({
...prv,
[name]:value
}))
}

const handleSubmit=(e)=>{
e.preventDefault()
console.log(form)
}
return(
<>
<form onSubmit={handleSubmit}>
<div>
<label>Name <input className="form form-control"
name='name' value={form.name} onChange={handleChange}/></label>
</div>
<div>
<label>Email <input className="form form-control"
name="email" value={form.email} onChange={handleChange}/></label>
</div>
<div>
<label>Password <input className="form form-control"
name='password' value={form.password}
onChange={handleChange}/></label>
</div>
<button className="btn btn-success mt-4">submit</button>
</form>
</>
)
}
export default Form

import React, { useState } from "react";

import logo1 from '../../assests/js.png'
import logo2 from '../../assests/html.png'

const Main=()=>{
const[log,setLog]=useState(true)
const isLog=()=>{
setLog(()=>{
return false
 })
}

const isOut=()=>{
setLog(()=>{
return true
})
}
return(
<>
{
log ?
<div class="card w-25">
<img src={logo1} class="card-img-top" alt="..."/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card’s content.</p>
<button class="btn btn-success" onClick={isLog}>LoGin</button>
</div>
</div>
:
<div class="card w-25">
<img src={logo2} class="card-img-top" alt="..."/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card’s content.</p>
<button class="btn btn-danger" onClick={isOut}>LogOut</button>
</div>
</div>

</>
)
}
export default Main

import React, { useEffect, useState } from "react";

import axios from 'axios'
const Api=()=>{
const[api,setApi]=useState([])

// fetch('https://fakestoreapi.com/products')
// .then(res=>res.json())
// .then(res=>console.log(res))

// fetch('https://fakestoreapi.com/products')
// .then(res=>res.json())
// .then(res=>setApi(res))

// axios('https://fakestoreapi.com/products')
// .then(res=>console.log(res.data))

// axios('https://fakestoreapi.com/products')
 // .then(res=>setApi(res.data))

useEffect(()=>{
axios('https://fakestoreapi.com/products')
.then(res=>setApi(res.data))
},[])

return(
<>
<h1 className="text-center">Api Call</h1>
<table className="table table-hover text-center table-striped">
<tr>
<th>s:no</th>
<th>category</th>
<th>image</th>
<th>price</th>
</tr>
<tbody>
{
api.map((item)=>(
<tr>
<td>{item.id}</td>
<td>{item.category}</td>
<td><img src={item.image} width={50} height={50}
alt=""/></td>
<td>{item.price}</td>

</tr>
))
}
</tbody>
</table>
</>

)
}
export default Api

import React from "react";

import Product from "../products";

const ListAllProducts=({productCategories})=>{
return(
<>
{
productCategories.map(category=>(
<Product category={category.category_name}
Product={category.category_products}/>
))
}
</>
)
}
export default ListAllProducts

import React, { useEffect, useState } from "react";

import ListAllProducts from "./listProducts";
import axios from 'axios'
const Main=()=>{
const[productCategories,setproductCategories]=useState([])
// async function fetchProducts(){
// const res=await
fetch('https://cdn.shopify.com/s/files/1/0564/3685/0790/files/multiProduct.json')
// const products=await res.json()
// setproductCategories(products.categories)
// }
// fetchProducts()

//
axios('https://cdn.shopify.com/s/files/1/0564/3685/0790/files/multiProduct.json')
// .then(res=>setproductCategories(res.data.categories))

useEffect(()=>{

axios('https://cdn.shopify.com/s/files/1/0564/3685/0790/files/multiProduct.json')
.then(res=>setproductCategories(res.data.categories))
})
return(
<>
<ListAllProducts productCategories={productCategories}/>
</>
)
}
export default Main

import React from "react";

import c1 from '../../assests/logo.png'
const Card1=()=>{
return(
<div class="card">
<img src={c1} class="card-img-top" alt="..." width={100} height={100}/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card’s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
)
}
export default Card1

import React from "react";

import c1 from '../../assests/bg.png'

const Card2=()=>{
return(
<div class="card">
<img src={c1} class="card-img-top" alt="..." width={100} height={100}/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card’s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
)
}
export default Card2

import React from "react";

import c1 from '../../assests/bg2.png'

const Card3=()=>{
return(
<div class="card">
<img src={c1} class="card-img-top" alt="..." width={100} height={100}/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card’s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
)
}
export default Card3

import React from "react";

import c1 from '../../assests/logo.png'

const Card4=()=>{
return(
<div class="card">
<img src={c1} class="card-img-top" alt="..." width={100} height={100}/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card’s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
)
}
export default Card4

import React, { useState } from "react";

import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom'
import Men from "./men";
import Women from "./women";

const Main=()=>{
const[api,setApi]=useState([])
async function FetchApi(value){
const res=await
fetch('https://cdn.shopify.com/s/files/1/0564/3685/0790/files/multiProduct.json')
const product=await res.json()
const
filterProducts=product.categories.find(category=>category.category_name.toLowerCase
()===value.toLowerCase())
 setApi(filterProducts.category_products)
}

console.log(api)
return(
<>
<Router>
<Link to='men' onClick={()=>FetchApi('Men')}>Men</Link>
<Link to='men' onClick={()=>FetchApi('Women')}>women</Link>

<Routes>
<Route path='/men' element={<Men index={api}/>}></Route>
<Route path='/women' element={<Women index={api}/>}></Route>

</Routes>
</Router>
</>
)
}
export default Main
import React from "react";

const Men=({index})=>{
return(
<>
{
index.map((item)=>(
<img src={item.image} width={100} height={100} alt="#"/>
))
}
</>
)
}
export default Men

import React from "react";

const Women=({index})=>{
return(
<>
{
index.map((item)=>(
<img src={item.image} width={100} height={100} alt="#"/>
))
}
</>
)
}
export default Women

import React from "react";

class Child extends React.Component{

render(){
return(
<>
 {/* <img src={this.props.image}/> */}
{
this.props.data.map((item)=>(
<div className="col">
<div class="card">
<img src={item.image} class="card-img-top" alt="..."/>
<div class="card-body">
<h5 class="card-title">{item.title}</h5>
<p class="card-text">{item.price}</p>
<a href="#" class="btn btn-primary">{item.duration}</a>
</div>
</div>
</div>

))
}

</>
)
}
}
export default Child

import React from "react";

// import logo from '../../assests/obj1.png'
import Child from "./cards";
import html from '../../assests/html.png'
import css from '../../assests/css.png'
import js from '../../assests/js.png'
import bt from '../../assests/bt.png'

class Main extends React.Component{

// constructor(){
// super()
// this.state={
// name:"its react",
// image:logo
// }
// }
constructor(){
super()
this.state=[
{
image:html,
title:'HTML is used to create the structure of web pages using
elements like headings, paragraphs, links, and images.',
price:200,
duration:10
},
{
image:css,
title:'CSS styles those pages, controlling layout, colors, fonts,
and responsiveness.',
price:300,
duration:20
},
 {
image:js,
title:'JavaScript adds interactivity to web pages, like form
validation, animations, and dynamic content.',
price:400,
duration:30
},
{
image:bt,
title:'Bootstrap is a CSS framework that helps design responsive
and mobile-first websites quickly using prebuilt components.',
price:500,
duration:10
}
]

render(){

return(
<>
{/* <h1>{this.state.name}</h1>
<img src={logo} width={100} height={100}/>
<Child image={this.state.image}/> */}

<div className="container">
<div className="row">
<Child data={this.state}
/>
</div>
</div>

</>
)
}
}
export default Main

import React from "react";

const Nav=()=>{
return(
<>
<div className="navbar navbar-expand-lg bg-primary
text-white">Courses</div>
</>
)
}

export default Nav

import React from "react";

import logo from '../../assests/bg.png'
import logo2 from '../../assests/bg2.png'
const Banner=()=>{
return(
<div id="carouselExampleIndicators" className="carousel slide">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-
slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-
slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-
slide-to="2" aria-label="Slide 3"></button>
</div>
<div className="carousel-inner">
<div className="carousel-item active">
<img src={logo} className="d-block w-100" alt="..." />
</div>
<div className="carousel-item">
<img src={logo2} className="d-block w-100" alt="..."height={300}/>
</div>
<div className="carousel-item">
<img src={logo} className="d-block w-100 h-50" alt="..."/>
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>
)

}
export default Banner

import React from "react";

import logo from '../../assests/logo.png'
const Nav=()=>{
return(

<div className="container-fluid bg-secondary main">

<div className="container">
<div className="row">
<div className="col">
<div className="logo">
<img src={logo} width={80} height={80}/>
</div>
</div>
<div className="col">
<div className="nav_bar">
<a href="" className="text-white text-decoration-
none">home</a>
<a href="" className="text-white text-decoration-none
ms-4">about</a>
<a href="" className="text-white text-decoration-none
ms-4">contact</a>
 <a href="" className="text-white text-decoration-none
ms-4">blog</a>
<a href="" className="text-white text-decoration-none
ms-4">service</a>
</div>
</div>
<div className="col">
<div className="login">
<button className="btn btn-success">login</button>
</div>
</div>
</div>
</div>
</div>
)
}

export default Nav

import React from "react";

import{ToastContainer,toast} from 'react-toastify'
const Toast=()=>{
const notify=()=>{
toast.success("Success",{
position:'top-right'
})
toast.error("Error",{
position:'top-center'
})
toast.info("Info",{
position:'top-center'
})
toast.warn("Warn",{
position:'top-center'
})
}
return(
<>
<h1 className="text-center"> Toast</h1>
<button onClick={notify} className="btn btn-success">Show Toast</button>
<ToastContainer/>

</>
)
}
export default Toast

import React from "react";

class Child extends React.Component{

render(){
return(
<>
{/* <h1>{this.props.res}</h1>
<img src={this.props.logo} width={100} height={100} alt=""></img> */}

{
 this.props.products.map((item)=>(

<div className="col">
<div class="card">
<img src={item.image} class="card-img-top" alt="..." width={150} height={150}/>
<div class="card-body">
<p class="card-text">{item.title}</p>
</div>
</div>
</div>
))
}

</>

}
}
export default Child

import React from "react";

import logo from '../assests/obj1.png'
import Child from "./child";
class Fun extends React.Component{
render(){
const res="its react class comp"
const products=[
{
"id": 1,
"title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
"price": 109.95,
"description": "Your perfect pack for everyday use and walks in the forest.
Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
"rating": {
"rate": 3.9,
"count": 120
}
},
{
"id": 2,
"title": "Mens Casual Premium Slim Fit T-Shirts ",
"price": 22.3,
"description": "Slim-fitting style, contrast raglan long sleeve, three-button
henley placket, light weight & soft fabric for breathable and comfortable wearing.
And Solid stitched shirts with round neck made for durability and a great fit for
casual fashion wear and diehard baseball fans. The Henley style round neckline
includes a three-button placket.",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/71-
3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
"rating": {
"rate": 4.1,
"count": 259
}
 },
{
"id": 3,
"title": "Mens Cotton Jacket",
"price": 55.99,
"description": "great outerwear jackets for Spring/Autumn/Winter, suitable for
many occasions, such as working, hiking, camping, mountain/rock climbing, cycling,
traveling or other outdoors. Good gift choice for you or your family member. A warm
hearted love to Father, husband or son in this thanksgiving or Christmas Day.",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
"rating": {
"rate": 4.7,
"count": 500
}
},
{
"id": 4,
"title": "Mens Casual Slim Fit",
"price": 15.99,
"description": "The color could be slightly different between on the screen and
in practice. / Please note that body builds vary by person, therefore, detailed
size information should be reviewed below on the product description.",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
"rating": {
"rate": 2.1,
"count": 430
}
},
{
"id": 5,
"title": "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain
Bracelet",
"price": 695,
"description": "From our Legends Collection, the Naga was inspired by the
mythical water dragon that protects the ocean's pearl. Wear facing inward to be
bestowed with love and abundance, or outward for protection.",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 4.6,
"count": 400
}
},
{
"id": 6,
"title": "Solid Gold Petite Micropave ",
"price": 168,
"description": "Satisfaction Guaranteed. Return or exchange any order within 30
days.Designed and sold by Hafeez Center in the United States. Satisfaction
Guaranteed. Return or exchange any order within 30 days.",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 3.9,
"count": 70
}
},
 {
"id": 7,
"title": "White Gold Plated Princess",
"price": 9.99,
"description": "Classic Created Wedding Engagement Solitaire Diamond Promise
Ring for Her. Gifts to spoil your love more for Engagement, Wedding, Anniversary,
Valentine's Day...",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 3,
"count": 400
}
},
{
"id": 8,
"title": "Pierced Owl Rose Gold Plated Stainless Steel Double",
"price": 10.99,
"description": "Rose Gold Plated Double Flared Tunnel Plug Earrings. Made of
316L Stainless Steel",
"category": "jewelery",
"image": "https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg",
"rating": {
"rate": 1.9,
"count": 100
}
},
{
"id": 9,
"title": "WD 2TB Elements Portable External Hard Drive - USB 3.0 ",
"price": 64,
"description": "USB 3.0 and USB 2.0 Compatibility Fast data transfers Improve
PC Performance High Capacity; Compatibility Formatted NTFS for Windows 10, Windows
8.1, Windows 7; Reformatting may be required for other operating systems;
Compatibility may vary depending on user’s hardware configuration and operating
system",
"category": "electronics",
"image": "https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg",
"rating": {
"rate": 3.3,
"count": 203
}
},
{
"id": 10,
"title": "SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s",
"price": 109,
"description": "Easy upgrade for faster boot up, shutdown, application load and
response (As compared to 5400 RPM SATA 2.5” hard drive; Based on published
specifications and internal benchmarking tests using PCMark vantage scores) Boosts
burst write performance, making it ideal for typical PC workloads The perfect
balance of performance and reliability Read/write speeds of up to 535MB/s/450MB/s
(Based on internal testing; Performance may vary depending upon drive capacity,
host device, OS and application.)",
"category": "electronics",
"image": "https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg",
"rating": {
"rate": 2.9,
"count": 470
 }
},
{
"id": 11,
"title": "Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA
III 2.5",
"price": 109,
"description": "3D NAND flash are applied to deliver high transfer speeds
Remarkable transfer speeds that enable faster bootup and improved overall system
performance. The advanced SLC Cache Technology allows performance boost and longer
lifespan 7mm slim design suitable for Ultrabooks and Ultra-slim notebooks. Supports
TRIM command, Garbage Collection technology, RAID, and ECC (Error Checking &
Correction) to provide the optimized performance and enhanced reliability.",
"category": "electronics",
"image": "https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg",
"rating": {
"rate": 4.8,
"count": 319
}
},
{
"id": 12,
"title": "WD 4TB Gaming Drive Works with Playstation 4 Portable External Hard
Drive",
"price": 114,
"description": "Expand your PS4 gaming experience, Play anywhere Fast and easy,
setup Sleek design with high capacity, 3-year manufacturer's limited warranty",
"category": "electronics",
"image": "https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg",
"rating": {
"rate": 4.8,
"count": 400
}
},
{
"id": 13,
"title": "Acer SB220Q bi 21.5 inches Full HD (1920 x 1080) IPS Ultra-Thin",
"price": 599,
"description": "21. 5 inches Full HD (1920 x 1080) widescreen IPS display And
Radeon free Sync technology. No compatibility for VESA Mount Refresh Rate: 75Hz -
Using HDMI port Zero-frame design | ultra-thin | 4ms response time | IPS panel
Aspect ratio - 16: 9. Color Supported - 16. 7 million colors. Brightness - 250 nit
Tilt angle -5 degree to 15 degree. Horizontal viewing angle-178 degree. Vertical
viewing angle-178 degree 75 hertz",
"category": "electronics",
"image": "https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg",
"rating": {
"rate": 2.9,
"count": 250
}
},
{
"id": 14,
"title": "Samsung 49-Inch CHG90 144Hz Curved Gaming Monitor (LC49HG90DMNXZA) –
Super Ultrawide Screen QLED ",
"price": 999.99,
"description": "49 INCH SUPER ULTRAWIDE 32:9 CURVED GAMING MONITOR with dual 27
inch screen side by side QUANTUM DOT (QLED) TECHNOLOGY, HDR support and factory
calibration provides stunningly realistic and accurate color and contrast 144HZ
HIGH REFRESH RATE and 1ms ultra fast response time work to eliminate motion blur,
ghosting, and reduce input lag",
"category": "electronics",
"image": "https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg",
"rating": {
"rate": 2.2,
"count": 140
}
},
{
"id": 15,
"title": "BIYLACLESEN Women's 3-in-1 Snowboard Jacket Winter Coats",
"price": 56.99,
"description": "Note:The Jackets is US standard size, Please choose size as
your usual wear Material: 100% Polyester; Detachable Liner Fabric: Warm Fleece.
Detachable Functional Liner: Skin Friendly, Lightweigt and Warm.Stand Collar Liner
jacket, keep you warm in cold weather. Zippered Pockets: 2 Zippered Hand Pockets, 2
Zippered Pockets on Chest (enough to keep cards or keys)and 1 Hidden Pocket
Inside.Zippered Hand Pockets and Hidden Pocket keep your things secure. Humanized
Design: Adjustable and Detachable Hood and Adjustable cuff to prevent the wind and
water,for a comfortable fit. 3 in 1 Detachable Design provide more convenience, you
can separate the coat and inner as needed, or wear it together. It is suitable for
different season and help you adapt to different climates",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg",
"rating": {
"rate": 2.6,
"count": 235
}
},
{
"id": 16,
"title": "Lock and Love Women's Removable Hooded Faux Leather Moto Biker
Jacket",
"price": 29.95,
"description": "100% POLYURETHANE(shell) 100% POLYESTER(lining) 75% POLYESTER
25% COTTON (SWEATER), Faux leather material for style and comfort / 2 pockets of
front, 2-For-One Hooded denim style faux leather jacket, Button detail on waist /
Detail stitching at sides, HAND WASH ONLY / DO NOT BLEACH / LINE DRY / DO NOT
IRON",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/81XH0e8fefL._AC_UY879_.jpg",
"rating": {
"rate": 2.9,
"count": 340
}
},
{
"id": 17,
"title": "Rain Jacket Women Windbreaker Striped Climbing Raincoats",
"price": 39.99,
"description": "Lightweight perfet for trip or casual wear---Long sleeve with
hooded, adjustable drawstring waist design. Button and zipper front closure
raincoat, fully stripes Lined and The Raincoat has 2 side pockets are a good size
to hold all kinds of things, it covers the hips, and the hood is generous but
doesn't overdo it.Attached Cotton Lined Hood with Adjustable Drawstrings give it a
real styled look.",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/71HblAHs5xL._AC_UY879_-2.jpg",
 "rating": {
"rate": 3.8,
"count": 679
}
},
{
"id": 18,
"title": "MBJ Women's Solid Short Sleeve Boat Neck V ",
"price": 9.85,
"description": "95% RAYON 5% SPANDEX, Made in USA or Imported, Do Not Bleach,
Lightweight fabric with great stretch for comfort, Ribbed on sleeves and neckline /
Double stitching on bottom hem",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg",
"rating": {
"rate": 4.7,
"count": 130
}
},
{
"id": 19,
"title": "Opna Women's Short Sleeve Moisture",
"price": 7.95,
"description": "100% Polyester, Machine wash, 100% cationic polyester
interlock, Machine Wash & Pre Shrunk for a Great Fit, Lightweight, roomy and highly
breathable with moisture wicking fabric which helps to keep moisture away, Soft
Lightweight Fabric with comfortable V-neck collar and a slimmer fit, delivers a
sleek, more feminine silhouette and Added Comfort",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg",
"rating": {
"rate": 4.5,
"count": 146
}
},
{
"id": 20,
"title": "DANVOUY Womens T Shirt Casual Cotton Short",
"price": 12.99,
"description": "95%Cotton,5%Spandex, Features: Casual, Short Sleeve, Letter
Print,V-Neck,Fashion Tees, The fabric is soft and has some stretch., Occasion:
Casual/Office/Beach/School/Home/Street. Season: Spring,Summer,Autumn,Winter.",
"category": "women's clothing",
"image": "https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg",
"rating": {
"rate": 3.6,
"count": 145
}
}
]

return(
<>
<h1>its react props</h1>
<div className="container">
<div className="row">
<Child logo={logo} res={res} products={products}/>
</div>
 </div>

</>
)
}
}
export default Fun

import React from "react";

const Product=({category,Product})=>{
return(
<>
<h1>{category}</h1>
{
Product.map((item)=>(
<>
<img src={item.image} width={100} height={100} alt="#"/>
<p>{item.title}</p>
</>
))
}
</>
)
}
export default Product

import React from "react";

const Fun=()=>{
return(
<>
<button className="btn btn-success">login</button>
<h1 className="bg-success text-white">bg color</h1>
</>
)
}
export default Fun