0% found this document useful (0 votes)

30 views7 pages

Lab 5

The document discusses implementing a responsive product catalog using React and React Bootstrap. It includes creating a navigation bar and grid layout for product cards. Filtering and sorting products based on selected options is also implemented.

Uploaded by

siddarth sai you tube

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

30 views7 pages

Lab 5

Uploaded by

siddarth sai you tube

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 7

LAB-5

Name: K BHAVANA

REG NO: 2200030550

In lab:
Exercise 1:
Design a responsive web page that displays a product catalog.
The page should include a navigation bar at the top, a grid of
product cards in the main content area. Utilize React
Bootstrap components to create the layout, styling, and
interactivity.
Ans:
import React from 'react';
import {Navbar, Container, Nav, Card, Row, Col} from 'react-bootstrap';
function App () {
// Sample product data
const products = [

{id: 1, name: 'Product 1', price: '$10', image: 'product1.jpg’},

{id: 2, name: 'Product 2', price: '$20', image: 'product2.jpg’},
{id: 3, name: 'Product 3', price: '$30', image: 'product3.jpg' },
];
return (
<div>
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand href="#home">Product Catalog</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Products</Nav.Link>
{/* Add more navigation links as needed */}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Container className="mt-4">
<Row>
{products.map((product) => (
<Col key={product.id} xs={12} sm={6} md={4} lg={3}>
<Card className="mb-4">
<Card.Img variant="top" src={product.image} />
<Card.Body>
<Card.Title>{product.name}</Card.Title>
<Card.Text>{product.price}</Card.Text>
{/* Add more details about the product if needed */}
<a href="#" className="btn btn-primary">View Details</a>
</Card.Body>
</Card>
</Col>
))}
</Row>
</Container>
</div>
);
}
export default App;

Exercise 2: Implement a feature to filter and sort the product

catalog based on the selected filter options.
Ans :
import React, { useState } from 'react';

import { Navbar, Container, Nav, Card, Row, Col, Form } from 'react-bootstrap';

function ProductCatalog() {

const [products, setProducts] = useState([

{ id: 1, name: 'Product 1', price: 10, image: 'product1.jpg' },

{ id: 2, name: 'Product 2', price: 20, image: 'product2.jpg' },

{ id: 3, name: 'Product 3', price: 30, image: 'product3.jpg' },

]);

const [filter, setFilter] = useState('');

const [sortBy, setSortBy] = useState('price');

const handleFilterChange = (event) => {

setFilter(event.target.value);

};

const handleSortChange = (event) => {

setSortBy(event.target.value);

};
// Filter and sort products

let filteredProducts = products.filter((product) =>

product.name.toLowerCase().includes(filter.toLowerCase())

);

filteredProducts.sort((a, b) => {

if (sortBy === 'price') {

return a.price - b.price;

} else {

return a.name.localeCompare(b.name);

});

return (

<div>

<Navbar bg="dark" variant="dark" expand="lg">

<Navbar.Brand href="#home">Product Catalog</Navbar.Brand>

<Navbar.Toggle aria-controls="basic-navbar-nav" />

<Navbar.Collapse id="basic-navbar-nav">

<Nav.Link href="#home">Home</Nav.Link>

<Nav.Link href="#link">Products</Nav.Link>

{/* Add more navigation links as needed */}

</Nav>

</Navbar.Collapse>

</Container>

</Navbar>

<Form>

<Form.Group controlId="formFilter">

<Form.Label>Filter by Name:</Form.Label>

<Form.Control

type="text"
placeholder="Enter product name"

value={filter}

onChange={handleFilterChange}

</Form.Group>

<Form.Group controlId="formSort">

<Form.Label>Sort by:</Form.Label>

<Form.Control as="select" value={sortBy} onChange={handleSortChange}>

<option value="price">Price</option>

</Form.Control>

</Form.Group>

</Form>

<Row>

{filteredProducts.map((product) => (

<Col key={product.id} xs={12} sm={6} md={4} lg={3}>

<Card.Img variant="top" src={product.image} />

<Card.Body>

<Card.Title>{product.name}</Card.Title>

<Card.Text>${product.price}</Card.Text>

{/* Add more details about the product if needed */}

<a href="#" className="btn btn-primary">

View Details

</a>

</Card.Body>

</Card>

</Col>

))}

</Row>

</Container>

</div>
);

export default ProductCatalog;

Post lab:
Question 1: How do you create a navigation bar using
Bootstrap?
Ans :
import React from 'react';

import { Navbar, Nav } from 'react-bootstrap';

function App() {

return (

<Navbar bg="light" expand="lg">

<Navbar.Brand href="#home">Navbar</Navbar.Brand>