NAME-SNEHIT GARG SECTION-A1 ROLLNO-11212506
PRACTICAL:-8
AIM:- create a online shopping page with reat component that will consist in a naviga on
bar at the top of the page , a main sec on in the middle that will contain all the shopping
items informa on and a footer at the bo om of the page with a li le informa on about the
page, like social network icons and the copyright informa on.
//App.js
import './App.css';
import Navbar from './Components/Navbar';
import SearchBar from './Components/SearchBar';
import { useState, useEffect } from 'react';
import {Route,Routes} from "react-router-dom";
import Home from './Components/Home';
import About from "./Components/About";
import Contact from './Components/Contactus';
import Crads from './Components/cards'
import Cards from './Components/cards';
func on App() {
const url = "h ps://fakestoreapi.com/products";
const [products, setProducts] = useState([]);
async func on getProducts() {
try {
const response = await fetch(url);
const parsedData = await response.json();
console.log(Data);
setProducts(parsedData);
} catch (error) {
console.log(error)
useEffect(() => {
getProducts();
},[])
NAME-SNEHIT GARG SECTION-A1 ROLLNO-11212506
return (
<div className=" h-screen w-screen overflow-x-hidden bg-[#C1E7F8]">
<Navbar />
<SearchBar></SearchBar>
<div><Routes>
<Route path="/" element={loader?<Spinner/>:<Cards products={Data}/>} ></Route>
<Route path='/contact' element={<Contact></Contact>}></Route>
<Route path="/home" element={<Home></Home>}></Route>
<Route path="/about" element={<About></About>}></Route>
<Route path="*" element={<h1>Page Not Found 404</h1>}></Route>
</Routes></div>
</div>
);
export default App;
//index.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter >
<App />
</BrowserRouter>
//searchbar.js
import React from 'react'
import { useState } from 'react';
func on SearchBar() {
const [Text, setText] = useState("")
NAME-SNEHIT GARG SECTION-A1 ROLLNO-11212506
const handleSearchChange = (e) => {
e.preventDefault();
setText(e.target.value);
console.log(e.target.value);
return (
<div className='flex items-center jus fy-center'>
<input onChange={handleSearchChange}
type="text" placeholder='Search for your Product'
className=' w-[800px] h-10 rounded-full bg-gray-900 mx-auto border-white
border-color:inherit mt-10 mb-4 text-2xl placeholder:text-center caret-whit text-white text-center '
value={Text}
/>
</div>
export default SearchBar
//Navbar.js
import React from 'react'
import { NavLink } from "react-router-dom";
func on Navbar() {
return(
<div className="flex flex-row jus fy-around bg-slate-700 my-10 rounded-full items-center py-4 text-black
mx-auto ">
<div className=''> <NavLink to="/">
<div className="ml-5">
<img src="../logo.png" className="h-10 rounded-full w-20" />
</div>
</NavLink></div>
<div >
<NavLink to="/home">
<p>Home</p>
</NavLink>
NAME-SNEHIT GARG SECTION-A1 ROLLNO-11212506
</div>
<div >
<NavLink to="/about">
<p>About</p>
</NavLink>
</div>
<div >
<NavLink to="/contact">
<p>contact Us</p>
</NavLink>
</div
</div>);
//Home.js
export default Navbar
import React from 'react
func on Home() {
return (
<div>Home</div>
export default Home
//contactus.js
import React from 'react
func on Contactus() {
return (
<div>Contact Us</div>
export default Contactus
//Cards.js
import Card from "./card";
NAME-SNEHIT GARG SECTION-A1 ROLLNO-11212506
func on Cards({products,filterdata}) {
// console.log("products=>",products);
// const [ tle,se tle]=useState("Flipkart");
console.log(products);
return (
<div>
<div className=' flex jus fy-around text-gray-800 my-2 font font-semibold text-4xl'>
<div className=''>Flipkart</div>
<div className='ml-10'>Amazon</div>
<div className=' ml-20'> Gem</div>
<div className=' pl-10'>India Mart</div>
</div>
<div className=''>
products.map(product=>
return (
<div className='flex'>
<Card product={product} key={product.id} tle={"Flipkart"}></Card>
<Card product={product} key={product.id} tle={"Amazon"} ></Card>
<Card product={product} key={product.id} tle={"Gem"} ></Card>
<Card product={product} key={product.id} tle={"India_Mart"} ></Card>
</div>
})
</div>
</div>
//Card.js
import React, { useEffect, useState } from 'react'
import { NavLink } from "react-router-dom"
NAME-SNEHIT GARG SECTION-A1 ROLLNO-11212506
import { useNavigate } from 'react-router-dom';
import { BsCurrencyDollar } from "react-icons/bs";
func on Card({product, tle}) {
const navigate = useNavigate();
console.log("product=>",product);
console.log(product.thumbnail);
return (
<div className=' place rela ve bg-[#FFF] opacity-80 text-black '>
<img
src={ tle==="Amazon"?(product.thumbnail_amazon):( tle==="Flipkart"?(product.thumbnail_flipkart):( tle===
"Gem"?(product.thumbnail_gem):(! tle==="India_Mart"?(product.thumbnail):(product.thumbnail_indiamart))
))}
className=" w-[360px] aspect-[1/1] object-cover "></img>
<h1 className="text-4xl mt-2 flex text-black
">{ tle==="Amazon"?(product.price_amazon):( tle==="Flipkart"?(product.price_flipkart):( tle==="Gem"?(pro
duct.price_gem):( tle==="India_Mart"?(product.price_indiamart):(product.price))))}
<span className="mt-1" ><BsCurrencyDollar/> </span></h1>
<h2 className=' text-black text-lg mt-2 leading-7 mr-24' >
<span className=' text-black font-bold'>Title:</span>
<br/>
{product. tle}
</h2>
{/* <p className=' text-gray-300'><span className=' font-bold text-white flex'>Title :</span>{product. tle
}</p> */}
<p className=' text-black'><span className=' font-bold text-black flex'>Descrip on
:</span>{product.descrip on}</p>
{/* <p><span className=' text-white font-bold'>Discount :</span> {product.discountPercentage}</p>
<p><span className=' text-white font-bold'>Stock : </span>{product.stock}</p> */}
{/* <p>{product.thumbnail}</p> */}
{/* <img scr={product.thumbnail}></img> */}
<div className=' flex items-end' onClick={()=>
window.loca on.href= tle==="Amazon"?(product.url_amazon):(product.url_flipkart);
}}>
<bu on className=" px-7 mb-4 mt-7 bg-black z-10 transi on-all
NAME-SNEHIT GARG SECTION-A1 ROLLNO-11212506
dura on-200 py-3 hover:bg-black text-white hover:border rounded-3xl opacity-100 border-black">View on
{ tle}</bu on></div>
</div>
export default Card
export default Cards
OUTPUT:-
