Ex.

No:01
CREATION OF PORTFOLIO WEBSITE
Date:

Aim:

To create personal portfolio website using react.js.

Components:

In ‘src’ folder create the following components:

1.App.js

2.Home.js

3.About.js

4.Contact.js

5.Project.js

6.Navbar.js

7.Navbar.css

8.Footer.js

9.Footer.css

10.Heroimg.js

11.Heroimg2.js

1.App.js
import React from "react";

import "./index.css";
import Home from "./routes/Home";
import About from"./routes/About";
import Contact from "./routes/Contact";
import Project from "./routes/Project";

import {Route,Routes} from "react-router-dom";

function App() {
return (
<>
<Routes>
<Route path="/" element={<Home/>} />
 <Route path="/project" element={<Project/>} />
<Route path="/about" element={<About/>} />
<Route path="/contact" element={<Contact/>} />
</Routes>
</>
);
}
export default App;

2.Home.js
import React from 'react';
import Navbar from "../components/Navbar";
import Heroimg from "../components/Heroimg";
import Footer from "../components/Footer";

const Home = () => {

return (
<div>
<Navbar/>
<Heroimg/>
<Footer/>
</div>
)
}

export default Home;

3.About.js
import React from 'react';
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Heroimg2 from '../components/Heroimg2';

const About = () => {

return (
<div>
<Navbar/>
<Heroimg2 heading="ABOUT" text="I'm a Data Analyst." />

<Footer/>
</div>
)
}

export default About;

4.Contact.js
import React from 'react';
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Heroimg2 from '../components/Heroimg2';
const Contact = () => {
return (
<div>
<Navbar/>
<Heroimg2 heading="CONTACT" text="Feel free to Contact me"/>
<Footer/>
</div>
)
}

export default Contact;

5.Project.js
import React from 'react';
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Heroimg2 from "../components/Heroimg2";

const Project = () => {

return (
<div>
<Navbar/>
<Heroimg2 heading="PROJECTS" text="Some of my works.."/>

<Footer/>
</div>
)
}

export default Project;

6.Navbar.js
import "./Navbar.css";
import {Link} from "react-router-dom";
import {FaBars, FaTimes} from "react-icons/fa";
import React , {useState} from 'react';

const Navbar = () => {

const [click,setClick]= useState(false);

const handleClick = () => setClick(!click);
 const [color,setColor] = useState(false);
const changeColor =() => {
if (window.scrollY >=100){
setColor(true);
}else{
setColor(false);
}
};

window.addEventListener("scroll",changeColor);

return (
<div className={color? "header header-bg" : "header"} >
<Link to="/">
<h1>PORTFOLIO</h1>
</Link>
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/project">Project</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
<div className="hamburger" onClick={handleClick}>
{click ? (<FaTimes size={20} style={{ color:"#fff" }}/>):(<FaBars size={20}
style={{ color:"#fff" }}/>) }
</div>
</div>
)
}

export default Navbar;

7.Navbar.css
.header{
display:flex;
justify-content: space-between;
align-items: center;
padding:1rem;
position:fixed;
width:100%;
height:90px;
z-index:10;
}
.header-bg{
background-color: rgba(0,0,0,0.85);
transition:0.5s;
}

.nav-menu{
display:flex;
}
.nav-menu li{
padding:0 1rem;
}

.nav-menu li a{
font-size:1.2rem;
font-weight: 500;
}
.hamburger{
display:none;
}

@media screen and (max-width:1040px){

.nav-menu{
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height:100vh;
background: rgba(0,0,0,0.9);
position: absolute;
top:0;
left:-100%;
z-index:-3;
transition:0.3s;
}
.nav-menu.active{
left:0;
}
.nav-menu li{
padding:1rem 0;

}
.nav-menu li a {
font-size: 2rem;
}
.hamburger{
display:initial;
}
}
8.Footer.js
import "./Footerstyles.css";

import React from 'react';

import {FaFacebook, FaHome, FaLinkedin, FaMailBulk, FaPhone, FaTwitter} from "react-
icons/fa";

const Footer = () => {

return (
<div className="footer">
<div className="footer-container">
<div className="left">
<div className="location">
<FaHome size={20} style={{color:"#fff", marginRight: "2rem"}}/>
<div>
<p>575/c Nehru street,</p>
<p>Sirumugai.</p>
</div>
</div>
</div>
<div className="phone">
<h4>
<FaPhone size={20} style={{color:"#fff", marginRight: "2rem"}}/>
6382520460
</h4>
</div>
<div className="email">
<h4>
<FaMailBulk size={20} style={{color:"#fff", marginRight: "2rem"}}/>
[email protected]
</div>
<div className="right">
<h4>About Me</h4>
<p>
This is Dhivya. I am a student in KGiSL Institute of Technology.I am
persuing my UG degree.
</p>
</div>
<div className="social">
<FaFacebook size={30} style={{color:"#fff", marginRight: "2rem"}}/>
<FaTwitter size={30} style={{color:"#fff", marginRight: "2rem"}}/>
<FaLinkedin size={30} style={{color:"#fff", marginRight: "2rem"}}/>
</div>
</div>
</div>
)
}

export default Footer;

9.Footer.css
.footer{
width:100%;
padding: 6rem 0;
background-color: rgba(19,19,19,0.8);
}

.footer-container{
max-width:1140px;
margin:auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 40px;
}

.left{
height:100%;
max-width:100%;
display:flex;
flex-direction: column;
padding:1rem;
}

.location{
display:flex;
margin-bottom: 0.8rem;
}

.location p{
line-height: 30px;
}

.right{
height:100%;
max-width: 100%;
display:flex;
flex-direction:column;
padding:1rem;
}

.social{
margin-top: 1rem;
}

h4{
font-size:1.2rem;
padding-bottom :0.7rem;
}

p{
font-size: 1.2rem;
}
@media screen and (max-width:640px){
.footer-container{
grid-template-columns:1fr;
}
}

10.Heroimg.js
import "./Heroimgstyles.css";

import React from 'react';

import introimg from "../assets/My-photo.jpeg";
import {Link} from "react-router-dom";

const Heroimg = () => {

return (
<div className="hero">
<div className="mask">
<img className="into-img" src={introimg} alt="introimg"/>
</div>
<div className="content">
<p>HI, I'M DHIVYA</p>
<h1>DATA ANALYST </h1>
<div>
<Link to="/project" className="btn">PROJECTS</Link>
<Link to="/contact" className="btn-light">CONTACT</Link>
</div>
</div>
</div>
)
}

export default Heroimg;

11.Heroimg2.js
import "./Heroimg2styles.css";

import React, { Component } from 'react';

class Heroimg2 extends Component {

render () {
return (
<div className="hero-img">
<div className="heading">
<h1 >{this.props.heading}</h1>
<p className="line">{this.props.text}</p>

</div>
</div>
);
 }

};

export default Heroimg2;

OUTPUT:

Home

Project
About

Contact
Result:

Thus, the creation of portfolio website using react.js is successfully completed

and the output is verified.
 Ex.No:02
CREATION OF TO-DO LIST
Date:

Aim:

To create a to-do list using react.js.

Components:

Create the following components in ‘src’ folder:

1.App.js

2.EditTodoForm.js

3.Todo.js

4.TodoForm.js

5.TodoWrapper.js

6.App.css

1.App.js
import './App.css';
import TodoWrapper from './components/TodoWrapper';

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

export default App;

2.EditTodoForm.js
import React,{useState} from 'react';

const EditTodoForm = ({editTodo, task}) => {

const [value,setValue] = useState(task.task)

const handleSubmit = e =>{

 e.preventDefault();

editTodo(value, task.id);

setValue("")
}
return (
<form className='TodoForm' onSubmit={handleSubmit}>
<input type="text" className='todo-input' value={value} placeholder='Update Task'
onChange={(e) => setValue(e.target.value)}/>
<button type='submit' className='todo-btn'>
Update Task
</button>
</form>
)
}

export default EditTodoForm;

3.Todo.js
import React from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';

const Todo = ({task, toggleComplete, deleteTodo , editTodo}) => {

return (
<div className='Todo'>
<p onClick={() => toggleComplete(task.id)} className={`${task.completed ? '
completed':"" }`}>{task.task}</p>
<div>
<FontAwesomeIcon icon={faPenToSquare} onClick={() => editTodo(task.id)}/>
<FontAwesomeIcon icon={faTrash} onClick={()=>deleteTodo(task.id)}/>
</div>
</div>
)
}

export default Todo;

4.TodoForm.js
import React,{useState} from 'react';

const TodoForm = ({addTodo}) => {

const [value,setValue] = useState("")

const handleSubmit = e =>{

e.preventDefault();
 addTodo(value);

setValue("")
}
return (
<form className='TodoForm' onSubmit={handleSubmit}>
<input type="text" className='todo-input' value={value} placeholder='What is the
task today?' onChange={(e) => setValue(e.target.value)}/>
<button type='submit' className='todo-btn'>
Add task
</button>
</form>
)
}

export default TodoForm;

5.TodoWrapper.js
import React,{useState} from 'react';
import TodoForm from './TodoForm';
import {v4 as uuidv4} from 'uuid';
import Todo from './Todo';
import EditTodoForm from './EditTodoForm';
uuidv4();

const TodoWrapper = () => {

const [todos,setTodos] = useState([ ])
const addTodo = todo => {
setTodos([...todos, {id: uuidv4(), task:todo, completed: false, isEditing:false
}])
console.log(todos);
}

const toggleComplete = id => {

setTodos(todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed}
:todo))
}

const deleteTodo = id => {

setTodos(todos.filter(todo => todo.id !== id))
}

const editTodo = id =>{

setTodos(todos.map(todo => todo.id === id ? {...todo, isEditing: !todo.isEditing} :
todo ))
}

const editTask = (task,id) =>{

setTodos(todos.map(todo => todo.id === id ? {...todo,task, isEditing:
!todo.isEditing} :todo))
}
 return (
<div className='TodoWrapper'>
<h1>Get Things Done!</h1>
<TodoForm addTodo={addTodo}/>
{todos.map((todo, index) => (
todo.isEditing ? (
<EditTodoForm editTodo={editTask} task={todo}/>
) :(
<Todo task={todo} key={index} toggleComplete={toggleComplete}
deleteTodo={deleteTodo} editTodo={editTodo}/>
)

))}

</div>
)
}

export default TodoWrapper;

6.App.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #8758ff;
display: flex;
justify-content: center;
align-items: center;
}

.App {
text-align: center;
}

h1 {
color: #fff;
margin-bottom: 0.5rem;
font-size: 1.75rem;
}

.TodoWrapper {
background: #1A1A40;
margin-top: 5rem;
padding: 2rem;
border-radius: 5px;
}

.TodoForm {
width: 100%;
}

.todo-input {
outline: none;
background: none;
border: 1px solid #8758ff;
padding: 0.5rem 1rem;
margin-top: 1rem;
margin-bottom: 2rem;
width: 300px;
color: #fff;
}

.todo-input::placeholder {
color: #ffffff4d;
}

.todo-btn {
background: #8758ff;
color: #fff;
border: none;
padding: 0.55rem;
cursor: pointer;

.Todo {
display: flex;
justify-content: space-between;
align-items: center;
background: #8758ff;
color: #fff;
padding: 0.75rem 1rem;
border-radius: 5px;
margin-bottom: 1rem;
cursor: pointer;
}

.fa-trash {
margin-left: 0.75rem;
}

.completed {
color: #c5aeff;
text-decoration: line-through;
}
OUTPUT:

To-do List

Result:

Thus, the creation of portfolio website using react.js is successfully completed

and the output is verified.
 Ex No:03

CREATION OF MICROBLOG
Date:

Aim:

To create Microblog using react.js.

Components:

In ‘src’ folder create the following components:

1. App.js

2. App.css

3. ImageUpload.js

4. LikeButton.js

5. RadioButtonGroup.js

6. PostForm.js

7. Post.js ; Posts.js

1.App.js

import React, { useState } from 'react';

import PostForm from './PostForm';

import LikeButton from './LikeButton';

import RadioButtonGroup from './RadioButtonGroup';

import ImageUpload from './ImageUpload';

import './App.css';

const App = () => {

const [posts, setPosts] = useState([]);

const addPost = (newPost) => {

setPosts([...posts, { ...newPost, id: Date.now() }]);

};

const handleEdit = (id, newContent) => {

const updatedPosts = posts.map(post =>

post.id === id ? { ...post, content: newContent } : post

);

setPosts(updatedPosts);

};

const handleDelete = id => {

const updatedPosts = posts.filter(post => post.id !== id);

setPosts(updatedPosts);

};

return (

<div className="App">

<h1>Microblog</h1>

<ul>

<PostForm onSubmit={addPost} />

{posts.map(post => (

<li key={post.id}>

<div className='box'>

<ImageUpload />

<div>
 <div className='title'>

<h5>{post.title} : </h5>

</div>

<div className='content'>

<p>{post.content}</p>

</div>

<button onClick={() => handleEdit(post.id, prompt('Edit post:',

post.content))}>Edit</button>

<br></br>

<br></br>

<button onClick={() => handleDelete(post.id)}>Delete</button>

<br></br>

<br></br>

<LikeButton />

<br></br>

<br></br>

<br></br>

<RadioButtonGroup />

</div>

</div>

</li>

))}

</ul>

</div>

);

}
export default App;

2.App.CSS
input{

padding-left: 40%;

padding-right: 40%;

text-align: center;

height: 30px;

h1{

text-align: center;

color:rgb(21, 100, 136);

button{

background-color:rgb(4, 4, 50);

color:white;

margin-left:85%;

.App{

color:sandybrown;

background-image: url('./zzz.jpeg');

p{

font-size:large;

}
.box {

width: 650px;

height: 900px;

border: 2px;

border-color: rgb(65, 65, 162);

margin:auto;

color: black;

background:linear-gradient(to right,rgb(142, 201, 228),rgb(4, 32, 49));

/* Add more styling as needed */

.title{

color:rgb(3, 25, 31);

font-size: xx-large;

.content{

font-size: smaller;

.radio{

margin-left: 30%;

img{

padding-left: 10%;

width: 500px;

height: 200px;

}
p{

color:cornsilk;

font-size: x-large;

text-align:left;

h5{

font-size: xx-large;

font-family: Georgia, 'Times New Roman', Times, serif;

color:rgb(7, 4, 26);

h4{

color:purple;

3.ImageUpload.js

import React, { useState } from 'react';

function ImageUpload() {

const [selectedImage, setSelectedImage] = useState(null);

const handleImageChange = (event) => {

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = (e) => {

setSelectedImage(e.target.result);
 };

reader.readAsDataURL(file);

};

const handleDeleteImage = () => {

setSelectedImage(null);

};

return (

<div>

<h4>Image Upload :</h4>

<input type="file" accept="image/*" onChange={handleImageChange} />

{selectedImage && (

<div>

<img src={selectedImage} alt="Uploaded" />

<button onClick={handleDeleteImage}>Delete</button>

</div>

)}

</div>

);

export default ImageUpload;

4.LikeButton.js

import React, { useState } from 'react';

const LikeButton = () => {

const [count, setCount] = useState(0);

const handleLike = () => {

setCount(count + 1);

};

return (

<div className="like-button">

<button onClick={handleLike}>

<span role="img" aria-label="Like">👍</span>

<span>{count}</span>

</button>

</div>

);

};

export default LikeButton;

5.RadioButtonGroup.js

import React, { useState } from 'react';

function RadioButtonGroup() {

const [selectedOption, setSelectedOption] = useState(null);

const handleOptionChange = (event) => {

 setSelectedOption(event.target.value);

};

return (

<div className='radio'>

<h4>Suggest Anyone....</h4>

<label>

<input

type="radio"

value="option1"

checked={selectedOption === "option1"}

onChange={handleOptionChange}

/>

Good

</label>

<label>

<input

type="radio"

value="option2"

checked={selectedOption === "option2"}

onChange={handleOptionChange}

/>

OK

</label>

<label>

<input

type="radio"
 value="option3"

checked={selectedOption === "option3"}

onChange={handleOptionChange}

/>

Worst

</label>

</div>

);

export default RadioButtonGroup;

6.PostForm.js

import React, { useState } from 'react';

const PostForm = ({ onSubmit }) => {

const [title, setTitle] = useState('');

const [content, setContent] = useState('');

const handleSubmit = (e) => {

e.preventDefault();

onSubmit({ title, content });

setTitle('');

setContent('');

};
 return (

<form onSubmit={handleSubmit}>

<input

type="text"

placeholder="title"

value={title}

onChange={(e) => setTitle(e.target.value)}

/>

<input

type="text"

placeholder="content"

value={content}

onChange={(e) => setContent(e.target.value)}

/>

<button type="submit">Submit</button>

<br></br>

</form>

);

};

export default PostForm;

7.Post.js

import React from 'react';

const Post = ({ post, onDelete }) => {

return (

<div className="post">

<h2>{post.title}</h2>

<p>{post.content}</p>

<button onClick={() => onDelete(post.id)}>Delete</button>

</div>

);

};

export default Post;

Posts.js

import React from 'react';

const Post = ({ post, handleEdit }) => {

return (

<div className="post">

<h2>{post.title}</h2>

<p>{post.content}</p>

<button onClick={() => handleEdit(post.id, prompt('Edit post:',

post.content))}>Edit</button>

</div>

);

};

export default Post;

OUTPUT:
Result:

Thus the creation of Microblog using react.js is successfully completed and the
output is verified.
 Ex No:04

CREATION OF FOOD DELIVERY WEBSITE

Date:

Aim:

To create food delivery website using react.js.

Components:

In ‘src’ folder create the following components:

1. App.js

2. App.css

3.Home.js

4.Menu.js

5.Contact.js

6.orderplacing.js

7.Payment.js

1.App.js :

import { BrowserRouter,Routes, Route } from "react-router-dom";

import Home from "./pages/Home";

import Contact from "./pages/Contact";

import Menu from "./pages/Menu";

import Pagenotfound from "./pages/Pagenotfound";

import Payment from "./pages/payment";

import Amount from "./pages/OrderPlacing";

function App(){

return(

<div>
 <BrowserRouter>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/contact" element={<Contact/>} />

<Route path="/menu" element={<Menu />} />

<Route path="*" element={<Pagenotfound/>} />

<Route path="payment" element={<Payment/>}/>

<Route path="amount" element={<Amount/>}/>

</Routes>

</BrowserRouter>

</div>

);

export default App;

2.App.CSS :
.App {
text-align: center;

.App-logo {

height: 40vmin;

pointer-events: none;

@media (prefers-reduced-motion: no-preference) {

.App-logo {

animation: App-logo-spin infinite 20s linear;

 }

.App-header {

background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;

.App-link {

color: #61dafb;

@keyframes App-logo-spin {

from {

transform: rotate(0deg);

to {

transform: rotate(360deg);

3.Home.js :

import React from 'react'

import Layout from '../components/Layout/Layout';

import {Link} from "react-router-dom";

import images from '../images/pic1.jpg';

import '../styles/HomeStyles.css';

const Home = () => {

return (

<Layout>

<div className='home' style={{backgroundImage:`url(${images})`}} >

<div className='headerContainer'>

<h1>Food Website</h1>

<p>Best Food In India</p>

<Link to="/menu">

<button>ORDER NOW </button>

</Link>

</div>

</div>

</Layout>

export default Home;

4.Menu.js :

import React from 'react';

import {MenuList} from '../data/data';

import Layout from '../components/Layout/Layout';

import {Link} from "react-router-dom";

import { Box, Card,CardActionArea, CardContent, CardMedia, Typography}from '@mui/material';

import '../styles/MenuStyle.css';
const Menu = () => {

return (

<Layout>

<div className='pay'>

<Link to="/payment">

<button>Click Here </button>

</Link>

</div>

<Box sx={{display:"flex",flexWrap:'wrap',justifyContent:'center'}}>

MenuList.map(menu =>(

<Card sx={{maxWidth:"390px",display:"flex",m:2}}>

<CardActionArea>

<CardMedia sx={{minHeight:'400px'}} component={'img'} src={menu.image}

alt={menu.name}/>

<CardContent>

<Typography variant='h5' gutterBottom component={'div'}>

{menu.name}

</Typography>

<Typography variant='body2' >

{menu.description}

</Typography>

</CardContent>

</CardActionArea>

</Card>

))

}
 </Box>

</Layout>

export default Menu

5.Contact.js :

import React from 'react'

import Layout from '../components/Layout/Layout'

import { Box,Paper,TableContainer,TableHead,TableRow,Table,TableCell,Typography, TableBody

} from '@mui/material'

import CallIcon from '@mui/icons-material/Call';

import MailIcon from '@mui/icons-material/Mail';

import DeliveryDiningIcon from '@mui/icons-material/DeliveryDining';

import LocalShippingIcon from '@mui/icons-material/LocalShipping';

const Contact = () => {

return (

<Layout>

<Box sx={{ my:10,ml:10}}>

<Typography variant='h3'>Contact My Restaurant</Typography>

</Box>

<Box sx={{m:3,width:"600px"}}>

<TableContainer component={Paper}>

<Table aria-label="contact table">

<TableHead>

<TableRow>

<TableCell sx={{bgcolor:"black",color:"white"}} align='center'>Contact Details</TableCell>

</TableRow>

</TableHead>

<TableBody>

<TableRow>

<TableCell>

<CallIcon sx={{color:"blue",pt: 1}} /> 123 456 7890

</TableCell>

</TableRow>

<TableRow>

<TableCell>

<MailIcon sx={{color:"red",pt: 1}} /> [email protected]

</TableCell>

</TableRow>

<TableRow>

<TableCell>

<DeliveryDiningIcon sx={{color:"green",pt: 0}} />On Time Delivery

</TableCell>

</TableRow>

<TableRow>

<TableCell>

<LocalShippingIcon sx={{color:"black",pt: 0}} />Free Shipping

</TableCell>

</TableRow>

</TableBody>
 </Table>

</TableContainer>

</Box>

<br></br>

</Layout>

export default Contact

6.orderplacing.js :

import React, { useState } from 'react';

import Layout from '../components/Layout/Layout'

import {Link} from "react-router-dom";

import LocalPizzaIcon from '@mui/icons-material/LocalPizza';

import LunchDiningIcon from '@mui/icons-material/LunchDining';

import BakeryDiningIcon from '@mui/icons-material/BakeryDining';

import FastfoodOutlinedIcon from '@mui/icons-material/FastfoodOutlined';

import LocalDrinkOutlinedIcon from '@mui/icons-material/LocalDrinkOutlined';

import FoodBankOutlinedIcon from '@mui/icons-material/FoodBankOutlined';

import '../styles/AmountStyle.css';

function App() {

const [cart, setCart] = useState([]);

const [total, setTotal] = useState(0);

const addToCart = (item) => {

const updatedCart = [...cart, item];

setCart(updatedCart);

// Calculate the total price

const totalPrice = updatedCart.reduce((acc, currentItem) => acc + currentItem.price, 0);

setTotal(totalPrice);

};

return (

<Layout>

<div className='amount'>

<h1>Food Delivery App</h1>

<br></br>

<br></br>

<div className='MENU'>

<h2>Menu</h2>

<ul>

<li>

<LocalPizzaIcon />

<button onClick={() => addToCart({ name: 'Pizza', price: 200 })}>PIZZA</button>

</li>

<br></br>

<li>

<LunchDiningIcon />

<button onClick={() => addToCart({ name: 'Burger', price: 150 })}>BURGER</button>

</li>

<br></br>

<li>

<BakeryDiningIcon />
 <button onClick={() => addToCart({ name: 'Sandwitch', price: 100
})}>SANDWITCH</button>

</li>

<br></br>

<li>

<FoodBankOutlinedIcon/>

<button onClick={() => addToCart({ name: 'Chicken', price: 300 })}>CHICKEN</button>

</li>

<br></br>

<li>

<LocalDrinkOutlinedIcon />

<button onClick={() => addToCart({ name: 'Cool Drinks', price: 250 })}>COOL
DRINKS</button>

</li>

<br></br>

<li>

<FastfoodOutlinedIcon />

<button onClick={() => addToCart({ name: 'Combo', price: 500 })}>COMBO</button>

</li>

</ul>

</div>

<br></br>

<br></br>

<div className='cart'>

<h2>Cart</h2>

<p>Number of items in the cart: {cart.length}</p>

<p>Total price: Rs.{total.toFixed(2)}</p>

<ul>

{cart.map((item, index) => (

<li key={index}>

{item.name} - Rs.{item.price.toFixed(2)}
 </li>

))}

</ul>

</div>

<div className='redirect'>

<Link to="/contact">

<button>click Here</button>

</Link>

</div>

</div>

<br></br>

<br></br>

</Layout>

);

export default App;

7.Payment.js :

import React from 'react';

import {MenuList} from '../data/data';

import Layout from '../components/Layout/Layout';

import {Link} from "react-router-dom";

import { Box, Card,CardActionArea, CardContent, CardMedia, Typography}from '@mui/material';

import '../styles/Style.css';

const Menu = () => {

return (
<Layout>

<div className='id'>

<Link to="/amount">

<button>Click Here </button>

</Link>

</div>

<Box>

MenuList.map(menu =>(

<Card >

<CardActionArea>

<CardContent>

<Typography variant='h5' gutterBottom component={'div'}>

{menu.name}

</Typography>

<Typography variant='body2'>

{menu.description}

</Typography>

<Typography>

{menu.price}

</Typography>

</CardContent>

</CardActionArea>

</Card>

))

</Box>

</Layout>
 )

export default Menu

OUTPUT:
Result:

Thus the creation of Food Delivery Website using react.js is successfully completed
and the output is verified.
 Ex No:05

CREATION OF ECOMMERCE WEBSITE

Date:

Aim:

To create ecommerce website using react.js.

Components:

In ‘src’ folder create the following components:

1. App.js

2. App.css

3.Navbar.js

4.Home.js

Pages :

5.ShopContext.js

6.LoginSignup.js

7.Product.js

8.ShopCategory.js

1.App.js :

import './App.css';

import Navbar from './components/Navbar/Navbar';

import {BrowserRouter , Routes,Route}from 'react-router-dom';

import Shop from './pages/Shop';

import ShopCategory from './pages/ShopCategory';

import Product from './pages/Product';

import Cart from './pages/Cart';

import LoginSignup from './pages/LoginSignup';

import Footer from './components/Footer/Footer';

import men_banner from './components/Assets/banner_mens.png'

import women_banner from './components/Assets/banner_women.png'

import kid_banner from './components/Assets/banner_kids.png'

function App() {

return (

<div>

<BrowserRouter>

<Navbar />

<Routes>

<Route path='/' element={<Shop/>}/>

<Route path='/mens' element={<ShopCategory banner = {men_banner} category="men"/>}/>

<Route path='/womens' element={<ShopCategory banner = {women_banner}

category="women"/>}/>

<Route path='/kids' element={<ShopCategory banner={kid_banner} category="kid"/>}/>

<Route path="product" element={<Product/>}>

<Route path=':productId' element={<Product/>}/>

</Route>

<Route path='/cart' element={<Cart/>}/>

<Route path='/login' element={<LoginSignup/>}/>

</Routes>

<Footer />

</BrowserRouter>

</div>

);

}
export default App;

2.App.CSS :

.App {

text-align: center;

.App-logo {

height: 40vmin;

pointer-events: none;

@media (prefers-reduced-motion: no-preference) {

.App-logo {

animation: App-logo-spin infinite 20s linear;

.App-header {

background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;
}

.App-link {

color: #61dafb;

@keyframes App-logo-spin {

from {

transform: rotate(0deg);

to {

transform: rotate(360deg);

3.Navbar.js :

import React, { useContext, useState } from 'react'

import './Navbar.css'

import logo from '../Assets/logo.png';

import cart_icon from '../Assets/cart_icon.png'

import { Link } from 'react-router-dom';

import { ShopContext } from '../../context/ShopContent';

const Navbar = () => {

const [ menu,setMenu] = useState("shop");

const { getTotalCartItems }= useContext(ShopContext)

 return (

<div className='navbar'>

<div className='nav-logo'>

<img src={logo} alt=""/>

<p>MY FASHION</p>

</div>

<ul className='nav-menu'>

<li onClick={()=>{setMenu("shop")}}><Link to='/'>Shop</Link>{menu ===

"shop"?<hr/>:<></>}</li>

<li onClick={()=>{setMenu("mens")}}><Link to='/mens'>Men</Link>{menu ===

"mens"?<hr/>:<></>}</li>

<li onClick={()=>{setMenu("womens")}}><Link to='/womens'>Women</Link>{menu ===

"womens"?<hr/>:<></>}</li>

<li onClick={()=>{setMenu("kids")}}><Link to='/kids'>Kids</Link>{menu ===

"kids"?<hr/>:<></>}</li>

</ul>

<div className="nav-login-cart">

<Link to='/login'><button>login</button></Link>

<Link to='/cart'><img src={cart_icon} alt=''/></Link>

<div className='nav-cart-count'>{getTotalCartItems()}</div>

</div>

</div>

export default Navbar

4.Home.js :

import React from 'react'

import Hero from '../components/Hero/Hero';

import Popular from '../components/Popular/Popular';

import Offer from '../components/Offers/Offer';

import Newcollection from '../components/Newcollection/Newcollection';

import NewsLetter from '../components/NewsLetter/NewsLetter';

const Shop = () => {

return (

<div>

<Hero/>

<Popular />

<Offer />

<Newcollection />

<NewsLetter />

</div>

export default Shop

5.ShopContext.js :

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

import all_product from "../components/Assets/all_product";

export const ShopContext = createContext(null);

const getDefaultcart = ()=>{

let cart = {};

for(let index =0 ; index < all_product.length+1; index ++){

 cart[index] = 0;

return cart;

const ShopContextProvider = (props) => {

const [cartItem, setcartItem] = useState(getDefaultcart());

const addToCart = (itemId) =>{

setcartItem((prev)=>({...prev,[itemId]:prev[itemId]+1}))

console.log(cartItem);

const removeFromCart = (itemId) =>{

setcartItem((prev)=>({...prev,[itemId]:prev[itemId]-1}))

const getTotalCartAmount = () => {

let totalAmount = 0;

for(const item in cartItem){

if(cartItem[item]>0){

let itemInfo = all_product.find((product) =>product.id===Number(item));

totalAmount += itemInfo.new_price * cartItem[item];

return totalAmount;

const getTotalCartItems = () =>{

 let totalItem = 0;

for(const item in cartItem){

if(cartItem[item]>0){

totalItem +=cartItem[item];

return totalItem;

Const contextvalue =
{getTotalCartItems,getTotalCartAmount,all_product,cartItem,addToCart,removeFromCart};

return(

<ShopContext.Provider value={contextvalue}>

{props.children}

</ShopContext.Provider>

export default ShopContextProvider;

6.LoginSignup.js

import React from 'react'

import './css/LoginSignup.css'

const LoginSignup = () => {

return (

<div className='loginsignup'>

<div className="loginsignup-container">

<h1>
 Sign Up

</h1>

<div className="loginsignup-fields">

<input type='text' placeholder='your Name' />

<input type="email" placeholder='Email Address'/>

<input type="password" placeholder='password'/>

</div>

<button>Continue</button>

<p className="loginsignup-login">Already have an account? <span>Login here </span></p>

<div className="loginsignup-agree">

<input type='checkbox' name='' id='' />

<p>By Continuing , i agree to the terms of use & privacy policy.</p>

</div>

</div>

</div>

export default LoginSignup

7.Product.js

import React, { useContext } from 'react'

import { ShopContext } from '../context/ShopContent';

import { useParams } from 'react-router-dom';

import Breadcrum from '../components/Breadcrums/Breadcrums';

import ProductDisplay from '../components/ProductDisplay/ProductDisplay';

import Description from '../components/DescriptionBox/Description';

import Related from '../components/Related Products/Related';

const Product = () => {

const {all_product} = useContext(ShopContext);

const {productId} = useParams();

const product = all_product.find((e)=>e.id === Number(productId));

return (

<div>

<Breadcrum product = {product}/>

<ProductDisplay product={product}/>

<Description />

<Related />

</div>

export default Product

8.ShopCategory.js

import React, { useContext } from 'react'

import './css/Shoopcategory.css'

import { ShopContext } from '../context/ShopContent'

import dropdown_icon from '../components/Assets/dropdown_icon.png'

import Item from '../components/xxx/xxx'

const ShopCategory = (props) => {

const {all_product } = useContext(ShopContext);

return (

<div className='shop-category'>

<img className='shopcategory-banner' src={props.banner} alt=''/>

 <div className='shopcategory-indexsort'>

<p>

<span>Showing 1-12</span>out of 36 products

</p>

<div className="shopcategory-sort">

sort by <img src={dropdown_icon} alt=" "/>

</div>

</div>

<div className="shopcategory-products">

{all_product.map((item,i)=>{

if (props.category === item.category){

return <Item key={i} id={item.id} name={item.name} image={item.image}

new_price={item.new_price} old_price={item.old_price} />

else{

return null;

})}

</div>

<div className="shopcategory-load">

Explore More

</div>

</div>

export default ShopCategory

OUTPUT:
Result:

Thus the creation of Ecommerce Website using react.js is successfully completed and
the output is verified
EX.NO:
CREATE LEAVE MANAGEMENT SYSTEM
DATE:
APP USING REACT JS

Aim:

To create Leave Management system app using react.js.

Components:

In ‘src’ folder create the following components:

1.App.js

2.Index.js

3.AdminHouse.js

4.AdminLogin.js

5.Maintanance.js

6.Navbar.js

7.Pagenotfound.js

APP.JS:
INDEX.JS:

ADMINHOME.JS:
ADMINLOGIN.JS:
MAINTAINANCE.JS:
NAVBAR.JS:

PAGENOTFOUND.JS:
OUTPUT:
Result:

Thus, the creation of Leave management system app using react.js is successfully
completed and the output is verified.
EX.NO:
CREATE PROJECT DASHBOARD
DATE:
APP USING REACT JS

Aim:

To create Project Dashboard app using react.js.

Components:

In ‘src’ folder create the following components:

1.App.js

2.Index.js

3.Card.js

4.Button.js

5.Input.js

6.List.js

APP.JS:
INDEX.JS:

BUTTON.JS:

CARD.JS:
INPUT.JS:

LIST.JS:
OUTPUT:
Result:

Thus, the creation of Project Dashboard app using react.js is successfully completed
and the output is verified.
EX.NO:
CREATE ONLINE SURVEY
DATE:
APPLICATION USING REACT JS

Aim:

To create online survey application using react.js.

Components:

In ‘src’ folder create the following components:

1.App.js

2.Index.js

3.Card.js

4.Button.js

5.Input.js

APP.JS:
INDEX.JS:

BUTTON.JS:
INPUT.JS:
OUTPUT:
Result:

Thus, the creation of Online Survey application using react.js is successfully

completed and the output is verified.