Department of

____________________Laboratory

Record

Name of the Student :_________________________

Register Number :_________________________

Department :_________________________

Semester :_________________________

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 7

 BONAFIDE CERTIICATE
University Reg.No. ____________________________ This is to certify that this is a bonafide

record work done by Mr./Miss._______________________________________________

studying B.E/BTech., _____________________________________________Department in

the_________________________ Laboratory for ___________________________Semester.

_______________________ ____________________

Staff-in-Charge Head of the Department

Submitted for the University Practical examination held on __________________ at

Velammal Institute of Technology

______________________ ______________________

Internal Examiner External Examiner

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 8

 CONTENTS
Ex. Date Title of the Experiment Page Teacher
No. No. Sign
1. Develop a portfolio website for yourself which 14
gives details about yourself for a potential
recruiter.
2. Create a web application to manage the TO- DO 18
list of users, where users can login and manage
their to-do items
3 Create a simple micro blogging application (like 22
twitter) that allows people to post their content
which can be viewed by people who follow
them.

4 Create a food delivery website where users can 28

order food from a particular restaurant listed in
the website.
5 Develop a classifieds web application to buy and 32
sell used products.

6 Develop a leave management system for an 35

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.

7 Develop a simple dashboard for project 41

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, In Progress or Completed.

8 Develop an online survey application where a 46

collection of questions is available and users are
asked to answer any random 5 questions.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 9

 Vision and Mission of the College

Vision of Institute
Velammal Institute of Technology is committed to be a leader in innovative work force development
and a world class learning venue for the ever changing needs of business and Industry.

Mission of Institute
 To promote quality education & technical skills to meet the industry requirements.
 To incorporate Team work, Leadership skills & Lifelong learning.
 To facilitate Career development & Higher education assistance
 To encourage innovative ideas for Research & Development and Entrepreneurship for societal
needs.
 To inculcate Ethical responsibility & Human values

Department of Information Technology

Vision and Mission of Department of Information Technology

Vision of the Department

To be a center of excellence in the field of Information Technology to solve complex industrial and
societal needs.

Mission of the Department

 Imparting strong knowledge to students in recent technologies by organizing various technical
events.
 Providing platform for the students to encourage creativity, team work, leadership quality and
social responsibility
 Developing the employability and entrepreneurial skills of the students by conducting industry
collaborated training.
 Inculcating the importance of research and higher education through awareness programs.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 10

 Department of Information Technology
Programme Educational Objectives (PEOs) & Program Specific Outcomes

Programme Educational Objectives

PEO I:
Graduate will have strong computing knowledge and they are capable to deliver their technical skills
in the field of IT.

PEO II:
Graduate will work collaboratively in multidisciplinary environment or run business venture and
exhibit high level of professional and ethical values.

Program Specific Outcomes

PSO1: Ability to apply the knowledge of Engineering fundamentals, Data structures and Algorithms,
Operating Systems, Database Systems, Software Engineering, Programming Language, Digital
systems, Computer Networks, cloud computing, Artificial intelligence and Data analytics.

Velammal Knowledge Park, Panchetti, Chennai-601 204

PSO2: Ability to apply modern tools and technologies to develop research and innovative solutions
to contribute societal and industrial needs.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 11

 Program Outcomes
Program Outcomes
Engineering knowledge: Apply the knowledge of mathematics, science, engineering
PO1 fundamentals, and an engineering specialization to the solution of complex engineering
problems.
Problem analysis: Identify, formulate, review research literature, and analyze complex
PO2 engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
PO3 consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
Conduct investigations of complex problems: Use research-based knowledge and research
PO4 methods including design of experiments, analysis and interpretation of data, and synthesis
of the information to provide valid conclusions.
Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
PO5 engineering and IT tools including prediction and modeling to complex engineering
activities with an understanding of the limitations.
The engineer and society: Apply reasoning informed by the contextual knowledge to assess
PO6 societal, health, safety, legal and cultural issues and the consequent responsibilities relevant
to the professional engineering practice.
Environment and sustainability: Understand the impact of the professional engineering
PO7 solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
PO8 norms of the engineering practice.
Individual and team work: Function effectively as an individual, and as a member or
PO9 leader in diverse teams, and in multidisciplinary settings.
Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
PO10 write effective reports and design documentation, make effective presentations, and give and
receive clear instructions.
Project management and finance: Demonstrate knowledge and understanding of the
PO11 engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
Life-long learning: Recognize the need for, and have the preparation and ability to engage
PO12 in independent and life-long learning in the broadest context of technological change.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 12

 IT3511 FULL STACK WEB DEVELOPMENT
LAB MANUAL

LIST OF PRACTICAL EXERCISES

1. Develop a portfolio website for yourself which gives details about yourself for a potential recruiter.
2. Create a web application to manage the TO- DO list of users, where users can login and manage
their to-do items

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.

4.Create a food delivery website where users can order food from a particular restaurant listed in the website

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

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.

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, In Progress or
Completed.

8. Develop an online survey application where a collection of questions is available and users are asked to
answer any random 5 questions

TOTAL: 60 Periods

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 13

 Exp No: 1
Develop a portfolio website for yourself which gives details about yourself for
Date: a potential recruiter

AIM:
To develop a portfolio website for yourself which gives details about yourself for a potential recruiter.

ALGORITHM:

STEP 1: Start

STEP 2: Open a HTML compiler.

STEP 3: Create a portfolio website

STEP 4: Create a hero section

STEP 5: Create a about me section

STEP 6: Create project section

STEP 7: Create contact me section

STEP 8: Compile with HTML code

STEP 9: After finished the code

STEP 10: Execute in the compiler

STEP 11: Stop

PROGRAM :

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="styles.css">
<title>Your Portfolio</title></head>
<body>
<header>
<h1>Your Name</h1>

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 14

<p>Web Developer</p>
</header>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="about">
<h2>About Me</h2>
<p>Write a brief introduction about yourself.</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<div class="project">
<h3>Project Title 1</h3>
<p>Description of the project. Mention technologies used.</p>
<a href="#">View Project</a>
</div>
<div class="project">
<h3>Project Title 2</h3>
<p>Description of the project. Mention technologies used.</p>
<a href="#">View Project</a>
</div>
</section>

<section id="contact">
<h2>Contact Me</h2>
<p>Email: [email protected]</p>
<p>LinkedIn: <a href="#">linkedin.com/yourprofile</a></p>
</section>
<footer>
<p>&copy; 2023 Your Name</p>
</footer>
</body>
</html>
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 15
 CSS:

/* Reset some default styles */

body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
}

header {
background-color: #333;
colour: white;
text-align: center;
padding: 1em 0;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
background-color: #444;
padding: 0.5em 0;
}

nav ul li {
margin: 0 1em;
}

nav a {
color: white;
text-decoration: none;
}
section {
padding: 2em;
}

.project {
margin-bottom: 1em;
border: 1px solid #ddd;
padding: 1em;
}

footer {
text-align: center;
padding: 1em 0;
background-color: #333;
color: white;
}

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 16

OUTPUT:

RESULT:

Thus the program was implemented and the output is verified successfully.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 17

 Exp No: 2 Create a web application to manage the to-do list of users, where users can
login and manage their to-do items.
Date:

AIM:

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

ALGORITHM:

STEP 1: Start

STEP 2: Choose a frontend frame work

STEP 3: Set up the project using a tool like formidable.

STEP 4: Design and create the user interface for registration ,login and the TO-DO

STEP 5: Implement user registration and login functions using Authentication STEP 6:

Build components to display add ,update and delete To-do items

STEP 7: Use state manager to manage the application .

STEP 8: Stop

PROGRAM:
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>Document</title>
</head>
<body>
<div id="wrapper">
<h2>ToDo List</h2>
<input type="text" id="txtInput">
<button id="btnAdd">Add</button>
<div id="divTodoList">

</div>
</div>

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 18

 <script src="todo.js"></script>
</body>
</html Style.css
html,
body{
margin: 0;
font-family: 'Poppins', sans-serif;
background-color:#f5e8ba;
}

#wrapper h2{
display:flex;
justify-content: center;

h2{
color:#ffeba7;
letter-spacing: 1px;
}
input{
border-radius: 5px;
border: 2px solid black ;
margin-top:30px;
height:2.5em;
width:250px;
padding-left:10px;
}

input:active{
border:none;
}
#wrapper{
height:500px;
width:400px;
margin:200px auto;
background-color:#1f2029;
border-radius:10px;
padding:30px;
}

button{
margin-top:20px; background-color:#ffeba7;

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 19

 border-radius: 4px;
height: 44px;
font-weight: 600;
padding: 0 30px;
letter-spacing: 1px;
border: none;
color: #102770;
}

button:hover{
cursor:pointer;
}
#todoList{
color:white;
font-size:28px;
margin-top:10px;
}

#todoList p{
margin:10px 0px;
}

#todoList p:hover{
cursor: pointer;
}
Coding:

Todo.js:

let button=document.getElementById('btnAdd');
let todoList=document.getElementById('divTodoList');
let input=document.getElementById('txtInput');

let todos=[];
window.console=()=>{
todos=JSON.parse(localStorage.getItem('todos'))||[]
todos.foreach(todo=>addtodo(todo))

button.addEventListener('click',()=>{
todos.push(input.value);
localStorage.setItem('todos',JSON.stringify(todos))

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 20

 addtodo(input.value);
input.value='';

})
function addtodo(todo)
{
let para=document.createElement('p');
para.innerText=todo;
todoList.appendChild(para);

para.addEventListener('click',()=>{
para.style.textDecoration='line-through'
remove(todo)
})
para.addEventListener('dblclick',()=>{
todoList.removeChild(para)
remove(todo)
})

}
function remove(todo){
let index=todos.indexOf(todo)
if(index>-1)
todo.splice(index,1)
localStorage.setIte('todos',JSON.stringify(todos))
}
OUTPUT:

RESULT:

Thus the program was implemented and the output is verified successfully.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 21

 Exp No : 3
Create a simple micro blogging application (like twitter) that allows
Date: people to post their content which can be viewed by people who follow
them.

AIM:

To create a simple micro blogging application that allows peoples to post their content which can be viewed
by people who follow them.

ALGORITHM:

STEP 1: Start

STEP 2: Fetch followed users to retrieve the list of users that Currently logged-in user

STEP 3: Fetch post for each followed user ,retrieve their most Recent post

STEP 4: User registration and authentication make the user Can sign up with their credentials and login
securely.

STEP 5: Combine post merge the fetched posts from all followed users into single list

STEP 6: Pagination is the thing where large numbers of post, implement pagination to lead and display
posts in chunks alter than all at once

PROGRAM:

index.js
const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const path = require('path');

const app = express();

const PORT = 8080;

// Middleware
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public')));

// Function to read blog posts

const readBlogPosts = () => {
const data = fs.readFileSync('blog.json');
return JSON.parse(data);
};

// Function to write blog posts

const writeBlogPosts = (posts) => {
fs.writeFileSync('blog.json', JSON.stringify(posts, null, 2));
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 22
};

// Route to get all blog posts

app.get('/posts', (req, res) => {
const posts = readBlogPosts();
res.json(posts);
});

// Route to create a new blog post

app.post('/posts', (req, res) => {
const posts = readBlogPosts();
const newPost = {
id: posts.length + 1,
title: req.body.title,
content: req.body.content,
date: new Date().toISOString()
};
posts.push(newPost);
writeBlogPosts(posts);
res.status(201).json(newPost);
});

// Start the server

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
----------------
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Blog App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Blog Posts</h1>
<div id="posts"></div>

<h2>Create a New Post</h2>

<form id="postForm">
<input type="text" id="title" placeholder="Title" required>
<textarea id="content" placeholder="Content" required></textarea>
<button type="submit">Create Post</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
-----
style.css
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 23
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}

.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

input, textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px;
background: #5cb85c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background: #4cae4c;
}

.post {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

script.js
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 24
const postForm = document.getElementById('postForm');
const postsContainer = document.getElementById('posts');

// Function to fetch and display posts

const fetchPosts = async () => {
const response = await fetch('/posts');
const posts = await response.json();
postsContainer.innerHTML = '';
posts.forEach(post => {
const postDiv = document.createElement('div');
postDiv.className = 'post';
postDiv.innerHTML = `
<h3>${post.title}</h3>
<p>${post.content}</p>
<small>${new Date(post.date).toLocaleString()}</small>
`;
postsContainer.appendChild(postDiv);
});
};

// Function to handle form submission

postForm.addEventListener('submit', async (event) => {
event.preventDefault();
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;

const response = await fetch('/posts', {

method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ title, content }),
});

if (response.ok) {
postForm.reset();
fetchPosts(); // Refresh the post list
} else {
alert('Error creating post');
}
});

// Initial fetch of posts

fetchPosts();

blog.json:
[
{
"id": 1,
"title": "hi",
"content": "how ru\n",
"date": "2024-09-22T16:06:10.326Z"
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 25
 },
{
"id": 2,
"title": "hi ",
"content": "hello",
"date": "2024-09-22T16:06:22.830Z"
},
{
"id": 3,
"title": "hi",
"content": "this is new blog",
"date": "2024-09-22T16:19:35.367Z"
}
]

OUTPUT:

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 26

RESULT:

Thus the program was implemented and the output is verified successfully.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 27

 Exp No : 4 Create a food delivery website where users can order food from a
particular restaurant listed in the website.
Date:

AIM:

To create a food delivery website where users can order food from a particular restaurant listed in the
website.

ALGORITHM:
STEP 1: Open a HTML compiler
STEP 2: Create a food delivery website
STEP 3: Create a image for the front page
STEP 4: Design the front page using CSS
STEP 5: For functioning use java script
STEP 6: Link CSS, java script in HTML
STEP 7: Compile the code
STEP 8: After finished the code
STEP 9: Excute in the browser
STEP 10: Stop
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Food Delivery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Food Delivery</h1>
<nav><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 28

 <section class="restaurant-list">
<h2>Featured Restaurants</h2>
<div class="restaurant">
<imgsrc="restaurant1.jpg" alt="Restaurant 1">
<h3>Restaurant 1</h3>
<p>Delicious cuisine from around the world.</p>
<a href="restaurant1.html">Order Now</a>
</div>
<div class="restaurant">
<imgsrc="restaurant2.jpg" alt="Restaurant 2">
<h3>Restaurant 2</h3>
<p>Fresh and local ingredients.</p>
<a href="restaurant2.html">Order Now</a>
</div>
<!-- Add more restaurant entries here -->
</section>
<footer>
<p>&copy; 2023 Food Delivery</p>
</footer>
</body>
</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 Website</title>
<imgsrc="restaurant1.jpg" alt="Restaurant 1">
<h2>Restaurant 1</h2>
<p>Delicious dishes for every taste.</p>
<a href="menu.html">Order Now</a>
</div<!-- Repeat the above structure for more restaurants -->
</section>
</body>
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 29
</html> body
{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.restaurant-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.restaurant {
border: 1px solid #ddd;
padding: 20px;
margin: 20px;
text-align: center;
max-width: 300px;
}
.restaurant a {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
ransition: background-color 0.3s;

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 30

}
.restaurant a:hover {
background-color: #555;
}

OUTPUT:

RESULT:
Thus the program was implemented and the output is verified successfully.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 31

 Exp No: 5 Develop a classifieds web application to buy and sell used
products.
Date:

AIM:
To develop a classifieds web application to buy and sell used products

ALGORITHM:
Step 1: Create a React app using create-react-app.
Step 2: Use axios for making API requests to the backend.
Step 3: Implement components for displaying a list of products and adding a new product.Manage
state using useState and useEffect.
Step 4: Set up routes using react-router-dom for different pages.

App.js

import React, { useState } from 'react';

import './App.css';

const App = () => {

// State to hold the cart items
const [cart, setCart] = useState([]);

// Sample items to add to the cart

const items = [
{ id: 1, name: 'Laptop', price: 1000 },
{ id: 2, name: 'Smartphone', price: 500 },
{ id: 3, name: 'Headphones', price: 100 },
{ id: 4, name: 'Keyboard', price: 50 }
];

// Add item to cart

const addToCart = (item) => {
setCart([...cart, item]);
};

// Remove item from cart

const removeFromCart = (id) => {
setCart(cart.filter(item => item.id !== id));
};

// Calculate total price

const getTotalPrice = () => {
return cart.reduce((total, item) => total + item.price, 0);
};

return (
<div className="App">
<h1>Shopping Cart</h1>
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 32
 <div className="item-list">
<h2>Items</h2>
{items.map(item => (
<div key={item.id} className="item">
<span>{item.name} - ${item.price}</span>
<button onClick={() => addToCart(item)}>Add to Cart</button>
</div>
))}
</div>

<div className="cart">
<h2>Cart</h2>
{cart.length === 0 ? (
<p>Your cart is empty</p>
):(
cart.map(item => (
<div key={item.id} className="cart-item">
<span>{item.name} - ${item.price}</span>
<button onClick={() => removeFromCart(item.id)}>Remove</button>
</div>
))
)}
<h3>Total: ${getTotalPrice()}</h3>
</div>
</div>
);
}

export default App;

app.css
.App {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}

h1 {
text-align: center;
}

.item-list, .cart {
margin-top: 20px;
}

.item, .cart-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
}
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 33
button {
padding: 5px 10px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}

button:hover {
background-color: #45a049;
}

OUTPUT:

RESULT:
Thus the program is implemented and the output is verified successfully.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 34

 Exp 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
Date:
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. Create a database to store user profiles and leave balances.
2. Implement a user interface for leave application and viewing available days.
3. Allow users to apply for leaves, deduct the requested days from their balance.
a. Set up a Node.js project with express.
4. Connect to MongoDB using Mongoose.
5. Create a User schema to represent employees.
6. Create a Leave schema to represent leave applications.
7. Implement API endpoints for:
a. Applying for different types of leaves (e.g., casual leave, medical leave).
b. Viewing available leave balance.
PROGRAM:

Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leave Request Form</title>

</head>
<body>
<h2>Leave Request Form</h2>
<form id="leaveForm">
<label for="employeeId">Employee ID:</label><br>
<input type="text" id="employeeId" name="employeeId" required><br><br>
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 35
 <label for="employeeName">Employee Name:</label><br>
<input type="text" id="employeeName" name="employeeName" required><br><br>

<label for="leaveType">Leave Type:</label><br>

<select id="leaveType" name="leaveType" required>
<option value="Sick Leave">Sick Leave</option>
<option value="Casual Leave">Casual Leave</option>
<option value="Vacation">Vacation</option>
</select><br><br>
<label for="startDate">Start Date:</label><br>
<input type="date" id="startDate" name="startDate" required><br><br>
<label for="endDate">End Date:</label><br>
<input type="date" id="endDate" name="endDate" required><br><br>
<button type="submit">Submit Request</button>
</form>
<script>
document.getElementById('leaveForm').addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const data = {
employeeId: formData.get('employeeId'),
employeeName: formData.get('employeeName'),
leaveType: formData.get('leaveType'),
startDate: formData.get('startDate'),
endDate: formData.get('endDate'),
};
const response = await fetch('http://localhost:5000/leave-request', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 36

 const result = await response.json();
alert(result.message);
});
</script>
</body>
</html>
Server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
// Initialize Express app
const app = express();
// Middleware
app.use(bodyParser.json());
app.use(cors());
// MongoDB connection
mongoose.connect('mongodb://localhost:27017/leave_management', { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.log('MongoDB connection error: ', err));
// Leave request schema
const leaveRequestSchema = new mongoose.Schema({
employeeId: String,
employeeName: String,
leaveType: String,
startDate: Date,
endDate: Date,
status: { type: String, default: 'Pending' },
});
const LeaveRequest = mongoose.model('LeaveRequest', leaveRequestSchema);
// API to add a leave request
app.post('/leave-request', async (req, res) => {
const { employeeId, employeeName, leaveType, startDate, endDate } = req.body;

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 37

 const newLeaveRequest = new LeaveRequest({
employeeId,
employeeName,
leaveType,
startDate,
endDate,
});
try {
await newLeaveRequest.save();
res.status(201).json({ message: 'Leave request submitted successfully' });
} catch (err) {
res.status(400).json({ message: 'Error submitting leave request', error: err });
}
});
// API to get all leave requests
app.get('/leave-requests', async (req, res) => {
try {
const requests = await LeaveRequest.find();
res.status(200).json(requests);
} catch (err) {
res.status(400).json({ message: 'Error fetching leave requests', error: err });
}
});
// Start the server
app.listen(5000, () => {
console.log('Server is running on http://localhost:5000');
});

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 38

OUTPUT:

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 39

RESULT:
Thus the program is implemented and the output is verified successfully.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 40

 EXPT NO : 7 Develop a simple dashboard for project Management where the statuses
of various tasks are available. New tasks can be added and the
DATE: Status of existing tasks can be changed among Pending, in progress
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, In Progress
or Completed.
ALGORITHM:
Step1: Initialize task list with default statuses (Pending, In Progress, Completed).
Step2: Design a user interface to display tasks and their statuses.
Step3: Allow adding new tasks with default "Pending" status.
Step4: Implement status change buttons for each task (In Progress, Completed).
Step5: Update task status in response to user interactions, reflecting changes on the dashboard.

PROGRAM:
APP.JS
import React from 'react';
import TaskDashboard from './components/TaskDashboard';

function App() {
return (
<div className="App">
<h1>Project Management Dashboard</h1>
<TaskDashboard />
</div>
);
}

export default App;

App.css
.App {
text-align: center;
font-family: Arial, sans-serif;
}

form {
margin-bottom: 20px;
}

table {
width: 50%;
margin: 0 auto;
border-collapse: collapse;
}
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 41
th, td {
padding: 8px;
text-align: center;
}

select {
padding: 4px;
}
TaskDashboard.js

import React, { useState } from 'react';

import TaskForm from './TaskForm';
import TaskList from './TaskList';

const TaskDashboard = () => {

const [tasks, setTasks] = useState([]);

// Add a new task

const addTask = (name) => {
const newTask = { id: Date.now(), name, status: 'Pending' };
setTasks([...tasks, newTask]);
};

// Update the status of an existing task

const updateTaskStatus = (id, status) => {
setTasks(
tasks.map((task) => (task.id === id ? { ...task, status } : task))
);
};

return (
<div>
<TaskForm addTask={addTask} />
<TaskList tasks={tasks} updateTaskStatus={updateTaskStatus} />
</div>
);
};

export default TaskDashboard;

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

const TaskForm = ({ addTask }) => {

const [name, setName] = useState('');

const handleSubmit = (e) => {

e.preventDefault();
if (name) {
addTask(name);
setName('');
}
};
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 42
 return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="New Task Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<button type="submit">Add Task</button>
</form>
);
};

export default TaskForm;

Tasklist.js
import React from 'react';

const TaskList = ({ tasks, updateTaskStatus }) => {

return (
<div>
<h2>Task List</h2>
<table border="1">
<thread>
<tr>
<th>Task</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{tasks.map((task) => (
<tr key={task.id}>
<td>{task.name}</td>
<td>{task.status}</td>
<td>
<select
value={task.status}
on Change={(e) => updateTaskStatus(task.id, e.target.value)}
>
<option value="Pending">Pending</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
</select>
</td>
</tr>
))}
</body>
</table>
</div>
);
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 43
};

export default TaskList;

OUTPUT:

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 44

RESULT:
Thus, the program was implemented and the output is verified successfully

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 45

 Ext no: 8 Develop an online survey application where a collection of questions
is available and users are asked to answer any random 5 questions.
Date:

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:

Step 1: Create the project file

usincommand. nix create-react-app
quiz

Step 2: Navigate to the folder using the

commandcd quiz

Step 3: Install the required module using the

command. npm, I bootstrap

Step 4: Create a folder named components in src file and create new files Option.js, Question.js,
QuestionBank.js, and Score.js
Project Structure:

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 46

 PROGRAM:
import React, { Component } from "react";
// import "bootstrap/dist./CSS/bootstrap.min.css";
import Question from "./components/Question";
import bank from "./components/Question Bank";
import Score from "./components/Score";
import "./App.css";

class App extends Component { constructor(props) {

super(props); this. State = {
question Bank: bank, current Question: 0, selected Option: "", score: 0,
quiz End: false,
};
}

handleOptionChange = (e) => {

this.setState({ selected Option: e.target.value });
};

handleFormSubmit = (e) => { e.preventDefault(); this.checkAnswer(); this.handleNextQuestion();

};

check Answer = () => {

const { question Bank, current Question, selected Option, score } = this. State; if (selected Option === question
Bank[current Question].answer) {
this.setState((prevState) => ({ score: prevState.score + 1 }));
}
};

handleNextQuestion = () => {
const { question Bank, current Question } = this. State; if (current Question + 1 < questionBank.length) {
this.setState((Prev State) => ({
current Question: prevState.currentQuestion + 1, selected Option: "",
}));
} else {
this.setState({ quiz End: true,
});

}
};

render() {
const { questionBank, current Question, selected Option, score, quiz End } = this. State;
return (
<div class Name="App d-flex flex-column align-items-center justify-content-center">
<h1 class Name="app-title">WEBSITE FEEDBACK ONLINE SURVEY</h1>
{!quiz End ? (

<Question question={question Bank[current Question]} selected Option={selected Option}

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 47
onOptionChange={this.handleOptionChange} on Submit={this.handleFormSubmit}
/>
):(
<Score
score={score} inequation={this.handleNextQuestion} class Name="score"
/>
)}
</div>
);
}
}

export default App;

Option.js
import React, { Component } from 'react';
class Options extends Component {
render() {
const { options, selected Option, onOptionChange } = this.props;

return (
<div class Name='options'>
{options. Map((option, index) => (
<div key={index} class Name="form-check">
<input
type="radio" name="option" value={option}
checked={selected Option === option} unchanged={onOptionChange} className="form-check-input"
/>
<label className="form-check-label">{option}</label>
</div>
))}
</div>
);
}
}

export default Options;

Question.js
import React, {Component} from "react";
import Options from "./Option";

class Question extends Component{ render() {

const {question, selectedOption, onOptionChange, onSubmit} = this.props;

return(
<div className="">
<h3>Question {question.id}</h3>
<h5 className="mt-2">{question.question}</h5>
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 48
<form onSubmit={onSubmit} className="mt-2 mb-2">
<Options options={question.options} selectedOption={selectedOption}
onOptionChange={onOptionChange}
/>
<button type="submit" className="btn btn-primary mt-2"> SUBMIT

</button>
</form>

</div>
)
}
}

export default Question;

QuestionBank.js
const qBank = [
{
id: 1,
question: "How easy is it to find what you’re looking for on our website?",
options: ["Very easy", "Easy", "Neutral", "Difficult"],
},
{
id: 2,
question: "How useful is the content on our website?",
options: ["Not Useful", "Very Useful", "Not Relevant", "Relevant"],
},
{
id: 3,
question: "How would you rate the loading speed of our website?",
options: ["Five Stars", "Four Stars", "Three Stars", "Two stars "],
},
{
id: 4,
question: "How satisfied are you with the look and feel of our website?",
options: ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied"],
},
{
id: 5,
question: "How satisfied are you with the overall experience?",
options: ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied"],
},
]

export default qBank;

Score.js
import React, { Component } from 'react'; import '../App.css'
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 49
class Score extends Component { render() {
const { score, onNextQuestion } = this.props;

return (
<div>

<h2>Overall Rating given by you :{score}</h2>

<h4>THANK YOU FOR YOUR FEEDBACK!!!!!!!</h4>
</div>
);
}
}

export default Score;

OUTPUT:

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 50

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 51
IT3511 FULL STACK WEB DEVELOPMET LABORATORY 52
RESULT:

Thus the program was implemented and the output is verified successfully.

IT3511 FULL STACK WEB DEVELOPMET LABORATORY 53