Scribd
Upload
20 views6 pages

Lab 4

Uploaded by

siddarth sai you tube
Copyright
© © All Rights Reserved
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
20 views6 pages

Lab 4

Uploaded by

siddarth sai you tube
Copyright
© © All Rights Reserved
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/ 6

IN LAB-4

NAME:K BHAVANA
REG NO: 2200030550
In lab:
Exercise 1:
Create a form with Material-Ul components (such as text fields, select fields,
and checkboxes) to collect user information and validate the input.
Ans :
// App.js import React from 'react'; import

NavigationBar from './NavigationBar';

function App() { return (

<div>

<NavigationBar />

{/* Other content of your application */}

</div>

);

export default App;

// NavigationBar.js import React from 'react'; import { AppBar,

Toolbar, Typography, Button } from '@mui/material';

const NavigationBar = () => {

return (

<AppBar position="static">

<Toolbar>

<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>

Your Logo

</Typography>

<Button color="inherit">Home</Button>

<Button color="inherit">About</Button>

<Button color="inherit">Services</Button>

<Button color="inherit">Contact</Button>
</Toolbar>

</AppBar>

);

};

export default NavigationBar;

Exercise 2: Implement a responsive navigation bar using Material-Ul's


AppBar component. The navigation bar should have a logo, menu items, and
handle mobile responsiveness Ans :
import React, { useState } from 'react';

import { TextField, Button, Checkbox, FormControlLabel, Select, MenuItem, FormControl, InputLabel } from
'@mui/material'; const Form = () => { const

[formData, setFormData] = useState({

firstName: '',

lastName: '',

email: '', age:

'',

receiveUpdates: false,

gender: ''

});

const handleChange = (event) => { const {

name, value, checked } = event.target;

setFormData(prevState => ({

...prevState,

[name]: name === 'receiveUpdates' ? checked : value

}));

};

const handleSubmit = (event) => {

event.preventDefault();

// Perform form validation and submit data

console.log(formData);

};

return (

<form onSubmit={handleSubmit}>

<TextField label="First

Name" name="firstName"

value={formData.firstName}

onChange={handleChange}

required

/>

<br />

<TextField

label="Last Name"

name="lastName"
value={formData.lastName}

onChange={handleChange}

required

/>

<br /> <TextField

label="Email"

type="email"

name="email"

value={formData.email}

onChange={handleChange}

required

/>

<br /> <TextField

label="Age"

type="number"

name="age"

value={formData.age}

onChange={handleChange}

required

/>

<br />

<FormControl>

<InputLabel>Gender</InputLabel>

<Select

value={formData.gender}

name="gender"

onChange={handleChange}

required

>

<MenuItem value="male">Male</MenuItem>

<MenuItem value="female">Female</MenuItem> <MenuItem value="other">Other</MenuItem>

</Select>

</FormControl>

<br />

<FormControlLabel
control={ <Checkbox

checked={formData.receiveUpdates}

onChange={handleChange}

name="receiveUpdates"

color="primary"

/>

label="Receive Updates"

/>

<br />

<Button type="submit" variant="contained" color="primary">

Submit

</Button>

</form>

);

};

export default Form;

Post lab:
Question 1: What are some commonly used Material-Ul components, and how
do you use them?
Ans :
import React from 'react'; import { createTheme, ThemeProvider,

Button } from '@mui/material';

const theme = createTheme({


palette: { primary: { main: '#3f51b5',

// Custom primary color

},

secondary: { main: '#f50057', // Custom

secondary color

},

},

});

const ThemedButton = () => {

return (

<ThemeProvider theme={theme}>

<Button variant="contained" color="primary">

Click me

</Button>

</ThemeProvider>

);

};

export default ThemedButton;

You might also like