1.

Develop a portfolio website for yourself which gives details about yourself for a
potential recruiter.

Program:
[Link]
import React from "react";
import { VStack, Flex, Heading, Spacer } from "@chakra-ui/layout";
import { IconButton } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-
mode"; import {
FaSun,
FaMoon,
FaInstagram,
FaGithub,
FaLinkedin,
} from "react-icons/fa";
import Header from
"./components/Header"; import Profile
from "./components/Profile"; import
Social from "./components/Social";
const App = () => {
const { colorMode, toggleColorMode } =
useColorMode(); const isDark = colorMode ===
"dark";
return (
<VStack p="5">
<Flex w="100%">

<Heading ml="8" size="md" fontWeight="semibold"

color="cyan.400"> TspsRam Parasuram
</Heading>
<Spacer />
<IconButton
icon={<FaLinkedin />}
isRound="true"
onClick={() => [Link]("[Link]
></IconButton>
<IconButton
ml={2}
icon={<FaInstagram />}
isRound="true"
onClick={() => [Link]("[Link]
></IconButton>
<IconButton
ml={2}
icon={<FaGithub />}
isRound="true"
onClick={() => [Link]("[Link]
></IconButton>
<IconButton
ml={8}
icon={isDark ? <FaSun /> : <FaMoon />}
isRound={true}
onClick={toggleColorMode}
></IconButton>
</Flex>
<Header />
<Social />
<Profile />
</VStack>
);
};
export default App;
/components/[Link]

import { Button } from "@chakra-ui/button";

import { useColorMode } from "@chakra-ui/color-
mode"; import { Image } from "@chakra-ui/image";
import { Circle, Stack, Flex, Box, Text } from "@chakra-ui/layout";
import { useMediaQuery } from "@chakra-ui/media-
query"; import React from "react";
const Header = () => {
const { colorMode } =
useColorMode(); const isDark =
colorMode === "dark";
const [isNotSmallerScreen] = useMediaQuery("(min-
width:600px)"); return (
<Stack>
{isNotSmallerScreen && (

<Circle
position="absolute"
bg="blue.100"
opacity="0.1"
w="300px" h="300px"
alignSelf="flex-end"
/>
)}
<Flex
direction={isNotSmallerScreen ? "row" : "column"}
spacing="200px"
p={isNotSmallerScreen ? "32" : 0}
alignSelf="flex-start"
>
<Box mt={isNotSmallerScreen ? 0 : 16} align="flex-start">
<Text fontSize="5xl" fontWeight="semibold">
Hi, I am
</Text>
<Text fontSize="7xl"
fontWeight="bold"
bgGradient="linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1)
100%)" bgClip="text"
>
Full Stack Developer
</Text>
<Text color={isDark ? "gray.200" : "gray.500"}>
Mentor, Developer at tspsRam. Mentor by Day and Freelancer by Night.
</Text>
<Button mt={8} colorScheme="blue">
Hire Me
</Button>
</Box>
<Image
alignSelf="center"
mt={isNotSmallerScreen ? "0" : "12"}
mb={isNotSmallerScreen ? "0" : "12"}
borderRadius="full"
backgroundColor="transparent"
boxShadow="lg"
boxSize="300px"
src="[Link]
80&c=7&r=0&o= 5&dpr=1.3&pid=1.7"
zIndex={1}
/>
</Flex>
</Stack>
);
};
export default Header;
/components/[Link]
import React from "react";
import { useMediaQuery } from "@chakra-ui/media-
query"; import { Box, Flex, Heading, Text } from
"@chakra-ui/layout"; import Icon from "@chakra-
ui/icon";
import { DiReact, DiNodejsSmall, DiAws } from "react-icons/di";

const Profile = () => {

const [isNotSmallerScreen] = useMediaQuery("(min-
width:600px)"); return (
<Flex
direction={isNotSmallerScreen ? "row" : "column"}
w="100%"
maxWidth={{ base: "100vh", md: "130vh", lg: "130vh", xl: "130vh" }}
>
<Box alignSelf="center" px="32" py="16">
<Heading fontWeight="extrabold" color="cyan.500"
size="4xl"> 3+
</Heading>
<Text fontSize="2xl" color="gray.400">
Years of Experience
</Text>
</Box>
<Box alignSelf="center" px="32" py="16">
<Text fontWeight="bold" fontSize="2xl">
Product Specialist and Developer, specialised in web app development.
</Text>
<Flex direction={isNotSmallerScreen ? "row" : "column"} mt={8}>
<Flex rounded="xl"
direction="column"
mt={4}bg="blue.400"
h="30vh" w="30vh"
justify="flex-end"
>
<Icon color="white" p="4" w="24" h="24" as={DiReact} />
<Text color="white" p="4" fontSize="xl"
fontWeight="semibold"> React
</Text>
</Flex>
<Flex rounded="xl"
direction="column"
mt={4} bg="gray.100"
h="30vh" w="30vh"
justify="flex-end"
ml={isNotSmallerScreen ? 4 : 0}
_hover={{ bg: "teal.400" }}
>
<Icon color="black" p="4" w="24" h="24" as={DiNodejsSmall} />
<Text color="black" p="4" fontSize="xl"
fontWeight="semibold"> Nodejs
</Text>
</Flex>
<Flex rounded="xl"
direction="column"
mt={4} bg="gray.100"
h="30vh"w="30vh"
justify="flex-end"
ml={isNotSmallerScreen ? 4 : 0}
_hover={{ bg: "green.400" }}
>
<Icon color="black" p="4" w="24" h="24" as={DiAws} />
<Text color="black" p="4" fontSize="xl"
fontWeight="semibold"> AWS
</Text>
</Flex>
</Flex>
</Box>
</Flex>
);
};
export default Profile;
/components/[Link]
import Icon from "@chakra-ui/icon";
import { HStack } from "@chakra-
ui/layout"; import React from "react";
import { FaFacebookF, FaYoutube, FaInstagram, FaTwitter } from "react-icons/fa";
const Social = () => {
return (
<HStack spacing={24}>
<Icon as={FaFacebookF} boxSize={50} />
<Icon as={FaYoutube} boxSize={50} />
<Icon as={FaInstagram} boxSize={50} />
<Icon as={FaTwitter} boxSize={50} />
</HStack>
);};
export default Social;
Output:
2. Create a web application to manage the TO-DO list of users, where users can
login and manage their to-do items

Program:
[Link]
import { useEffect, useState} from
'react' import './[Link]'
import Form from './Components/Form'
import Todo from './Components/Todo'
let App = () => {
let [ToDoArray, setToDoArray] =
useState([]); let [In,setIn]=useState(-1);
let [Str,setStr]=useState('');
let CollectInput = (Value) =>
{
if(Str!=='')
{
let Temp=[...ToDoArray];
Temp[In]=Value;
[Link]("Todo",[Link](Temp)
); setToDoArray(Temp);
setStr('');
setIn(-1);
}
else
{
let Temp=[Value,...ToDoArray];
[Link]("Todo",[Link](Temp)
); setToDoArray(Temp);
}
}
let Delete=(Ind)=>
{
let newArr=[...ToDoArray];
[Link](Ind,1);
[Link]("Todo",[Link](newA
rr)); setToDoArray(newArr);
}
let EditText=(Ind,Elem)=>
{
setIn(Ind);
setStr(Elem);
};
useEffect(()=>
{
let
Ar=[Link]([Link]("Todo"));
if(Ar)
setToDoArray(Ar);
},[])
return (
<div className='App'>
<div className="App-Content">
<Form Take={CollectInput}
Icon={In===-1?"fa-solid fa-plus":"fa-solid fa-marker"}
String={Str===''? '':Str}
/>
{
[Link] === 0 ? <div className="alert alert-success mt-2"
role="alert"> No To Do Available Yet !!
</div> :
<Todo GetTodos={ToDoArray} Del={Delete} Edit={EditText}/>
}
</div>
</div>
)}
export default App;
/Components/[Link]
import { useEffect, useState } from
'react' import './[Link]'
let Form=(Props)=>
{

let [Text,setText]=useState('');
let HandleInput=(Inp)=>
{
setText(Inp);
}
let HandleClick=()=>
{
Text===''?alert("Text Filed Can't Be
Empty"):[Link](Text) setText('');
}
useEffect(() => {
setText([Link])
}, [[Link]])
return(
<div className="Form">
<input type="text" placeholder='Enter any To Do ...' value={Text}
onChange={(Event)=>{HandleInput([Link])}}/>
<div className='Plus' onClick={()=>{HandleClick()}}>
<i className={[Link]} ></i>
</div>
</div>
)}export default Form;
/Components/[Link]
import React from 'react'
import './[Link]'
const Todo = (Props) => {
return (
<div className='Todo'>
{
[Link]((Elem,Ind)=>
{
return(
<div className="All-Todo" key={Ind}>
<p>{Elem}</p>
<i className="fa-solid fa-marker E " onClick={()=>{[Link](Ind,Elem)}}></i>
<i className="fa-solid fa-circle-xmark X" onClick={()=>{[Link](Ind)}}></i>
</div>
)
})
}
</div>
)
}
export default Todo;
Output:
3. Create a simple micro blogging application (like twitter) that allows people
to post their content which can be viewed by people who follow them.

Program:
[Link]
import React, { useState } from "react";
const App = () => {
const [posts, setPosts] = useState([]);
const [following, setFollowing] = useState(false);
const handlePostSubmit = (content) =>
{ const newPost = {
id: [Link](),
content: content,
};
setPosts([...posts, newPost]);
};
const handleFollowToggle = () => {
setFollowing((prevFollowing) =>
!prevFollowing);
};
return (
<div style={{
margin: "20px", padding:
"10px", maxWidth:
"500px", textAlign:
"center", border: "1px solid
#ccc", borderRadius:
"10px",
}}
>
<h1 style={{ color: "teal" }}>Colorful Micro Blogging App</h1>
<button
onClick={handleFollowToggle}
style={{
backgroundColor: following ? "red" : "green",
color: "white",
borderRadius: "5px",
padding: "5px 10px",
marginBottom: "10px",
}}
>
{following ? "Unfollow" : "Follow"}
</button>
<PostForm onSubmit={handlePostSubmit} />
<div>
{[Link]((post) => (
<Post key={[Link]} content={[Link]} />
))}
</div>
</div>
);
};
const PostForm = ({ onSubmit }) =>
{ const [content, setContent] =
useState("");
const handleSubmit = (e) => {
[Link]();
onSubmit(content);
setContent("");
};
Return (
<form onSubmit={handleSubmit}>
<textarea
value={content}
onChange={(e) =>
setContent([Link])}
placeholder="What's on your mind?"
rows="4"
cols="50"
required
style={{ marginBottom: "10px", padding: "5px" }}
/>
<br />
<button
type="submit"
style={{
backgroundColor: "teal",
color: "white",
borderRadius: "5px",
padding: "5px 10px",
}}>
Post
</button>
</form>
);
};
const Post = ({ content })
=> { return (
<div style={{
backgroundColor: "lightblue",
padding: "10px",
marginBottom: "10px",
borderRadius: "5px",
}}
>
{content}
</div>
);
};
export default App;
Output:
4. Create a food delivery website where users can order food from a
particular restaurant listed in the website.

Program:
[Link]
import React, { useState } from "react";
const restaurantsData = [
{
id: 1,
name: "Delicious Diner",
menu: [
{ id: 101, name: "Burger", price: 8.99 },
{ id: 102, name: "Pizza", price: 12.99 },
{ id: 103, name: "Salad", price: 6.99 },
],
},
// Add more restaurant data as needed
];
const App2 = () => {
const [selectedRestaurant, setSelectedRestaurant] =
useState(null); const [order, setOrder] = useState([]);
const handleRestaurantSelect = (restaurant) => {
setSelectedRestaurant(restaurant);
setOrder([]);
};
const handleOrderItemAdd = (item) => {
setOrder([...order, item]);
};
const handleOrderItemRemove = (itemId) => {
setOrder([Link]((item) => [Link] !== itemId));
};
const handleOrderSubmit = () => {
// Handle order submission (e.g., display a confirmation, send to
backend, etc.) alert("Order placed successfully!");
};
return (
<div style={{ backgroundColor: "#f9f9f9", padding: "20px" }}>
<h1 style={{ color: "#3f51b5", marginBottom:
"20px" }}> Food Delivery Website
</h1>
<div>
<h2 style={{ color: "#009688", marginBottom: "10px" }}>Restaurants</h2>
<ul style={{ listStyle: "none", padding: "0" }}>
{[Link]((restaurant) => (
<li key={[Link]}>
<button style={{
backgroundColor: "#4caf50", color:
"#fff",
padding: "8px 16px", border:
"none", marginRight: "10px",
marginBottom: "10px",
}}
onClick={() => handleRestaurantSelect(restaurant)}
>
{[Link]}
</button>
</li>
))}
</ul>
</div>
{selectedRestaurant && (
<div>
<h2 style={{ color: "#009688", marginBottom: "10px" }}>
Menu - {[Link]}
</h2>
<ul style={{ listStyle: "none", padding: "0" }}>
{[Link]((item) => (
<li key={[Link]}>
<span style={{ color: "#3f51b5", marginRight: "10px" }}>
{[Link]}
</span>
<span style={{ color: "#009688" }}>₹{[Link]}</span>
<button style={{
backgroundColor: "#3f51b5", color:
"#fff",
padding: "5px 10px", border:
"none", marginLeft: "10px",
margin: "20px",
}}
onClick={() => handleOrderItemAdd(item)}
>
Add to Order
</button>
</li>
))}
</ul>
</div>
)}
{[Link] > 0 && (
<div>
<h2 style={{ color: "#009688", marginBottom: "10px" }}>Your Order</h2>
<ul style={{ listStyle: "none", padding: "0" }}>
{[Link]((item) => (
<li key={[Link]} style={{ marginBottom: "5px" }}>
<span style={{ color: "#3f51b5", marginRight: "10px" }}>
{[Link]}
</span>
<span style={{ color: "#009688" }}>₹{[Link]}</span>
<button style={{
backgroundColor: "#e91e63", color:
"#fff",
padding: "5px 10px", border:
"none", marginLeft: "10px",
}}
onClick={() => handleOrderItemRemove([Link])}
>
Remove
</button>
</li>
))}
</ul>
<button style={{
backgroundColor: "#4caf50",
color: "#fff",
padding: "8px 16px",
border: "none",
marginTop: "10px",
}}onClick={handleOrderSubmit}
>
Place Order
</button>
</div>
)}
</div>
);
};
export default App2;
Output:
[Link] a classifieds web application to buy and sell used products.

Program:
[Link]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl:
'./[Link]', styleUrls:
['./[Link]'],
})
export class
AppComponent { title =
'Classifieds App'; products
=[
{
id: 1,
name: 'Used Laptop',
description: 'Good condition, 8GB RAM, 256GB
SSD', price: 400,
},
{
id: 2,
name: 'Smartphone',
description: 'Brand new, 128GB storage, 5.5"
display', price: 250,
},
{
id: 3,
name: 'Gaming Console',
description: 'Includes two controllers and three
games', price: 300,
},
{
id: 4,
name: 'Wireless Headphones',
description: 'Noise-cancelling, 20-hour battery
life', price: 100,
},
];
onBuyClick(product: any) {
alert(`You have bought ${[Link]} for $${[Link]}`);
}
}
[Link]
<div class="app-container">
<h1 class="app-title">{{ title }}</h1>
<div class="vie">
<div class="product-details" *ngFor="let product of products">
<h2 class="product-name">{{ [Link] }}</h2>
<p class="product-description">{{ [Link] }}</p>
<p class="product-price">Price: ${{ [Link] }}</p>
<button class="buy-button" (click)="onBuyClick(product)">Buy Now</button>
</div>
</div>
</div>
[Link]
/* Global styles */
body {
font-family: Arial, sans-
serif; margin: 0;
padding: 0;
}
/* App container styles */
.app-container {
background-color:
#f9f9f9;
padding: 20px;
text-align: center;
}
/* Title styles */
.app-title {
color: #3f51b5;
margin-bottom: 20px;
}
.vie {
display: flex;
}
/* Product details styles */
.product-details {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
max-width: 400px;
margin: 0 auto;
}
.product-name {
color: #009688;
margin-bottom: 10px;
}
.product-description
{ color: #3f51b5;
}
.product-price {
color: #009688;
}
.buy-button {
background-color:
#4caf50; color: #fff;
padding: 8px 16px;
border: none;
cursor: pointer;
margin-top: 10px;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.buy-button:hover {
background-color:
#45a049;
}
Output:
6. Develop a leave management system for an organization where users can
apply different types of leaves such as casual leave and medical leave.
They also can view the available number of days

Program:
[Link].s
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl:
'./[Link]', styleUrls:
['./[Link]']
})
export class AppComponent {
title = 'leave-management-system';
}
[Link]
<div class="app-container">
<h1 class="app-title">Leave Management System</h1>
<nav>
<ul class="nav-links">
<li><a routerLink="/apply-leave">Apply Leave</a></li>
<li><a routerLink="/leave-balance">Leave Balance</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>
[Link]
/* Reset default margin and padding for the entire
page */ body,
h1,
h2,
h3,
h4,
h5,
h6,
p,

ul,
li {
margin: 0;
padding: 0;
}
/* Set a background color for the app-container */
.app-container {
background-color:
#f9f9f9; padding: 20px;
font-family: Arial, sans-serif;
}
/* Style the title */
.app-title {
color: #3f51b5;
margin-bottom: 20px;
}
/* Style the navigation menu */
.nav-links {

list-style: none;
display: flex;
gap: 20px;
}
.nav-links li {
display: inline;
}

.nav-links li a {
text-decoration :none ;
color: #009688;
font-weight: bold;
padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.2s ease;
}
.nav-links li a:hover {
background-color:
#009688; color: #fff;
}
[Link]
import { Component } from '@angular/core';
@Component({
selector: 'app-leave-application',
templateUrl: './leave-
[Link]', styleUrls:
['./[Link]'],
})
export class LeaveApplicationComponent
{ leaveTypes = ['Casual Leave', 'Medical
Leave']; selectedLeaveType!: string;
startDate!: string;
endDate!: string;
reason!: string;
value: string = '';
casualLeaveBalance = 10;
medicalLeaveBalance = 5;
applyLeave() {
if ([Link] === 'Casual Leave' && [Link] > 0) {
[Link] -= 1;
[Link]('Casual Leave applied.');
} else if ([Link] === 'Medical Leave' && [Link] > 0) {
[Link] -= 1;
[Link] = `Medical Leave applied.
Leave Type: ${[Link]}
Start Date: ${[Link]}
End Date: ${[Link]}
Reason: ${[Link]}
Remaining Leave Balance In
Casual:${[Link]} Remaining Leave Balance In
Medical:${[Link]}`;
} else {
[Link]('Insufficient leave balance for the selected leave type.');
}
}
}
[Link]
<div class="leave-application">
<h2 class="app-title">Apply for Leave</h2>
<div>
<label for="leaveType" class="input-label">Leave Type:</label>
<select id="leaveType" class="input-field" [(ngModel)]="selectedLeaveType">
<option *ngFor="let type of leaveTypes" [value]="type">{{ type }}</option>
</select>
</div>
<div>
<label for="startDate" class="input-label">Start Date:</label>
<input
type="date"
id="startDate"
class="input-field"
[(ngModel)]="startDate"
/>
</div>
<div>
<label for="endDate" class="input-label">End Date:</label>
<input type="date" id="endDate" class="input-field" [(ngModel)]="endDate" />
</div>
<div>
<label for="reason" class="input-label">Reason:</label>
<textarea id="reason"
class="input-field"
[(ngModel)]="reason"
required
></textarea>
</div>
<button class="apply-button" (click)="applyLeave()">Apply</button>
<div *ngIf="value">
<h2 class="app-title">Leave Approved Details:</h2>
<p>{{ value }}</p>
</div>
</div>
[Link]
.leave-application {
background-color:
#f9f9f9; padding: 20px;
max-width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 8px;
}
.app-title {
color: #3f51b5; margin-bottom: 20px;
}
.input-label {
color: #009688;
margin-bottom: 8px;}
.input-field { width: 100%; padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
.apply-button {
background-color:
#4caf50; color: #fff;
padding: 8px 16px;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.apply-button:hover {
background-color:
#45a049;
}
[Link]
import { Component } from '@angular/core';
@Component({
selector: 'app-leave-balance',
templateUrl: './leave-
[Link]', styleUrls:
['./[Link]'],
})
export class LeaveBalanceComponent {
casualLeaveBalance = 10;
medicalLeaveBalance = 5;
}
[Link]
<div class="leave-balance">
<h2 class="app-title">Leave Balance</h2>
<p class="leave-details">Casual Leave: {{ casualLeaveBalance }} days</p>
<p class="leave-details">Medical Leave: {{ medicalLeaveBalance }} days</p>
</div>
[Link]
.leave-balance {
background-color:
#f9f9f9; padding: 20px;
max-width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 8px;
}
.leave-details { color: #009688;
margin-bottom: 8px;
}.app-title { color: #3f51b5;
margin-bottom: 20px;
}
Output:
7. Develop a simple dashboard for project management where the statuses of various
tasks are available. New tasks can be added and the status of existing tasks can be
changed among Pending, InProgress or Completed.

Program:
[Link]
import React, { useState } from "react";
import "./[Link]";
const StatusColors = {
Pending: "#ff5252",
InProgress: "#ffc107",
Completed: "#4caf50",
};
const App3 = () => {
const [tasks, setTasks] = useState([
{ id: 1, title: "Task 1", status: "Pending" },
{ id: 2, title: "Task 2", status: "InProgress" },
{ id: 3, title: "Task 3", status: "Completed" },
]);
const [inputText, setInputText] = useState("");
const [editingTaskId, setEditingTaskId] = useState(null);
const handleStatusChange = (taskId,
newStatus) => { const updatedTasks =
[Link]((task) =>
[Link] === taskId ? { ...task, status: newStatus } : task
);
setTasks(updatedTasks);
};
const handleTaskAdd = (newTaskTitle) =>
{ const newTask = {
id: [Link] + 1, title:
newTaskTitle,
status: "Pending",
};
setTasks([...tasks,
newTask]); setInputText("");
};
const handleTaskEdit = (taskId, newTitle)
=> { const updatedTasks =
[Link]((task) =>
[Link] === taskId ? { ...task, title: newTitle } : task
);
setTasks(updatedTasks);
setEditingTaskId(null);
};
const handleTaskRemove = (taskId) => {
const updatedTasks = [Link]((task) => [Link] !==
taskId); setTasks(updatedTasks);
};
return (
<div className="app-container">
<h1 className="app-title">Project Management Dashboard</h1>
<div className="task-list">
{[Link]((task) => (
<div key={[Link]} className="task">
<h3 onClick={() => setEditingTaskId([Link])}>{[Link]}</h3>
<div className="status-buttons">
<button
style={{ backgroundColor: [Link] }}
onClick={() => handleStatusChange([Link], "Pending")}
>Pending</button>
<button
style={{ backgroundColor: [Link] }}
onClick={() => handleStatusChange([Link],
"InProgress")}
>
In Progress
</button>
<button
style={{ backgroundColor: [Link] }}
onClick={() => handleStatusChange([Link], "Completed")}
>Completed
</button>
</div>
<button
className="remove-task-button" onClick={()
=> handleTaskRemove([Link])}
>
Remove Task
</button>
</div>
))}
</div>
<div className="add-task">
<input
type="text"
placeholder="New Task Title"
value={inputText}
onChange={(e) => setInputText([Link])}
/>
<button onClick={() => handleTaskAdd(inputText)}>Add Task</button>
</div>
{editingTaskId !== null && (
<div className="modal">
<div className="modal-content">
<h2>Edit Task</h2>
<input type="lable"
value={
[Link]((task) => [Link] === editingTaskId)?.title || ""
}
onChange={(e) => setInputText([Link])}
/>
<div className="modal-buttons">
<button onClick={() => setEditingTaskId(null)}>Cancel</button>
<button onClick={() => {
const editedTask = [Link](
(task) => [Link] === editingTaskId
);

if (editedTask) {
handleTaskEdit(editingTaskId, inputText);
}
}}
>
Save
</button>
</div>
</div>
</div>
)}
</div>
);
};
export default
App3;
[Link]
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.app-container {
background-color:
#f1f1f1; padding: 20px;
}
.app-title {
color: #333;
margin-bottom: 20px;
text-align: center;
}
.task-list {
display: flex;
flex-wrap: wrap;
}
.task {
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
margin: 10px;
width: 400px;
border-radius: 8px;
box-shadow: 0 4px
8px rgba(0, 0, 0,
0.1);
}
/* ... (existing styles) ... */
.remove-task-button {
background-color:
#f44336; color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
margin-top: 10px;
}
.remove-task-button:hover
{ background-color:
#d32f2f;
}
.remove-task-
button:focus { outline:
none;
}
h3 {
margin-top: 0;
margin-bottom: 10px;
}
.status-buttons {
display: flex;
justify-content: space-
between; margin-top: 10px;
}
.status-buttons button
{ color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}
.pending {
background-color: #ff5252;
}
.inprogress {
background-color: #ffc107;
}
.completed {
background-color: #4caf50;
}
.add-task {
display: flex;
margin-top: 20px;
align-items: center;

}
.add-task input {
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;

}
.add-task button {
background-color:
#3f51b5; color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
}
Output:
8. Develop an online survey application where a collection of questions is
available and users are asked to answer any random 5 questions.

Program:
[Link]
import React, { useState } from
"react"; import questions from
"./questions"; import
"./[Link]";
function App() {
const [questionIndex, setQuestionIndex] =
useState(0); const [score, setScore] = useState(0);
const [results, setResults] = useState(false);
const [wrongAnswers, setWrongAnswers] =
useState([]); const replay = () => {
setQuestionIndex(0);
setScore(0);
setResults(false);
setWrongAnswers([]);
};
const presentQuestion =
questions[questionIndex]; const getChoice =
(index) => {
if ([Link] === index) {
setScore(score + 1);
} else {
setWrongAnswers([...wrongAnswers, questionIndex]);
}
const nextQuestion = questionIndex +
1; if (nextQuestion <
[Link]) {
setQuestionIndex(nextQuestion);
} else {
setResults(true);
}
};
const prevQuestion = () =>
{ if (questionIndex > 0) {
setQuestionIndex(questionIndex - 1);
}
};
return (
<>
<h1>Online Survey Application</h1>
<div className="quiz_box">
{results ? (
<>
<h1>Score: {score}</h1>
<p>Correct Answers: {score}</p>
<p>Wrong Answers: {[Link]}</p>
<br />
<button onClick={replay}>Play Again</button>
</>
):(
<>
<div className="quiz_question">
{[Link]}
<div className="quiz_box_options"></div>
<ul className="quiz_ul">
{[Link]((option, i) => {
return (
<li className="quiz_li" onClick={() => getChoice(i)}>
{option}
</li>);
})}
</ul>
</div>
<button
className="previous-question" // Add the class name here
onClick={prevQuestion}
disabled={questionIndex === 0}
>
Previous Question
</button>
</>
)}
</div>
</>
);
}
export default App;
[Link]
export default [
{
question: "What is the purpose of JavaScript?",
options: [
"To style HTML elements",
"To add interactivity to web
pages", "To create database
queries",
"To define the structure of a web page",
],
answer: 1, // The correct answer is option 2
},
{
question: "What does CSS stand for?",
options: [
"Cascading Style Sheet",
"Creative Style Sheet",
"Computer Style Sheet",
"Colorful Style Sheet",
],
answer: 0, // The correct answer is option 1
},
{
question:
"Which programming language is used for building web
applications?", options: ["Python", "Java", "C#", "JavaScript"],
answer: 3, // The correct answer is option 4
},
{
question: "What does HTML stand for?",
options: [
"Hypertext Markup Language",
"Hypertext Model Language",
"Hyperloop Model Language",
"High-level Markup Language",
],
answer: 0, // The correct answer is option 1
},
{
question: "What is the primary function of a database management
system?", options: [
"To create and format web pages",
"To manage data and databases",
"To handle network
communication", "To design
graphical user interfaces",
],
answer: 1, // The correct answer is option 2
},
{
question:
"Which data type is used for storing whole numbers in
JavaScript?", options: ["number", "string", "boolean",
"integer"],
answer: 0, // The correct answer is option 1
},
{
question: "Which symbol is used for single-line comments in
JavaScript?", options: ["//", "/*", "#", "%%"],
answer: 0, // The correct answer is option 1
},
{
question: "What is the latest version of
ECMAScript?", options: ["ES5", "ES6", "ES7",
"ES8"],
answer: 3, // The correct answer is option 4
},
{
question: "Which keyword is used for declaring variables in
JavaScript?", options: ["let", "var", "const", "int"],
answer: 1, // The correct answer is option 2
},
{question: "Which programming language is used for developing Android apps?", options:
["Java", "Python", "C#", "Swift"],
answer: 0, // The correct answer is option 1
},
];
[Link]
/* [Link] */
body {
font-family: Arial, sans-
serif; background-color:
#f0f0f0; margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.quiz_box {
background-color:
#ffffff; border-radius:
10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 500px;
width: 100%;
text-align: center;}
.quiz_question {
margin-bottom: 20px;
}
.quiz_box_options {
margin-bottom: 20px;
}
.quiz_ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;}
.quiz_li {
background-color:
#3f51b5; color: #ffffff;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s ease;
}
.quiz_li:hover {
background-color: #2c387e;
}
h1 {
color: #3f51b5;
font-size: 40px;
margin-bottom: 10px;
}button {
background-color:
#3f51b5; color: #ffffff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}button:hover
{background-color: #2c387e;}
.quiz_box [Link]-
question { background-color:
green;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 10px;
}
.quiz_box [Link]-
question:hover { background-color:
darkgreen;
}
Output:
9. Develop to-do application using node js,express js and mongodb .

Program:
[Link]
const hostname = "[Link]";
// var port = [Link];
// if (port == null) {
// port = 3300;
// }
var port = 3000;
const express =
require("express"); const app =
express();
let mongodb = require("mongodb");
let db = null;
let dbConnection =
"mongodb+srv://root:root@[Link]/nameList?retryWrites=t
rue&w=majority"; const MongoClient = [Link];
[Link]
( dbConnection,
{ useNewUrlParser: true, useUnifiedTopology:
true }, (err, client) => {
if (err) {
throw err;
}
db = [Link]();
//[Link](port, hostname, () => {[Link](`Server running at
[Link]
// [Link]('/.netlify/function/api',router);
// [Link] = serverless(app);
[Link](port);
}
);
[Link]([Link]());
[Link]([Link]({ extended:
true })); [Link]([Link]("public"));
function pass(req, res, next) {
const authHeader = [Link];
if (!authHeader || ![Link]("Basic
")) { [Link]("WWW-Authenticate", 'Basic
realm="newApp"');
[Link](401).send("Unauthorized");
return;
}
const encodedCredentials = [Link]("Basic ", "");
const decodedCredentials = [Link](encodedCredentials,
"base64").toString( "utf-8");
const [username, password] = [Link](":");
if (username === "id" && password ===
"pass") { next();
} else {
[Link]("WWW-Authenticate", 'Basic
realm="newApp"');
[Link](401).send("Unauthorized");
}
}function chek(req, res, next) {
[Link]("www-Authenticate", 'Basic realm="newApp"');
if ([Link] == "Basic
aWQ6cGFzcw==") { next();
} else {
[Link](401).send("no page ");
}}
[Link]("/", chek, (req, res) => {
[Link]("user")
.find()
.toArray((err, result) => {
if (err) {
throw err;}
// [Link]('[Link]', { result });
// [Link]([Link]( dirname,
'[Link]')); [Link](`
<form action="/add" method="post">
<label for="">Enter Your name</label>
<input type="text" name="name">
<button>Submit</button>
</form>
<ol type="1">
${result
.map( (value) =>
`
<li class="upvalue" >User Name: ${[Link]}</li>
<button data-id="${value._id}" class="edit">Edit</button>
<button data-id="${value._id}" class="delete">Delete</button>)
.join("")}
</ol>
<script src="[Link]
<script src="/[Link]"></script>`);
});
});
[Link]("/add", (req, res) => {
[Link]("user").insertOne({ userName: [Link]
}, () => { [Link]("/");
});
});
[Link]("/edit", (req, res)
=> { const userId =
[Link];
const newName = [Link];
[Link]("user").findOneAndUpdate(
{ _id: new [Link](userId) },
{ $set: { userName: newName } },
(err, result) => {
if (err) { throw
err;
}
[Link](`Data valueis updated: ${newName}`);
}
);
});
[Link]("/delete", (req, res)
=> { const userId =
[Link];
[Link]("user").deleteOne(
{ _id: new [Link](userId)
}, (err, result) => {
if (err) { throw
err;
}
[Link](`Data with ID ${userId} is deleted`);
}
);
});

[Link]
[Link]('click',
(e) => { if
([Link]("edit")) {
const value = prompt("Enter the new
value"); if (value == null) {
[Link](".upvalue").innerHTML;
}
let userId = [Link]("data-id");
[Link]('/edit', { userName: value, id: userId
})
.then(() => {
[Link]();
[Link](`Data updated for ID ${userId}`);
})
.catch(() => {
[Link]("Error: Unable to update data");
});
}
if ([Link]("delete"))
{ let userId =
[Link]("data-id");
confirm("Do you want to delete this
data") [Link]('/delete', { id: userId
}).then(() => {
[Link](`Data deleted for ID ${userId}`);
[Link]();
})
.catch(() => {
[Link]("Error: Unable to delete data");
});

}
});
Output: