Scribd
Upload
28 views

FSWD

The document outlines the steps to create a personal portfolio website and a web application for managing a TO-DO list. It includes algorithms for both projects, detailing the necessary components such as user authentication, database schema design, and user interface development. Additionally, it provides sample code for a simple microblogging application, emphasizing the importance of security and deployment.

Uploaded by

muralimanohar037
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
28 views

FSWD

The document outlines the steps to create a personal portfolio website and a web application for managing a TO-DO list. It includes algorithms for both projects, detailing the necessary components such as user authentication, database schema design, and user interface development. Additionally, it provides sample code for a simple microblogging application, emphasizing the importance of security and deployment.

Uploaded by

muralimanohar037
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

EX.

No : 1 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

Creating a portfolio website involves several steps, including domain registration, web
hosting, and web development. Below is a simple HTML template for a personal portfolio
website. You can customize it based on your preferences, skills, and experiences.

Algorithm:
1. Define the Structure:
● Identify the sections you want to include, such as "About Me," "Skills," "Projects," and
"Contact."
● Decide on the layout and design of your portfolio.
2. Create HTML Structure:
● Write HTML code to define the structure of your portfolio.
● Include sections like <header>, <section>, <footer>, etc.
3. Add Content:
● Fill in each section with relevant content.
● Provide a brief introduction about yourself in the "About Me" section.
● List your skills in the "Skills" section.
● Showcase your projects in the "Projects" section.
● Add contact information in the "Contact" section.
4. Apply CSS Styling:
● Write CSS code to style your portfolio.
● Choose colors, fonts, and layouts that reflect your personal brand.
5. Make it Responsive:
● Ensure your portfolio looks good on different devices (desktop, tablet, mobile).
● Use media queries to apply different styles based on screen size.
6. Test:
● Test your portfolio in various browsers to ensure compatibility.
● Check for responsiveness and fix any issues.
7. Optimize for SEO:
● Include relevant keywords in your content for better search engine optimization.
● Add meta tags and descriptions.
8. Connect Social Media:
● If applicable, include links to your LinkedIn, GitHub, or other social media profiles.
9. Implement Interactivity (Optional):
● Add interactive elements such as a form for contacting you.
● Consider using JavaScript for dynamic content if needed.
10. Deploy:
● Choose a hosting platform (GitHub Pages, Netlify, etc.) to deploy your portfolio.
Program

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
text-align: center;
padding: 2em;
}

section {
padding: 2em;
}

h1, h2, h3 {
color: #333;
}

ul {
list-style: none;
padding: 0;
}

li {
margin-bottom: 1em;
}

a{
color: #3498db;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
</style>
</head>
<body>

<header>
<h1>Your Name</h1>
<p>Web Developer</p>
</header>
<section id="about">
<h2>About Me</h2>
<p>Hi, I'm Your Name, a passionate web developer with a strong foundation in
front-end and back-end technologies. I love turning ideas into reality through code and
creating seamless, user-friendly experiences.</p>
</section>

<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>React.js</li>
<li>Node.js</li>
<li>Express.js</li>
<!-- Add more skills as needed -->
</ul>
</section>

<section id="projects">
<h2>Projects</h2>
<ul>
<li>
<h3>Project 1</h3>
<p>Description of project 1.</p>
</li>
<li>
<h3>Project 2</h3>
<p>Description of project 2.</p>
</li>
<!-- Add more projects as needed -->
</ul>
</section>

<section id="contact">
<h2>Contact</h2>
<p>Feel free to reach out to me. Let's connect!</p>
<ul>
<li>Email: <a
href="mailto:[email protected]">[email protected]</a></li>
<li>LinkedIn: <a href="https://www.linkedin.com/in/yourlinkedin">LinkedIn
Profile</a></li>
<li>GitHub: <a href="https://github.com/yourgithub">GitHub Profile</a></li>
</ul>
</section>

</body>
</html>
Output:
EX.No : 2 Create a web application to manage the TO-DO list of users,
where users can login and manage their to-do items

Aim

Create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items.

Algorithm:
1. Setup Project:
● Create a new web project using a framework like Django (Python), Express (Node.js),
or Flask (Python).
● Set up a database to store user information and TO-DO items.
2. Create User Authentication:
● Implement user registration and login functionality.
● Store user credentials securely in the database.
● Use sessions or tokens for user authentication.
3. Design Database Schema:
● Create tables for users and TO-DO items in the database.
● Establish relationships between these tables (e.g., each user can have multiple
TO-DO items).
4. Build TO-DO List Functionality:
● Create endpoints or routes for managing TO-DO items (CRUD operations - Create,
Read, Update, Delete).
● Implement functions to add, retrieve, update, and delete TO-DO items.
5. User Interface:
● Design a user-friendly interface for the TO-DO list.
● Create pages for user registration, login, and the main TO-DO list interface.
6. Integrate Frontend and Backend:
● Connect the frontend (HTML, CSS, JavaScript) to the backend (server-side code).
● Use AJAX or Fetch API for asynchronous communication between the frontend and
backend.
7. Implement User Dashboard:
● Develop a user dashboard where users can see their TO-DO items.
● Provide options to add, edit, and delete TO-DO items.
8. Security Measures:
● Implement security measures to prevent common web vulnerabilities (e.g., Cross-Site
Scripting, Cross-Site Request Forgery).
● Validate user inputs on both the client and server side.
9. User Logout:
● Implement a user logout functionality.
10. Testing:
● Test the application thoroughly for usability, security, and performance.
● Debug and fix any issues.
11. Deployment:
● Deploy the web application on a hosting platform (e.g., Heroku, AWS, Netlify).

Creating a full-fledged web application involves both front-end and back-end


development. Below is a simplified example using HTML, CSS, JavaScript for the
front end, and Node.js with Express for the back end. The application uses a simple
in-memory data store for demonstration purposes. In a real-world scenario, you would
likely use a database to store user data and to-do items.

Project Structure:

project-root/
|-- public/
| |-- index.html
| |-- style.css
| |-- script.js
|-- server.js
|-- package.json

Dependencies:

Make sure you have Node.js installed. Create a new project folder and run:

npm init -y
npm install express body-parser express-session

Program

Server Setup (server.js):

javascript

const express = require('express');


const bodyParser = require('body-parser');
const session = require('express-session');

const app = express();


const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));


app.use(bodyParser.json());
app.use(session({ secret: 'your-secret-key', resave: true, saveUninitialized: true }));

// In-memory data store (for demo purposes)


const users = [];
const todos = [];

// Middleware to check if the user is logged in


const checkAuth = (req, res, next) => {
if (!req.session.userId) {
return res.redirect('/login');
}
next();
};

// Serve static files


app.use(express.static('public'));

// Routes
app.get('/', checkAuth, (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});

app.get('/login', (req, res) => {


res.sendFile(__dirname + '/public/login.html');
});

app.post('/login', (req, res) => {


const { username, password } = req.body;

// Validate login (dummy validation for demo purposes)


const user = users.find(u => u.username === username && u.password ===
password);
if (user) {
req.session.userId = user.id;
return res.redirect('/');
}

res.redirect('/login');
});

app.get('/logout', (req, res) => {


req.session.destroy((err) => {
res.redirect('/login');
});
});

app.get('/todos', checkAuth, (req, res) => {


const userId = req.session.userId;
const userTodos = todos.filter(todo => todo.userId === userId);
res.json(userTodos);
});

app.post('/todos', checkAuth, (req, res) => {


const userId = req.session.userId;
const { title } = req.body;

// Create a new to-do item


const newTodo = {
id: todos.length + 1,
userId,
title,
completed: false
};

todos.push(newTodo);
res.json(newTodo);
});

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Frontend (public/index.html, public/style.css, public/script.js):

public/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>ToDo App</title>
</head>

<body>
<div id="app">
<h1>ToDo List</h1>
<div id="todos">
<!-- Todo items will be dynamically added here -->
</div>
<form id="addTodoForm">
<input type="text" id="todoTitle" placeholder="Add a new todo" required>
<button type="submit">Add</button>
</form>
<a href="/logout">Logout</a>
</div>
<script src="script.js"></script>
</body>

</html>

public/style.css:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}

#app {
max-width: 600px;
margin: 2em auto;
padding: 1em;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
color: #333;
}
#todos {
margin-top: 1em;
}

.todo {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 0.5em 0;
}

#addTodoForm {
margin-top: 1em;
display: flex;
}

#todoTitle {
flex: 1;
padding: 0.5em;
}

button {
padding: 0.5em;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}

a{
display: block;
margin-top: 1em;
text-align: right;
color: #007BFF;
text-decoration: none;
}

public/script.js:

js

document.addEventListener('DOMContentLoaded', () => {
const todosContainer = document.getElementById('todos');
const addTodoForm = document.getElementById('addTodoForm');
const todoTitleInput = document.getElementById('todoTitle');

// Fetch user's todos on page load


fetch('/todos')
.then(response => response.json())
.then(todos => displayTodos(todos));

// Add event listener for adding new todos


addTodoForm.addEventListener('submit', (event) => {
event.preventDefault();
const title = todoTitleInput.value;

// Add the new todo


fetch('/todos', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title })
})
.then(response => response.json())
.then(newTodo => {
displayTodo(newTodo);
todoTitleInput.value = ''; // Clear the input field
});
});

// Function to display a single todo item


const displayTodo = (todo) => {
const todoElement = document.createElement('div');
todoElement.classList.add('todo');
todoElement.innerHTML = `
<span>${todo.title}</span>
<input type="checkbox" ${todo.completed ? 'checked' : ''} disabled>
`;
todosContainer.appendChild(todoElement);
};

// Function to display all todos


const displayTodos = (todos) => {
todosContainer.innerHTML = '';
todos.forEach(todo => displayTodo(todo));
};
});

How to Run:

1. Save the server.js file and create a "public" folder with the HTML, CSS, and JavaScript files.
2. Open a terminal and navigate to the project root.
3. Run the command node server.js to start the server.
4. Open a web browser and go to http://localhost:3000.

This is a basic example,


Output:
EX.No : 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.

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:
1. Setup Project:
● Choose a web development framework (e.g., Django, Flask for Python, Express for Node.js)
to build the application.
● Set up a database to store user information, posts, and followers.
2. User Registration and Login:
● Implement user registration and login functionality.
● Store user credentials securely in the database.
● Use sessions or tokens for user authentication.
3. Create Database Schema:
● Design database tables for users, posts, and followers.
● Establish relationships between these tables (e.g., each user can have multiple posts, users
can follow each other).
4. Build Post Functionality:
● Create endpoints or routes for posting, retrieving, and deleting microblog posts.
● Implement functions to add, retrieve, and delete posts.
5. Followers System:
● Develop functionality for users to follow and unfollow other users.
● Ensure that posts from followed users appear on a user's timeline.
6. User Interface:
● Design a user-friendly interface for posting and viewing microblog posts.
● Create pages for user registration, login, the main feed, and individual user profiles.
7. Integrate Frontend and Backend:
● Connect the frontend (HTML, CSS, JavaScript) to the backend (server-side code).
● Use AJAX or Fetch API for asynchronous communication between the frontend and backend.
8. Timeline Display:
● Develop a timeline that displays posts from users the current user is following.
● Include a section for the user's own posts.
9. Security Measures:
● Implement security measures to prevent common web vulnerabilities.
● Validate user inputs on both the client and server side.
10. User Logout:
● Implement a user logout functionality.
11. Testing:
● Test the application thoroughly for usability, security, and performance.
● Debug and fix any issues.
12. Deployment:
● Deploy the microblogging application on a hosting platform (e.g., Heroku, AWS, Netlify).
Creating a microblogging application involves both front-end and back-end development. For
simplicity, I'll provide a basic example using Node.js with Express for the back end and HTML,
CSS, and JavaScript for the front end. This example uses in-memory storage, and in a
real-world scenario, you'd want to use a database.

Project Structure:

project-root/
|-- public/
| |-- index.html
| |-- style.css
| |-- script.js
|-- server.js
|-- package.json

Dependencies:
Make sure you have Node.js installed. Create a new project folder and run:
npm init -y
npm install express body-parser express-session

Program

Server Setup (server.js):

const express = require('express');


const bodyParser = require('body-parser');
const session = require('express-session');

const app = express();


const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));


app.use(bodyParser.json());
app.use(session({ secret: 'your-secret-key', resave: true, saveUninitialized: true }));

// In-memory data store (for demo purposes)


const users = [];
const posts = [];

// Middleware to check if the user is logged in


const checkAuth = (req, res, next) => {
if (!req.session.userId) {
return res.redirect('/login');
}
next();
};

// Serve static files


app.use(express.static('public'));

// Routes
app.get('/', checkAuth, (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});

app.get('/login', (req, res) => {


res.sendFile(__dirname + '/public/login.html');
});
app.post('/login', (req, res) => {
const { username, password } = req.body;

// Validate login (dummy validation for demo purposes)


const user = users.find(u => u.username === username && u.password === password);
if (user) {
req.session.userId = user.id;
return res.redirect('/');
}

res.redirect('/login');
});

app.get('/logout', (req, res) => {


req.session.destroy((err) => {
res.redirect('/login');
});
});

app.get('/posts', checkAuth, (req, res) => {


const userId = req.session.userId;
const userPosts = posts.filter(post => post.userId === userId);
res.json(userPosts);
});

app.post('/posts', checkAuth, (req, res) => {


const userId = req.session.userId;
const { content } = req.body;

// Create a new post


const newPost = {
id: posts.length + 1,
userId,
content,
timestamp: new Date().toLocaleString()
};

posts.push(newPost);
res.json(newPost);
});

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

Frontend (public/index.html, public/style.css, public/script.js):

public/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Microblog</title>
</head>
<body>
<div id="app">
<h1>Microblog</h1>
<div id="posts">
<!-- Posts will be dynamically added here -->
</div>
<form id="addPostForm">
<textarea id="postContent" placeholder="What's on your mind?" required></textarea>
<button type="submit">Post</button>
</form>
<a href="/logout">Logout</a>
</div>
<script src="script.js"></script>
</body>

</html>
public/style.css:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}

#app {
max-width: 600px;
margin: 2em auto;
padding: 1em;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
color: #333;
}

#posts {
margin-top: 1em;
}

.post {
border-bottom: 1px solid #ccc;
padding: 1em 0;
}

#addPostForm {
margin-top: 1em;
}

#postContent {
width: 100%;
padding: 0.5em;
}

button {
padding: 0.5em;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}

a{
display: block;
margin-top: 1em;
text-align: right;
color: #007BFF;
text-decoration: none;
}v

public/script.js:

document.addEventListener('DOMContentLoaded', () => {
const postsContainer = document.getElementById('posts');
const addPostForm = document.getElementById('addPostForm');
const postContentTextarea = document.getElementById('postContent');

// Fetch user's posts on page load


fetch('/posts')
.then(response => response.json())
.then(posts => displayPosts(posts));

// Add event listener for adding new posts


addPostForm.addEventListener('submit', (event) => {
event.preventDefault();
const content = postContentTextarea.value;

// Add the new post


fetch('/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content })
})
.then(response => response.json())
.then(newPost => {
displayPost(newPost);
postContentTextarea.value = ''; // Clear the input field
});
});

// Function to display a single post


const displayPost = (post) => {
const postElement = document.createElement('div');
postElement.classList.add('post');
postElement.innerHTML = `
<p>${post.content}</p>
<small>${post.timestamp}</small>
`;
postsContainer.insertBefore(postElement, postsContainer.firstChild);
};

// Function to display all posts


const displayPosts = (posts) => {
postsContainer.innerHTML = '';
posts.forEach(post => displayPost(post));
};
});

How to Run:

1. Save the server.js file and create a "public" folder with the HTML, CSS, and
JavaScript files.
2. Open a terminal and navigate to the project root.
3. Run the command node server.js to start the server.
4. Open a web browser and go to http://localhost:3000.

This is a basic example, and you can expand and enhance it based on your
specific requirements and technologies. In a real-world scenario, you would
likely use a database to store user data and posts. Additionally, you might
want to add

Output:
EX NO: 4 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 Project:
● Choose a web development framework (e.g., Django, Flask for Python, Express for Node.js)
to build the application.
● Set up a database to store restaurant information, menu items, user orders, and user
accounts.
2. Design Database Schema:
● Create tables for restaurants, menu items, users, and orders in the database.
● Establish relationships between these tables (e.g., each restaurant has multiple menu items,
each user can place multiple orders).
3. User Registration and Login:
● Implement user registration and login functionality.
● Store user credentials securely in the database.
● Use sessions or tokens for user authentication.
4. Display Restaurants and Menus:
● Create endpoints or routes to display a list of available restaurants.
● Display the menu for each restaurant with item details and prices.
5. Order Placement:
● Allow users to select items from the menu and add them to their cart.
● Implement a shopping cart system for users to review their selected items.
● Allow users to place an order with delivery details.
6. Processing Orders:
● Update the database to reflect the placed order, including details like items, quantity, delivery
address, and total cost.
● Implement order processing logic, including sending order confirmation to the user.
7. User Order History:
● Allow users to view their order history, including past orders and their current status.
8. Integration with Payment Gateway (Optional):
● If accepting online payments, integrate with a payment gateway to securely process
transactions.
9. User Interface:
● Design a user-friendly interface for browsing restaurants, viewing menus, and placing orders.
● Create pages for user registration, login, restaurant listings, and order confirmation.
10. Integrate Frontend and Backend:
● Connect the frontend (HTML, CSS, JavaScript) to the backend (server-side code).
● Use AJAX or Fetch API for asynchronous communication between the frontend and backend.
11. Security Measures:
● Implement security measures to protect user data and ensure secure transactions.
● Validate user inputs on both the client and server side.
12. Testing:
● Test the application thoroughly for usability, security, and performance.
● Debug and fix any issues.
13. Deployment:
● Deploy the food delivery website on a hosting platform (e.g., Heroku, AWS, Netlify).

Creating a complete food delivery website involves both front-end and back-end development, as well
as integration with payment gateways. For simplicity, I'll provide a basic example using HTML, CSS,
and JavaScript for the front end, and Node.js with Express for the back end. This example doesn't
include real payment processing but focuses on the ordering process.

Project Structure:

Make sure you have Node.js installed. Create a new project folder and run:

npm init -y
npm install express body-parser

Program

Server Setup (server.js):

const express = require('express');


const bodyParser = require('body-parser');

const app = express();


const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));


app.use(bodyParser.json());

// In-memory data store (for demo purposes)


const restaurants = [
{
id: 1,
name: 'Restaurant A',
menu: [
{ id: 1, name: 'Dish 1', price: 10 },
{ id: 2, name: 'Dish 2', price: 15 },
{ id: 3, name: 'Dish 3', price: 12 },
],
},
{
id: 2,
name: 'Restaurant B',
menu: [
{ id: 4, name: 'Dish 4', price: 8 },
{ id: 5, name: 'Dish 5', price: 18 },
{ id: 6, name: 'Dish 6', price: 14 },
],
},
];

// Serve static files


app.use(express.static('public'));

// Routes
app.get('/restaurants', (req, res) => {
res.json(restaurants);
});

app.get('/menu/:restaurantId', (req, res) => {


const restaurantId = parseInt(req.params.restaurantId);
const restaurant = restaurants.find(r => r.id === restaurantId);
if (restaurant) {
res.json(restaurant.menu);
} else {
res.status(404).json({ error: 'Restaurant not found' });
}
});

app.post('/order', (req, res) => {


const { restaurantId, dishes } = req.body;
const restaurant = restaurants.find(r => r.id === restaurantId);

if (!restaurant) {
return res.status(404).json({ error: 'Restaurant not found' });
}

const orderTotal = dishes.reduce((total, dish) => {


const menuDish = restaurant.menu.find(menuItem => menuItem.id === dish.id);
return total + menuDish.price * dish.quantity;
}, 0);

// In a real application, you would handle payment processing here.

res.json({ success: true, total: orderTotal });


});

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

Frontend (public/index.html, public/style.css, public/script.js):

public/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Food Delivery</title>
</head>
<body>
<div id="app">
<h1>Food Delivery</h1>
<div id="restaurants"></div>
<div id="menu"></div>
<div id="cart"></div>
<button id="checkoutBtn" disabled>Checkout</button>
</div>
<script src="script.js"></script>
</body>

</html>v

public/style.css:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}

#app {
max-width: 600px;
margin: 2em auto;
padding: 1em;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
color: #333;
}

#restaurants,
#menu,
#cart {
margin-top: 1em;
border-bottom: 1px solid #ccc;
padding-bottom: 1em;
}

.restaurant,
.menu-item,
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5em 0;
border-bottom: 1px solid #eee;
}

button {
padding: 0.5em;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}

button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

public/script.js:

document.addEventListener('DOMContentLoaded', () => {
const restaurantsContainer = document.getElementById('restaurants');
const menuContainer = document.getElementById('menu');
const cartContainer = document.getElementById('cart');
const checkoutBtn = document.getElementById('checkoutBtn');
let currentRestaurantId = null;
const cart = [];

// Fetch and display restaurants


fetch('/restaurants')
.then(response => response.json())
.then(restaurants => displayRestaurants(restaurants));

// Function to display restaurants


const displayRestaurants = (restaurants) => {
restaurantsContainer.innerHTML = '';
restaurants.forEach(restaurant => {
const restaurantElement = document.createElement('div');
restaurantElement.classList.add('restaurant');
restaurantElement.innerHTML = `<p>${restaurant.name}</p>`;
restaurantElement.addEventListener('click', () => loadMenu(restaurant.id));
restaurantsContainer.appendChild(restaurantElement);
});
};

// Function to load and display the menu of a restaurant


const loadMenu = (restaurantId) => {
currentRestaurantId = restaurantId;
fetch(`/menu/${restaurantId}`)
.then(response => response.json())
.then(menu => displayMenu(menu));
};

// Function to display the menu


const displayMenu = (menu) => {
menuContainer.innerHTML = '';
menu.forEach(item => {
const menuItemElement = document.createElement('div');
menuItemElement.classList.add('menu-item');
menuItemElement.innerHTML =
`<span>${item.name}</span><span>${item.price}$</span>`;
menuItemElement.addEventListener('click', () => addToCart(item));
menuContainer.appendChild(menuItemElement);
});
};

// Function to add an item to the cart


const addToCart = (item) => {
const existingItem = cart.find(cartItem => cartItem.id === item.id);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({ ...item, quantity: 1 });
}
displayCart();
};

// Function to display the cart


const displayCart

Output:
EX NO : 5 Develop a classifieds web application to buy and sell used
products.

AIM

TO Develop a classifieds web application to buy and sell used products.


Develop a classifieds web application to buy and sell used products

Algorithm:
1. Setup Project:
● Choose a web development framework (e.g., Django, Flask for Python, Express for Node.js)
to build the application.
● Set up a database to store user information, product listings, and transactions.
2. User Registration and Login:
● Implement user registration and login functionality.
● Store user credentials securely in the database.
● Use sessions or tokens for user authentication.
3. Design Database Schema:
● Create tables for users, products, and transactions in the database.
● Establish relationships between these tables (e.g., each user can have multiple products,
each product can be associated with a transaction).
4. Product Listings:
● Allow users to create product listings with details like title, description, price, and images.
● Implement a form for users to add and edit their product listings.
5. Browse and Search:
● Create endpoints or routes to display a list of available products.
● Implement search functionality based on categories, keywords, or location.
6. User Dashboard:
● Develop a user dashboard where users can manage their product listings.
● Include options to edit, delete, or mark items as sold.
7. Transaction System:
● Implement a system for users to communicate, negotiate, and finalize transactions.
● Update the database to reflect the status of the transaction (e.g., pending, completed).
8. Messaging System (Optional):
● If needed, implement a messaging system to facilitate communication between buyers and
sellers.
9. User Interface:
● Design a user-friendly interface for browsing products, creating listings, and managing
transactions.
● Create pages for user registration, login, product listings, and transaction details.
10. Integrate Frontend and Backend:
● Connect the frontend (HTML, CSS, JavaScript) to the backend (server-side code).
● Use AJAX or Fetch API for asynchronous communication between the frontend and backend.
11. Security Measures:
● Implement security measures to protect user data and ensure secure transactions.
● Validate user inputs on both the client and server side.
12. Testing:
● Test the application thoroughly for usability, security, and performance.
● Debug and fix any issues.
13. Deployment:
● Deploy the classifieds web application on a hosting platform (e.g., Heroku, AWS, Netlify).

Developing a classifieds web application involves both front-end and back-end development, along
with features for user authentication, product listings, and interactions. Below is a simplified example
using HTML, CSS, and JavaScript for the front end, and Node.js with Express for the back end. This
example uses in-memory storage for simplicity, and in a real-world scenario, you'd want to use a
database.

Project Structure:

project-root/
|-- public/
| |-- index.html
| |-- style.css
| |-- script.js
|-- server.js
|-- package.json

Dependencies:

Make sure you have Node.js installed. Create a new project folder and run:

bash

npm init -y
npm install express body-parser express-sessionv

Program

Server Setup (server.js):

const express = require('express');


const bodyParser = require('body-parser');
const session = require('express-session');

const app = express();


const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));


app.use(bodyParser.json());
app.use(session({ secret: 'your-secret-key', resave: true, saveUninitialized: true }));

// In-memory data store (for demo purposes)


const users = [];
const products = [];

// Middleware to check if the user is logged in


const checkAuth = (req, res, next) => {
if (!req.session.userId) {
return res.redirect('/login');
}
next();
};

// Serve static files


app.use(express.static('public'));

// Routes
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});

app.get('/login', (req, res) => {


res.sendFile(__dirname + '/public/login.html');
});

app.post('/login', (req, res) => {


const { username, password } = req.body;

// Dummy user authentication for demo purposes


const user = users.find(u => u.username === username && u.password === password);
if (user) {
req.session.userId = user.id;
return res.redirect('/');
}

res.redirect('/login');
});

app.get('/logout', (req, res) => {


req.session.destroy((err) => {
res.redirect('/login');
});
});

app.get('/products', (req, res) => {


res.json(products);
});

app.post('/products', checkAuth, (req, res) => {


const userId = req.session.userId;
const { title, description, price } = req.body;

// Create a new product listing


const newProduct = {
id: products.length + 1,
userId,
title,
description,
price,
};

products.push(newProduct);
res.json(newProduct);
});

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

Frontend (public/index.html, public/style.css, public/script.js):

public/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Classifieds</title>
</head>

<body>
<div id="app">
<h1>Classifieds</h1>
<div id="productForm">
<h2>Post a Product</h2>
<form id="postProductForm">
<label for="title">Title:</label>
<input type="text" id="title" name="title" required>
<label for="description">Description:</label>
<textarea id="description" name="description" required></textarea>
<label for="price">Price:</label>
<input type="number" id="price" name="price" required>
<button type="submit">Post</button>
</form>
</div>
<div id="products"></div>
<a href="/logout">Logout</a>
</div>
<script src="script.js"></script>
</body>

</html>

public/style.css:

css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}
#app {
max-width: 800px;
margin: 2em auto;
padding: 1em;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1,
h2 {
color: #333;
}

#productForm {
margin-bottom: 2em;
}

form {
display: grid;
gap: 1em;
}

label {
font-weight: bold;
}

input,
textarea {
width: 100%;
padding: 0.5em;
}

button {
padding: 0.5em;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}

a{
display: block;
margin-top: 1em;
text-align: right;
color: #007BFF;
text-decoration: none;
}

public/script.js:

document.addEventListener('DOMContentLoaded', () => {
const productForm = document.getElementById('productForm');
const postProductForm = document.getElementById('postProductForm');
const productsContainer = document.getElementById('products');

// Fetch and display products on page load


fetch('/products')
.then(response => response.json())
.then(products => displayProducts(products));
// Add event listener for submitting the product form
postProductForm.addEventListener('submit', (event) => {
event.preventDefault();
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const price = document.getElementById('price').value;

// Add the new product


fetch('/products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ title, description, price }),
})
.then(response => response.json())
.then(newProduct => {
displayProduct(newProduct);
// Clear the form fields
postProductForm.reset();
});
});

// Function to display a single product


const displayProduct = (product) => {
const productElement = document.createElement('div');
productElement.innerHTML = `
<h3>${product.title}</h3>
<p>${product.description}</p>
<p>${product.price}$</p>
`;
productsContainer.appendChild(productElement);
};

// Function to display all products


const displayProducts = (products) => {
productsContainer.innerHTML = '';
products.forEach(product => displayProduct(product));
};
});

How to Run:

1. Save the server.js file and create a "public" folder with the HTML, CSS, and JavaScript files.
2. Open a terminal and navigate to the project
Output:
EX NO : 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.

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. Initialize Leave Balances:
● Set initial leave balances for each employee, including casual leave and medical leave.
2. User Authentication:
● Implement a user authentication system to ensure that only authorized users can access the
leave management system.
3. Leave Application:
● Allow users to apply for different types of leaves (e.g., casual leave, medical leave).
● Collect details such as leave type, start date, end date, and reason for the leave.
4. Validate Leave Application:
● Validate the leave application, checking for constraints such as overlapping leave periods or
exceeding available leave balances.
5. Update Leave Balances:
● If the leave application is valid, update the leave balances for the user.
6. View Leave Balances:
● Provide an option for users to view their available leave balances for different types of leaves.
7. Leave Approval:
● Implement an approval workflow where designated personnel (e.g., managers, HR) can
review and approve or reject leave applications.
8. Notification System:
● Optionally, implement a notification system to notify users about the status of their leave
applications.
9. View Leave History:
● Allow users to view their leave history, including past leave applications and their statuses.
10. Security Measures:
● Implement security measures to protect user data and ensure secure leave transactions.
11. Logging:
● Implement logging to record leave-related activities for auditing purpose

Project Structure:

project-root/
|-- public/
| |-- index.html
| |-- style.css
| |-- script.js
|-- server/
| |-- server.js
| |-- models/
| |-- User.js
| |-- Leave.js
|-- package.json

Dependencies:

Make sure you have Node.js installed. Create a new project folder and run:v
npm init -y
npm install express body-parser mongoose express-session

PROGRAM

Backend (server/server.js):

javascript

const express = require('express');


const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const session = require('express-session');

const app = express();


const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));


app.use(bodyParser.json());
app.use(session({ secret: 'your-secret-key', resave: true, saveUninitialized:
true }));

mongoose.connect('mongodb://localhost:27017/leavemanagement', {
useNewUrlParser: true, useUnifiedTopology: true });
mongoose.set('useFindAndModify', false);

// Models
const User = require('./models/User');
const Leave = require('./models/Leave');

// Middleware to check if the user is logged in


const checkAuth = (req, res, next) => {
if (!req.session.userId) {
return res.redirect('/login');
}
next();
};
// Serve static files
app.use(express.static('public'));

// Routes
app.get('/', checkAuth, (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});

app.get('/login', (req, res) => {


res.sendFile(__dirname + '/public/login.html');
});

app.post('/login', async (req, res) => {


const { username, password } = req.body;

try {
const user = await User.findOne({ username, password });
if (user) {
req.session.userId = user._id;
return res.redirect('/');
}

res.redirect('/login');
} catch (error) {
console.error(error);
res.status(500).send('Internal Server Error');
}
});

app.get('/logout', (req, res) => {


req.session.destroy((err) => {
res.redirect('/login');
});
});

app.get('/leave', checkAuth, async (req, res) => {


try {
const userId = req.session.userId;
const user = await User.findById(userId);
res.json({ casualLeave: user.casualLeave, medicalLeave:
user.medicalLeave });
} catch (error) {
console.error(error);
res.status(500).send('Internal Server Error');
}
});

app.post('/leave/apply', checkAuth, async (req, res) => {


const userId = req.session.userId;
const { leaveType, days } = req.body;

try {
const user = await User.findById(userId);
if (!user) {
return res.status(404).json({ error: 'User not found' });
}

if (leaveType === 'casualLeave' && user.casualLeave >= days) {


user.casualLeave -= days;
} else if (leaveType === 'medicalLeave' && user.medicalLeave >= days) {
user.medicalLeave -= days;
} else {
return res.status(400).json({ error: 'Insufficient leave balance' });
}

const leaveRecord = new Leave({ userId, leaveType, days });


await leaveRecord.save();
await user.save();

res.json({ success: true });


} catch (error) {
console.error(error);
res.status(500).send('Internal Server Error');
}
});

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

Backend Models (server/models/User.js):

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({


username: { type: String, required: true, unique: true },
password: { type: String, required: true },
casualLeave: { type: Number, default: 10 },
medicalLeave: { type: Number, default: 5 },
});

const User = mongoose.model('User', userSchema);

module.exports = User;

Backend Models (server/models/Leave.js):


javascript

const mongoose = require('mongoose');

const leaveSchema = new mongoose.Schema({


userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true
},
leaveType: { type: String, enum: ['casualLeave', 'medicalLeave'], required:
true },
days: { type: Number, required: true },
createdAt: { type: Date, default: Date.now },
});

const Leave = mongoose.model('Leave', leaveSchema);

module.exports = Leave;

Frontend (public/index.html, public/style.css, public/script.js):

public/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Leave Management System</title>
</head>

<body>
<div id="app">
<h1>Leave Management System</h1>
<div id="leaveBalance">
<h2>Leave Balance</h2>
<p>Casual Leave: <span id="casualLeave"></span></p>
<p>Medical Leave: <span id="medicalLeave"></span></p>
</div>
<div id="applyLeaveForm">
<h2>Apply for Leave</h2>
<form id="leaveForm">
<label for="leaveType">Leave Type:</label>
<select id="leaveType" name="leaveType" required>
<option value="casualLeave">Casual Leave</option>
<option value="medicalLeave">Medical Leave</option>
</select>
<label for="days">Number of Days:</label>
<input type="number" id="days" name="days" required>
<button type="submit">Apply</button>
</form>
</div>
<a href="/logout">Logout</a>
</div>
<script src="script.js"></script>
</body>

</html>

public/style.css:

css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}

#app {
max-width: 600px;
margin: 2em auto;
padding: 1em;
background-color: white;
box-shadow: 0body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}

#app {
max-width: 600px;
margin: 2em auto;
padding: 1em;
background-color: white;
box-shadow: 0
Output:
EX NO : 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.

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:
1. Initialize Project Management Dashboard:
● Create a data structure to store tasks and their statuses (e.g., a dictionary).
2. Add Task:
● Accept input for the new task name.
● Check if the task already exists. If not, add the task with an initial status of "Pending."
3. View Tasks:
● Display the current list of tasks along with their statuses.
4. Update Task Status:
● Accept input for the task name and the new status (Pending, InProgress, Completed).
● Check if the task exists. If yes, update its status; otherwise, display an error message.

Algorithm:
1. Initialize Project Management Dashboard:
● Create a data structure to store tasks and their statuses (e.g., a dictionary).
2. Add Task:
● Accept input for the new task name.
● Check if the task already exists. If not, add the task with an initial status of "Pending."
3. View Tasks:
● Display the current list of tasks along with their statuses.
4. Update Task Status:
● Accept input for the task name and the new status (Pending, InProgress, Completed).
● Check if the task exists. If yes, update its status; otherwise, display an error message.

PROGRAM

class ProjectManagementDashboard:
def __init__(self):
self.tasks = {}

def add_task(self, task_name):


if task_name not in self.tasks:
self.tasks[task_name] = "Pending"
print(f"Task '{task_name}' added successfully.")
else:
print(f"Task '{task_name}' already exists.")
def view_tasks(self):
print("\nCurrent Tasks:")
for task, status in self.tasks.items():
print(f"{task}: {status}")

def update_task_status(self, task_name, new_status):


if task_name in self.tasks:
self.tasks[task_name] = new_status
print(f"Status of Task '{task_name}' updated to '{new_status}'.")
else:
print(f"Task '{task_name}' not found.")

# Sample Usage
if __name__ == "__main__":
dashboard = ProjectManagementDashboard()

# Adding tasks
dashboard.add_task("Task 1")
dashboard.add_task("Task 2")
dashboard.add_task("Task 3")

# Viewing tasks
dashboard.view_tasks()

# Updating task status


dashboard.update_task_status("Task 1", "InProgress")
dashboard.update_task_status("Task 2", "Completed")

# Viewing tasks after updates


dashboard.view_tasks()

Sample Input and Output:


Sample Input:

1. Add Task:
● Task Name: Task 1
2. Add Task:
● Task Name: Task 2
3. View Tasks:
● (Output) Current Tasks:
● Task 1: Pending
● Task 2: Pending
4. Update Task Status:
● Task Name: Task 1
● New Status: InProgress
5. Update Task Status:
● Task Name: Task 2
● New Status: Completed
6. View Tasks:
● (Output) Updated Tasks:
● Task 1: InProgress
● Task 2: Completed

Output:
EX NO: 8 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:
1. Initialize Questions:
● Create a list of survey questions.
2. Shuffle Questions:
● Shuffle the list of questions to present them in a random order.
3. User Survey:
● Iterate over the first 5 questions from the shuffled list.
● Prompt the user to answer each question.
4. Store User Responses:
● Store user responses in a dictionary.
5. Display Survey Results:
● Print the questions along with the user's responses.

PROGRAM

import random

class SurveyApplication:
def __init__(self):
self.questions = [
"What is your favorite color?",
"How often do you exercise?",
"What is your preferred programming language?",
"Do you enjoy reading books?",
"What is your favorite movie genre?",
"How many hours of sleep do you get per night?"
# Add more questions as needed
]

def conduct_survey(self):
print("Welcome to the Online Survey Application!")
print("Please answer any 5 questions.")

# Shuffle the questions to get a random order


random.shuffle(self.questions)
# Initialize a dictionary to store user responses
user_responses = {}

for i in range(5):
current_question = self.questions[i]
user_response = input(f"{i + 1}. {current_question} ")

# Store the user's response in the dictionary


user_responses[current_question] = user_response

print("\nSurvey completed! Thank you for your responses.")


print("User Responses:")
for question, response in user_responses.items():
print(f"{question}: {response}")

# Sample Usage
if __name__ == "__main__":
survey_app = SurveyApplication()
survey_app.conduct_survey()

Output:
EX NO: 9 Develop the basic web application using MERN stack

AIM
To develop a web application using the MERN stack where a collection of questions is
stored in a database, and users are asked to answer any 5 randomly selected questions.

Algorithm
1. Set Up MongoDB Database:

Create a MongoDB database to store survey questions and user responses.

2. Backend Setup (Node.js and Express):

Set up an Express server with endpoints to:

Fetch 5 random questions.

Save user responses.

3. Frontend Setup (React):

Create a React app with a form to display the survey questions and capture
user responses.

4. Fetch Random Questions:

When the page loads, fetch 5 random questions from the backend.

5. Handle User Responses:

Capture responses for each question.

Submit responses to the backend.

6. Save Responses in Database:

Store the user’s responses in the MongoDB database and send a


confirmation message.

PROGRAM

1. Backend Setup

i. server.js (Node.js + Express)


// server.js

const express = require('express');

const mongoose = require('mongoose');

const cors = require('cors');

const Question = require('./models/Question');

const Response = require('./models/Response');

const app = express();

app.use(cors());

app.use(express.json());

const PORT = 5000;

// Connect to MongoDB

mongoose.connect('mongodb://localhost:27017/surveyApp', { useNewUrlParser:
true, useUnifiedTopology: true })

.then(() => console.log("Connected to MongoDB"))

.catch(error => console.error("Error connecting to MongoDB:", error));

// API to fetch 5 random questions

app.get('/api/questions', async (req, res) => {

try {

const questions = await Question.aggregate([{ $sample: { size: 5 } }]);

res.json(questions);

} catch (error) {

res.status(500).json({ error: 'Failed to fetch questions' });

}
});

// API to submit user responses

app.post('/api/submit', async (req, res) => {

try {

const response = new Response({ answers: req.body.answers });

await response.save();

res.json({ message: 'Responses saved successfully!' });

} catch (error) {

res.status(500).json({ error: 'Failed to save responses' });

});

app.listen(PORT, () => {

console.log(`Server running on http://localhost:${PORT}`);

});

ii. Database Models


In a folder named models, create two Mongoose models: Question and Response.

models/Question.js

// models/Question.js
const mongoose = require('mongoose');

const questionSchema = new mongoose.Schema({


text: { type: String, required: true }
});

module.exports = mongoose.model('Question', questionSchema);


// models/Response.js
const mongoose = require('mongoose');

const responseSchema = new mongoose.Schema({


answers: [{ question: String, answer: String }]
});

module.exports = mongoose.model('Response', responseSchema);

2. Frontend Setup (React)

i. App Component (App.js)

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
const [questions, setQuestions] = useState([]);
const [answers, setAnswers] = useState({});
const [message, setMessage] = useState('');

// Fetch random questions on component mount


useEffect(() => {
async function fetchQuestions() {
try {
const response = await axios.get('http://localhost:5000/api/questions');
setQuestions(response.data);
} catch (error) {
console.error("Error fetching questions:", error);
}
}
fetchQuestions();
}, []);

// Handle form submission


const handleSubmit = async (e) => {
e.preventDefault();
try {
await axios.post('http://localhost:5000/api/submit', { answers:
Object.entries(answers).map(([question, answer]) => ({ question, answer })) });
setMessage('Thank you for your answers!');
} catch (error) {
console.error("Error submitting answers:", error);
setMessage('Failed to submit your answers.');
}
};

// Handle answer input


const handleInputChange = (question, value) => {
setAnswers(prevAnswers => ({ ...prevAnswers, [question]: value }));
};

return (
<div className="App">
<h1>Online Survey</h1>
{message && <p>{message}</p>}
<form onSubmit={handleSubmit}>
{questions.map((q, index) => (
<div key={index}>
<label>{q.text}</label>
<input
type="text"
value={answers[q.text] || ''}
onChange={(e) => handleInputChange(q.text, e.target.value)}
required
/>
</div>
))}
<button type="submit">Submit Answers</button>
</form>
</div>
);
}

export default App;

ii. Styles (App.css)

b/* src/App.css */
.App {
max-width: 600px;
margin: auto;
padding: 20px;
font-family: Arial, sans-serif;
}

h1 {
text-align: center;
}

form div {
margin-bottom: 15px;
}

label {
display: block;
font-weight: bold;
}

input {
width: 100%;
padding: 8px;
margin-top: 5px;
}

button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}

utton:hover {
background-color: #218838;
}

3. Running the Application

1. Setup MongoDB:
○ Ensure MongoDB is running on your local machine.
2. Install Dependencies:
○ In the root project directory (where server.js is located):
bash

3. Run the Backend:

Start the server from the root project directory

4. Run the Frontend:


In the React app directory, start the React app:

Access the Application:

Open your browser and navigate to http://localhost:3000 to interact with the survey
application.

PROGRAM

npm install express mongoose cors

npm install axios

node server.js

npm start

OUTPUT:

You might also like