Scribd
Upload
8 views66 pages

Build Your Personal Portfolio Website

The document outlines the steps to develop a personal portfolio website aimed at attracting potential recruiters. It includes an algorithm detailing the purpose, structure, design, development, and maintenance of the website, as well as a sample HTML program for implementation. Key sections of the website should cover personal information, skills, projects, and contact details.

Uploaded by

anudarshni1
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
8 views66 pages

Build Your Personal Portfolio Website

The document outlines the steps to develop a personal portfolio website aimed at attracting potential recruiters. It includes an algorithm detailing the purpose, structure, design, development, and maintenance of the website, as well as a sample HTML program for implementation. Key sections of the website should cover personal information, skills, projects, and contact details.

Uploaded by

anudarshni1
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

DEVELOP A PORTFOLIO WEBSITE FOR YOURSELF WHICH GIVES DETAILS ABOUT

YOURSELF FOR A POTENTIAL RECRUITER


AIM:
To Develop a portfolio website for yourself which gives details about yourself for a potential
Recruiter.
ALGORITHM:
1. Define Purpose & Audience: Showcase your skills, projects, and experience for
recruiters.
2. Plan Structure: Include sections — Home, About, Projects, Skills, Contact.
3. Design Layout: Create a rough design using tools like Figma or Adobe XD.
4. Choose Style: Select suitable colors, fonts, and branding elements.
5. Set Up Environment: Prepare folders and files for HTML, CSS, and JavaScript.
6. Develop Website:
o Write HTML structure.
o Apply CSS styling.
o Add interactivity with JavaScript.
7. Add Content: Include bio, skills, projects (with details/screenshots), resume link, and
contact info.
8. Optimize & Test: Make it responsive, test across devices, and fix errors.
9. Deploy Website: Choose a reliable host and link your domain.
10. Maintain & Update: Regularly update projects, skills, and content.
PROGRAM:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Name — Portfolio</title>
<meta name="description" content="Professional portfolio of Your Name — software
developer. Projects, skills, and contact details for recruiters.">
<meta name="keywords" content="portfolio, developer, projects, resume, skills">
<meta name="author" content="Your Name">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!-- Open Graph -->
<meta property="og:title" content="Your Name — Portfolio">
<meta property="og:description" content="Professional portfolio of Your Name — software
developer. Projects, skills, and contact details for recruiters.">
<meta property="og:type" content="website">
<!-- JSON-LD (basic) -->
<script type="application/ld+json">
{
"@context": "[Link]
"@type": "Person",
"name": "Your Name",
"jobTitle": "Software Developer",
"url": "[Link]
"sameAs": []
}
</script>
<!-- Google Fonts -->
<link
href="[Link]
p" rel="stylesheet">
<style>
:root{
--accent:#0b6efd;
--bg:#0f1724;
--card:#0b1220;
--muted:#9aa4b2;
color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial,sans-
serif;background:linear-gradient(180deg,#071025 0%, #091122 100%);color:#e6eef8}
.container{max-width:1100px;margin:0 auto;padding:28px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.avatar{width:64px;height:64px;border-radius:12px;background:linear-
gradient(135deg,var(--accent),#7dd3fc);display:flex;align-items:center;justify-
content:center;font-weight:700;color:#02111b}
nav ul{display:flex;gap:14px;list-style:none;padding:0;margin:0}
[Link]{color:var(--muted);text-decoration:none;font-weight:600}
[Link]:hover{color:var(--accent)}
.hero{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center;margin-
top:36px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02),
rgba(255,255,255,0.01));padding:22px;border-radius:14px;box-shadow:0 6px 18px
rgba(5,10,20,0.6)}
h1{margin:0 0 8px 0;font-size:28px}
[Link]{color:var(--muted);margin:8px 0 0}
.cta{display:inline-block;margin-top:18px;padding:10px 14px;border-
radius:10px;background:var(--accent);color:#042033;text-decoration:none;font-weight:700}
.profile-photo{width:100%;border-radius:12px;object-fit:cover}
.meta{display:flex;gap:12px;margin-top:12px}
.meta .pill{background:rgba(255,255,255,0.03);padding:8px 10px;border-
radius:10px;color:var(--muted);font-weight:600}

section{margin-top:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.skills .skill{margin-bottom:12px}
.skill b{display:block;margin-bottom:6px}
.bar{background:rgba(255,255,255,0.04);height:10px;border-radius:8px;overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--
accent),#34d399);border-radius:8px}
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.project-card{padding:14px;border-radius:12px;background:linear-gradient(180deg,
rgba(255,255,255,0.02), rgba(255,255,255,0.01));cursor:pointer}
.project-card h3{margin:0 0 6px}
.project-card p{margin:0;color:var(--muted)}
footer{margin-top:40px;padding:20px 0;color:var(--muted);text-align:center}
/* Responsive */
@media (max-width:900px){
.hero{grid-template-columns:1fr;}
.grid-3{grid-template-columns:repeat(2,1fr)}
.projects{grid-template-columns:1fr}
nav ul{display:none}
}
/* utility */
.muted{color:var(--muted)}
.tag{display:inline-block;padding:6px 8px;border-
radius:8px;background:rgba(255,255,255,0.02);font-weight:600}
/* contact form */
form input, form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid
rgba(255,255,255,0.04);background:transparent;color:inherit}
form button{padding:10px 14px;border-radius:10px;border:0;background:var(--
accent);font-weight:700}
</style>
</head>
<body>
<div class="container">
<header>
<div class="brand">
<div class="avatar">YN</div>
<div>
<div style="font-weight:700">Your Name</div>
<div class="muted" style="font-size:13px">Software Developer — Open to
opportunities</div>
</div>
</div>
<nav>
<ul>
<li><a class="navlink" href="#home">Home</a></li>
<li><a class="navlink" href="#about">About</a></li>
<li><a class="navlink" href="#projects">Projects</a></li>
<li><a class="navlink" href="#skills">Skills</a></li>
<li><a class="navlink" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="home">
<div class="hero">
<div>
<div class="card">
<h1>Hi — I’m <span style="color:var(--accent)">Your Name</span></h1>
<p class="lead">I build reliable, maintainable software and enjoy crafting great user
experiences. I have experience in web development, backend services, and cloud
deployment.</p>
<div class="meta">
<div class="pill">Open to work</div>
<div class="pill">3+ years experience</div>
<div class="pill">Location: India</div>
</div>
<a class="cta" href="#contact">Contact Me</a>
<a class="cta" style="margin-left:10px;background:transparent;color:var(--
accent);border:1px solid rgba(255,255,255,0.06);" href="/assets/YourName_Resume.pdf"
download>Download Resume</a>
<p class="muted" style="margin-top:14px;font-size:13px">Last updated: October 23,
2025</p>
</div>
<section id="about">
<div class="card">
<h2>About Me</h2>
<p class="muted">Introduce yourself briefly: current role, professional interests, and
the kind of work you want to do. Keep it concise for recruiters.</p>
<ul style="margin-top:12px;color:var(--muted)">
<li>Experienced in: JavaScript, [Link], React, PHP</li>
<li>Comfortable with: REST APIs, SQL/NoSQL, cloud (AWS/GCP)</li>
<li>Education: [Link] / [Link] — Your University</li>
</ul>
</div>
</section>
<section id="projects">
<h2 style="margin:12px 0 8px">Selected Projects</h2>
<div class="projects">
<div class="project-card" onclick="openProject(1)">
<h3>Project One <span class="tag">Web App</span></h3>
<p class="muted">Short summary: what it does, tech stack, result
(link/metric).</p>
</div>
<div class="project-card" onclick="openProject(2)">
<h3>Project Two <span class="tag">Mobile</span></h3>
<p class="muted">Short summary: role you played, technologies used, and
outcome.</p>
</div>
<div class="project-card" onclick="openProject(3)">
<h3>Project Three <span class="tag">Tooling</span></h3>
<p class="muted">Short summary and link to repository or live demo.</p>
</div>
<div class="project-card" onclick="openProject(4)">
<h3>Project Four <span class="tag">Research</span></h3>
<p class="muted">Short summary: problem solved and impact.</p>
</div>
</div>
</section>
<section id="skills" class="skills">
<h2 style="margin:12px 0 8px">Skills</h2>
<div class="card">
<div class="grid-3">
<div>
<h4>Frontend</h4>
<div class="skill"><b>HTML & CSS</b><div class="bar"><i
style="width:95%"></i></div></div>
<div class="skill"><b>JavaScript / React</b><div class="bar"><i
style="width:88%"></i></div></div>
<div class="skill"><b>Design / UX</b><div class="bar"><i
style="width:70%"></i></div></div>
</div>
<div>
<h4>Backend</h4>
<div class="skill"><b>[Link] / Express</b><div class="bar"><i
style="width:86%"></i></div></div>
<div class="skill"><b>Databases</b><div class="bar"><i
style="width:80%"></i></div></div>
<div class="skill"><b>API Design</b><div class="bar"><i
style="width:85%"></i></div></div>
</div>
<div>
<h4>Tools</h4>
<div class="skill"><b>Git / CI</b><div class="bar"><i
style="width:82%"></i></div></div>
<div class="skill"><b>Cloud (AWS/GCP)</b><div class="bar"><i
style="width:74%"></i></div></div>
<div class="skill"><b>Testing</b><div class="bar"><i
style="width:68%"></i></div></div>
</div>
</div>
</div>
</section>
<section id="contact">
<h2 style="margin:12px 0 8px">Contact</h2>
<div class="card">
<p class="muted">Want to reach out? Use the form below or send an email
directly.</p>
<form onsubmit="return submitForm(event)">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<input id="name" placeholder="Your name" required>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div style="margin-top:12px">
<input id="subject" placeholder="Subject">
</div>
<div style="margin-top:12px">
<textarea id="message" rows="5" placeholder="Message" required></textarea>
</div>
<div style="margin-top:12px;display:flex;gap:12px">
<button type="submit">Send message</button>
<a href="[Link] style="align-self:center;color:var(--
muted);text-decoration:none">Or email: [Link]@[Link]</a>
</div>
</form>
</div>
</section>
</div>
<aside>
<div class="card">
<img src="[Link] alt="Profile photo"
class="profile-photo">
<h3 style="margin-top:12px">Quick facts</h3>
<ul class="muted">
<li>Available for: Full-time / Contract</li>
<li>Notice period: Immediately</li>
<li>Languages: English, Hindi</li>
</ul>
<h3 style="margin-top:12px">Social</h3>
<div style="display:flex;gap:8px;margin-top:8px">
<a href="#" class="tag">GitHub</a>
<a href="#" class="tag">LinkedIn</a>
<a href="#" class="tag">Twitter</a>
</div>
</div>
<div style="height:18px"></div>
<div class="card">
<h4>Education</h4>
<p class="muted" style="margin:6px 0">[Link] / [Link] — University Name</p>
<h4 style="margin-top:12px">Certifications</h4>
<p class="muted" style="margin:6px 0">AWS Certified Developer (example)</p>
</div>
</aside>
</div>
</main>
<footer>
<div class="muted">© <span id="year"></span> Your Name — Built with a11y &
performance in mind • <a href="#" style="color:var(--muted);text-
decoration:underline">Privacy</a></div>
</footer>
</div>

<!-- Project Modal -->


<div id="modal"
style="display:none;position:fixed;inset:0;background:rgba(2,6,12,0.7);align-
items:center;justify-content:center;padding:20px">
<div id="modalCard" class="card" style="max-width:800px;width:100%">
<button onclick="closeModal()"
style="float:right;background:transparent;border:0;color:var(--muted);font-
weight:700">Close</button>
<div id="modalContent"></div>
</div>
</div>
<script>
[Link]('year').innerText = new Date().getFullYear();
function openProject(id){
const content = {
1: {title:'Project One', body:'Detailed description of Project One. Add screenshots, links,
tech stack, role and impact.\n\nTech: React, [Link]. Link: [Link]
2: {title:'Project Two', body:'Detailed description of Project Two. Mobile app with X
downloads.'},
3: {title:'Project Three', body:'Detailed description of Project Three. Tooling and
automation.'},
4: {title:'Project Four', body:'Detailed description of Project Four. Research or thesis.'}
};
const modal = [Link]('modal');
[Link]('modalContent').innerHTML =
'<h2>'+content[id].title+'</h2><p style="white-space:pre-wrap;">'+content[id].body+'</p>';
[Link]='flex';
}
function closeModal(){[Link]('modal').[Link]='none'}
// Simple form handler — replace with real backend or use Formspree / Netlify Forms
function submitForm(e){
[Link]();
const name=[Link]('name').value;
const email=[Link]('email').value;
const subject=[Link]('subject').value;
const message=[Link]('message').value;
// Basic validation done by required attributes
alert('Thanks '+name+'! This demo form does not actually send messages. Replace
submitForm() with your API or use a form provider.');
[Link]();
return false;
}
// Accessibility: allow Esc to close modal
[Link]('keydown', (e)=>{ if([Link]==='Escape') closeModal(); });
</script>
</body>
</html>

Result:
Thus, the portfolio website for yourself which gives details about yourself for a potential
recruiter using Html,Css and Javascript to created Web Application and output was executed.
CREATE A WEB APPLICATION TO MANAGE THE TO-DO LIST OF USERS, WHERE USERS CAN
LOGIN AND MANAGE THEIR TO-DO ITEMS
AIM:
To Create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items.
ALGORITHM:

• Setup: Create project folder and add HTML, CSS, JS (or React, [Link], MongoDB).
• Design Pages: Registration, Login, and Dashboard.
• Database: Connect MongoDB and design schema for users and their TO-DO items.
• Authentication: Use JWT for secure login; hash passwords for storage.
• Dashboard Features: View, add, edit, delete, and mark tasks complete.
• Enhancements: Add sorting, filtering, and pagination.
• Validation & Error Handling: Validate forms and handle errors gracefully.
• Logout: Provide secure logout option.
• Testing & Deployment: Test all features, fix bugs, and deploy online.
• Maintenance: Monitor, secure, and update the app regularly.
PROGRAM:
[Link]
import { useEffect, useState } from 'react';
import './[Link]';
import Form from './Components/Form';
import Todo from './Components/Todo';
const App = () => {
const [ToDoArray, setToDoArray] = useState([]);
const [In, setIn] = useState(-1);
const [Str, setStr] = useState('');
// Add or Edit ToDo
const 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);
}
};
// Delete ToDo
const Delete = (Ind) => {
let newArr = [...ToDoArray];
[Link](Ind, 1);
[Link]("Todo", [Link](newArr));
setToDoArray(newArr);
};
// Edit ToDo
const EditText = (Ind, Elem) => {
setIn(Ind);
setStr(Elem);
};
// Load stored ToDos
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]';
const Form = (Props) => {
const [Text, setText] = useState('');
const HandleInput = (Inp) => {
setText(Inp);
};
const HandleClick = () => {
if (Text === '') {
alert("Text field can't be empty!");
} else {
[Link](Text);
setText('');
}
};
useEffect(() => {
setText([Link]);
}, [[Link]]);
return (
<div className="Form">
<input
type="text"
placeholder="Enter any To-Do..."
value={Text}
onChange={(e) => 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) => (
<div className="All-Todo" key={Ind}>
<p>{Elem}</p>
<div className="Actions">
<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>
))}
</div>
);
};
export default Todo;

Result:
The TO-DO List Web Application was successfully developed and executed.
Users can register, log in, and manage their personal tasks efficiently.
CREATE A SIMPLE MICRO BLOGGING APPLICATION(LIKE TWITTER) THAT ALLOWS PEPOLE
TO POST THEIR CONTENT WHICH CAN BE VIEWED BY PEPOPLE WHO FOLLOW THEM
AIM:
To Create a simple micro blogging application (like twitter) that allows people to post their
content which can be viewed by people who follow them.
ALGORITHM:

• Setup: Create project folder with HTML, CSS, JS (or React, [Link], MongoDB).
• Pages: Design login, signup, and dashboard pages.
• Database: Connect MongoDB and create schemas for users, followers, and posts.
• Authentication: Use JWT for secure login and password hashing.
• Features:
Create, view, like, comment, and share posts.
Follow/unfollow users.
Display recent posts in reverse order.

• Validation & Error Handling: Check all inputs and manage errors properly.
• Real-Time Updates: Use WebSockets for instant post and notification updates.
• Testing & Deployment: Test all features, fix bugs, and deploy to a web server.
• Maintenance: Monitor performance, security, and add new features regularly.
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([newPost, ...posts]); // latest post appears first
};
const handleFollowToggle = () => {
setFollowing((prevFollowing) => !prevFollowing);
};
return (
<div
style={{
margin: "20px",
padding: "20px",
maxWidth: "500px",
textAlign: "center",
border: "1px solid #ccc",
borderRadius: "10px",
boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
}}
>
<h1 style={{ color: "teal" }}>Colorful Micro Blogging App</h1>
<button
onClick={handleFollowToggle}
style={{
backgroundColor: following ? "red" : "green",
color: "white",
border: "none",
borderRadius: "5px",
padding: "8px 15px",
marginBottom: "15px",
cursor: "pointer",
}}
>
{following ? "Unfollow" : "Follow"}
</button>
<PostForm onSubmit={handlePostSubmit} />
<div>
{[Link] === 0 ? (
<p style={{ color: "gray" }}>No posts yet. Start sharing your thoughts!</p>
):(
[Link]((post) => <Post key={[Link]} content={[Link]} />)
)}
</div>
</div>
);
};
// Component for post form
const PostForm = ({ onSubmit }) => {
const [content, setContent] = useState("");
const handleSubmit = (e) => {
[Link]();
if ([Link]() === "") {
alert("Post cannot be empty!");
return;
}
onSubmit(content);
setContent("");
};
return (
<form onSubmit={handleSubmit}>
<textarea
value={content}
onChange={(e) => setContent([Link])}
placeholder="What's on your mind?"
rows="4"
cols="45"
required
style={{
marginBottom: "10px",
padding: "8px",
borderRadius: "5px",
border: "1px solid #ccc",
resize: "none",
}}
/>
<br />
<button
type="submit"
style={{
backgroundColor: "teal",
color: "white",
border: "none",
borderRadius: "5px",
padding: "8px 15px",
cursor: "pointer",
}}
>
Post
</button>
</form>
);
};
// Component for displaying each post
const Post = ({ content }) => {
return (
<div
style={{
backgroundColor: "lightblue",
padding: "10px",
marginBottom: "10px",
borderRadius: "5px",
textAlign: "left",
}}
>
{content}
</div>
);
};
export default App;

Result:
A simple Micro-Blogging Web Application (like Twitter) was successfully developed.
CREATE A FOOD DELIVERY WEBSITE WHERE USERS CAN ORDER FOOD FROM A
PARTICULAR RESTAURANT LISTED IN THE WEBSITE
AIM:
To Create a food delivery website where users can order food from a particular restaurant
listed in the website.
ALGORITHM:
1. Setup: Create project folder with HTML, CSS, JS (or React, [Link], MongoDB).
2. Pages: Design homepage, restaurant pages, menu pages, cart, and checkout.
3. Database: Connect MongoDB and create schemas for restaurants, menus, food
items, and orders.
4. Authentication: Implement user signup/login with JWT and secure password storage.
5. Features:
o View list of restaurants and their menus.
o Add food items to cart and calculate total.
o Checkout with delivery details and secure payment integration.
o Display order confirmation and send emails.
o Search and filter restaurants and menu items.
o Real-time order status updates.
o Admin panel for restaurant owners to manage menus and orders.
6. Validation & Error Handling: Validate all user inputs and handle errors gracefully.
7. Testing & Deployment: Test all features, fix bugs, and deploy online.
8. Maintenance: Monitor performance, security, and add new features regularly.
PROGRAM:
import React, { useState } from "react";
// Sample restaurant data
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 restaurants as needed
];
const App = () => {
const [selectedRestaurant, setSelectedRestaurant] = useState(null);
const [order, setOrder] = useState([]);
// Select a restaurant and reset the order
const handleRestaurantSelect = (restaurant) => {
setSelectedRestaurant(restaurant);
setOrder([]);
};
// Add item to order
const handleOrderItemAdd = (item) => {
setOrder([...order, item]);
};
// Remove item from order
const handleOrderItemRemove = (itemId) => {
setOrder([Link]((item) => [Link] !== itemId));
};

// Place order
const handleOrderSubmit = () => {
alert("Order placed successfully!");
setOrder([]);
setSelectedRestaurant(null);
};
return (
<div style={{ backgroundColor: "#f9f9f9", padding: "20px", fontFamily: "Arial" }}>
<h1 style={{ color: "#3f51b5", marginBottom: "20px" }}>Food Delivery Website</h1>
{/* Restaurant List */}
<div>
<h2 style={{ color: "#009688", marginBottom: "10px" }}>Restaurants</h2>
<ul style={{ listStyle: "none", padding: 0 }}>
{[Link]((restaurant) => (
<li key={[Link]} style={{ marginBottom: "10px" }}>
<button
style={{
backgroundColor: "#4caf50",
color: "#fff",
padding: "8px 16px",
border: "none",
cursor: "pointer",
}}
onClick={() => handleRestaurantSelect(restaurant)}
>
{[Link]}
</button>
</li>
))}
</ul>
</div>
{/* Menu for selected restaurant */}
{selectedRestaurant && (
<div>
<h2 style={{ color: "#009688", marginBottom: "10px" }}>
Menu - {[Link]}
</h2>
<ul style={{ listStyle: "none", padding: 0 }}>
{[Link]((item) => (
<li key={[Link]} style={{ marginBottom: "10px" }}>
<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",
cursor: "pointer",
}}
onClick={() => handleOrderItemAdd(item)}
>
Add to Order
</button>
</li>
))}
</ul>
</div>
)}
{/* Order Summary */}
{[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",
cursor: "pointer",
}}
onClick={() => handleOrderItemRemove([Link])}
>
Remove
</button>
</li>
))}
</ul>
<button
style={{
backgroundColor: "#4caf50",
color: "#fff",
padding: "8px 16px",
border: "none",
marginTop: "10px",
cursor: "pointer",
}}
onClick={handleOrderSubmit}
>
Place Order
</button>
</div>
)}
</div>
);
};
export default App;

Result:
A Food Delivery Website was successfully developed.
DEVELOP A CLASSIFIEDS WEB APPLICATION TO BUY AND SELL USED PRODUCTS

AIM:
To Develop a classifieds web application to buy and sell used products.
ALGORITHM:
1. Setup: Create project folder with HTML, CSS, JS (or React, [Link], MongoDB).
2. Pages: Design homepage, product listing, product details, and user profile pages.
3. Database: Connect MongoDB and create schemas for products, users, and
categories.
4. Authentication: Implement user signup/login with JWT and secure password storage.
5. Features:
o Create, edit, and delete product listings.
o Display available products on homepage with search and filter options.
o View product details and contact sellers.
o Messaging system for secure communication between users.
o Real-time updates for new listings and messages.
o Admin panel to manage users and reported listings.
6. Validation & Error Handling: Validate inputs and handle errors properly.
7. Testing & Deployment: Test all features, fix bugs, and deploy online.
8. Maintenance: Monitor performance, security, and add new features regularly.
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;
}
/* Product list container */
.vie {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
/* Product details styles */
.product-details {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
max-width: 300px;
width: 100%;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.product-name {
color: #009688;
margin-bottom: 10px;
}

.product-description {
color: #3f51b5;
margin-bottom: 10px;
}
.product-price {
color: #009688;
font-weight: bold;
}
/* Buy button styles */
.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;
}

Result:
Thus the Develop a classifieds web application to buy and sell used products successfully
DATE DEVELOP A LEAVE MANAGEMENT SYSTEM FOR AN ORGANIZATION WHERE USERS
CAN APPLY DIFFERENT TYPES OF LEAVES SUCH AS CASUAL LEAVE AND MEDICAL LEAVE.
THEYALSO CAN VIEW THE AVAILABLE NUMBER OF DAYS
AIM:
To 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.
ALGORITHM:
1. Setup: Create project folder with HTML, CSS, JS (or React, [Link], MongoDB).
2. Authentication: Implement login/signup with JWT and secure password storage.
3. Dashboard: Display leave balances and leave application form for employees.
4. Database: Connect MongoDB and create schemas for users, leave types, and leave
applications.
5. Leave Application:
o Employees can request leaves with start/end dates.
o Validate leave requests against available balance.
6. Admin Panel:
o Admins can view, approve, or reject leave applications.
o Update leave balances accordingly.
7. Notifications & Status: Show real-time updates and notify users of status changes.
8. Leave History: Employees can view past leave applications and statuses.
9. Validation & Error Handling: Validate all forms and handle errors properly.
10. Testing & Deployment: Test functionality, fix bugs, and deploy online.
11. Maintenance: Monitor performance, security, and update features regularly.
PROGRAM:
[Link]
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">{{ title }}</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 styles */
body, h1, h2, h3, h4, h5, h6, p, ul, li {
margin: 0;
padding: 0;
}
/* App container */
.app-container {
background-color: #f9f9f9;
padding: 20px;
font-family: Arial, sans-serif;
}

/* App title */
.app-title {
color: #3f51b5;
margin-bottom: 20px;
}
/* Navigation menu */
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.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: './[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. Remaining: ${[Link]} days`;
} else if ([Link] === 'Medical Leave' && [Link] > 0) {
[Link] -= 1;
[Link] = `Medical Leave applied. Remaining: ${[Link]} days`;
} 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 Status:</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;
display: block;
}
.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]
<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;
}

Result:
Thus the Develop a leave management system for an organization where users can apply
DEVELOP A SIMPLE DASHBOARD FOR PROJECT MANAGEMENT WHERE THE STATUSES OF
VARIOUS TASKS ARE AVAILABLE. NEW TASKS CAN BE ADDED THE STATUS OF EXISTING
TASKS CAN BE CHANGED AMONG PENDING, INPROGRESS OR COMPLETED
AIM:
To 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.
ALGORITHM:

• Setup: Create project folder with HTML, CSS, JS (or React/Node/MongoDB).


• Database: Connect MongoDB and create a task model with title, description, and
status.
• Dashboard: Display tasks with their statuses and color-coded visual cues.
• Task Management:
Add new tasks via a form (default status: Pending).
Update existing task statuses (Pending, InProgress, Completed).
Validate forms and handle errors properly.

• Real-Time Updates: Use WebSockets for live status changes.


• Testing & Deployment: Test functionality, fix bugs, and deploy online.
• Maintenance: Monitor performance, security, and add features regularly.
PROGRAM:

[Link]
import React, { useState } from "react";
import './[Link]';
const StatusColors = {
Pending: "#ff5252",
InProgress: "#ffc107",
Completed: "#4caf50",
};
const App = () => {
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) => {
if (![Link]()) return;
const newTask = {
id: [Link] + 1,
title: newTaskTitle,
status: "Pending",
};
setTasks([...tasks, newTask]);
setInputText("");
};
const handleTaskEdit = (taskId, newTitle) => {
if (![Link]()) return;
const updatedTasks = [Link]((task) =>
[Link] === taskId ? { ...task, title: newTitle } : task
);
setTasks(updatedTasks);
setEditingTaskId(null);
setInputText("");
};
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]); setInputText([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="text"
value={inputText}
onChange={(e) => setInputText([Link])}
/>
<div className="modal-buttons">
<button onClick={() => setEditingTaskId(null)}>Cancel</button>
<button
onClick={() => handleTaskEdit(editingTaskId, inputText)}
>
Save
</button>
</div>
</div>
</div>
)}
</div>
);
};
export default App;

[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;
gap: 20px;
}
.task {
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
width: 400px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h3 {
margin-top: 0;
margin-bottom: 10px;
cursor: pointer;
}
.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;
}
.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;
}
.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;
flex: 1;
}
.add-task button {
background-color: #3f51b5;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
}
/* Optional Modal Styling */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 300px;
}
.modal-buttons {
display: flex;
justify-content: space-between;
margin-top: 10px;
}

Result:
Thus the 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.
DEVELOP AN ONLINE SURVEY APPLICATION WHERE A COLLECTION OF QUESTIONS IS
AVAILABLE AND USERS ARE ASKED TO ANSWER ANY RANDOM 5 QUESTIONS
AIM:
To Develop an online survey application where a collection of questions is available and
users are asked to answer any random 5 questions
ALGORITHM:
• Set up project folder with HTML, CSS, JS (and frameworks like React, Express,
MongoDB).
• Create a landing page to start the survey.
• Fetch 5 random questions from the database.
• Display questions one by one with answer options.
• Store user responses in the database.
• Optionally, calculate and store user score.
• Show progress indicator for remaining questions.
• Validate answers and provide feedback for correct/incorrect responses.
• Handle errors and test functionality.
• Deploy on a hosting server and monitor performance.
• Update application with new features as needed.
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>
<ul className="quiz_ul">
{[Link]((option, i) => (
<li
key={i}
className="quiz_li"
onClick={() => getChoice(i)}
>
{option}
</li>
))}
</ul>
<button
className="previous-question"
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,
},
{
question: "What does CSS stand for?",
options: [
"Cascading Style Sheet",
"Creative Style Sheet",
"Computer Style Sheet",
"Colorful Style Sheet",
],
answer: 0,
},
{
question: "Which programming language is used for building web applications?",
options: ["Python", "Java", "C#", "JavaScript"],
answer: 3,
},
{
question: "What does HTML stand for?",
options: [
"Hypertext Markup Language",
"Hypertext Model Language",
"Hyperloop Model Language",
"High-level Markup Language",
],
answer: 0,
},
{
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,
},
{
question: "Which data type is used for storing whole numbers in JavaScript?",
options: ["number", "string", "boolean", "integer"],
answer: 0,
},
{
question: "Which symbol is used for single-line comments in JavaScript?",
options: ["//", "/*", "#", "%%"],
answer: 0,
},
{
question: "What is the latest version of ECMAScript?",
options: ["ES5", "ES6", "ES7", "ES8"],
answer: 3,
},
{
question: "Which keyword is used for declaring variables in JavaScript?",
options: ["let", "var", "const", "int"],
answer: 1,
},
{
question: "Which programming language is used for developing Android apps?",
options: ["Java", "Python", "C#", "Swift"],
answer: 0,
},
];
[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;
font-size: 18px;
color: #333;
}
.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;
}

Result:
Thus the Develop an online survey application where a collection of questions is available
and users are asked to answer any random 5 questions successfully developed.
DEVELOP TO-DO APPLICATION USING NODE JS,EXPRESS JS AND MONGODB
AIM:
To Create a web application to manage the TO-DO list of users, where users can login

and manage their to-do items

ALGORITHM:

• Set up project folder and basic file structure (HTML, CSS, JS).
• Include required libraries/frameworks (React, Express, MongoDB).
• Create login and registration pages with form validation and secure password
storage.
• Implement JWT-based user authentication and logout functionality.
• Design a dashboard to view, add, edit, delete, and mark TO-DO items as complete.
• Set up database schema and connection to store TO-DO items per user.
• Provide sorting, filtering, and pagination for TO-DO items.
• Ensure proper error handling throughout the application.

PROGRAM:
Front-End
[Link]
import React, { useState } from 'react';
import axios from 'axios';
function Create() {
const [task, setTask] = useState("");
const handleAdd = (e) => {
[Link]();
[Link]("[Link] { task })
.then(() => [Link]())
.catch(err => [Link](err));
};

return (
<div className='create_form'>
<input
type="text"
placeholder='Enter Task'
value={task}
onChange={(e) => setTask([Link])}
/>
<button type="button" onClick={handleAdd}>Add</button>
</div>
);
}
export default Create;
[Link]
import React, { useState, useEffect } from 'react';
import Create from './Create';
import axios from 'axios';
import { BsCircleFill, BsFillTrashFill, BsFillCheckCircleFill } from 'react-icons/bs';
function Home() {
const [todos, setTodos] = useState([]);
useEffect(() => {
[Link]('[Link]
.then(result => setTodos([Link]))
.catch(err => [Link](err));
}, []);
const handleEdit = (id) => {
[Link]('[Link] + id)
.then(() => [Link]())
.catch(err => [Link](err));
};
const handleDelete = (id) => {
[Link]('[Link] + id)
.then(() => [Link]())
.catch(err => [Link](err));
};

return (
<div className='home'>
<h1>Todo List</h1>
<Create />
<br />
{[Link] === 0 ? (
<div><h2>No Record</h2></div>
):(
[Link](todo => (
<div key={todo._id} className='task'>
<div className='checkbox' onClick={() => handleEdit(todo._id)}>
{[Link] ?
<BsFillCheckCircleFill /> :
<BsCircleFill className='icon' />
}
<p className={[Link] ? "line_through" : ""}>{[Link]}</p>
</div>
<div>
<span>
<BsFillTrashFill className='icon' onClick={() => handleDelete(todo._id)} />
</span>
</div>
</div>
))
)}
</div>
);
}
export default Home;
Back-End ([Link] + Express + MongoDB)
[Link]
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const TodoModel = require('./Models/Todo');
const app = express();
[Link](cors());
[Link]([Link]());
[Link]('mongodb://[Link]:27017/test');
// Get all todos
[Link]('/get', (req, res) => {
[Link]()
.then(result => [Link](result))
.catch(err => [Link](err));
});
// Update todo status
[Link]('/update/:id', (req, res) => {
const { id } = [Link];
[Link](id, { done: true })
.then(result => [Link](result))
.catch(err => [Link](err));
});
// Delete todo
[Link]('/delete/:id', (req, res) => {
const { id } = [Link];
[Link](id)
.then(result => [Link](result))
.catch(err => [Link](err));
});
// Add new todo
[Link]('/add', (req, res) => {
const { task } = [Link];
[Link]({ task })
.then(result => [Link](result))
.catch(err => [Link](err));
});
[Link](3001, () => {
[Link]("Server is running on port 3001");
});
Models/[Link]
const mongoose = require('mongoose');
const TodoSchema = new [Link]({
task: String,
done: {
type: Boolean,
default: false
}
});
const TodoModel = [Link]("todos", TodoSchema);
[Link] = TodoModel;
Result:
Thus the o Create a web application to manage the TO-DO list of users, where users can
login and manage their to-do items executed auccessfully.
DEVELOP A WEATHER APPLICATION USING REACT JS

AIM:
To Create a web application by using weather app to monitoring temperature, speed,
humidity.
ALGORITHM:
• Set up project folder with HTML, CSS, JS (or React).
• Include required libraries/frameworks (React, Express, MongoDB).
• Create login/authentication system (JWT) for users.
• Design dashboard to view, add, edit, and delete weather entries.
• Create database schema for cities and weather data; connect to MongoDB.
• Allow users to manage weather items with title, description, and date.
• Implement error handling, sorting, filtering, and pagination.
• Test for functionality and usability; fix any issues.
• Deploy the app and monitor performance/security.
• Update with new features as needed.

PROGRAM:
[Link]
import React, { useState } from 'react';
const Header = ({ onSearch }) => {
const [city, setCity] = useState('');
const handleSearch = () => {
if(city) onSearch(city);
};
return (
<header>
<div className="city">
<i className="fas fa-location-crosshairs"></i>
<input
type="text"
id="cityname"
placeholder="Enter city"
value={city}
onChange={(e) => setCity([Link])}
/>
<button onClick={handleSearch}>Search</button>
</div>
<div className="weatherResult">
{city ? `Showing weather for ${city}` : 'Sunny day'}
</div>
</header>
);
};
export default Header;
[Link]
import React from 'react';
const Info = ({ weatherData }) => {
const config = [
{ label: 'Real Feel', field: 'feels_like', suffix: '°C' },
{ label: 'Humidity', field: 'humidity', suffix: '%' },
{ label: 'Pressure', field: 'pressure', suffix: 'mmHG' },
{ label: 'Wind Speed', field: 'speed', suffix: 'm/s' },
{ label: 'UV Index', field: 'uvi' },
{ label: 'Water Temperature', field: 'water' },
];
if (!weatherData) return null;
return (
<section>
<div className="layout">
{[Link]((w, index) => (
<div key={index} className="gridlayout">
{[Link]}:{' '}
<span>
{[Link] === 'speed'
? [Link]?.[[Link]]
: [Link]?.[[Link]] || weatherData[[Link]] || 'N/A'}
{[Link] && <sup>{[Link]}</sup>}
</span>
</div>
))}
</div>
</section>
);
};
export default Info;
[Link]
import React from 'react';
const Main = ({ currentDate, weatherData }) => {
if (!weatherData) return null;
return (
<main>
<div className="weekday">{currentDate}</div>
<div className="temperature">
{[Link]([Link])}<sup>°</sup>C
</div>
<div className="msgcontent">
<div className="msg">{[Link][0].description}</div>
<div className="degreeunit">
{[Link]([Link].temp_min)}<sup>°</sup> —{' '}
{[Link]([Link].temp_max)}<sup>°</sup>
</div>
</div>
</main>
);
};
export default Main;

Result:
Thus, the to create a weather app, by using application and manage their temperature and
locations are executed.

You might also like