DEPARTMENT OF INFORMATION TECHNOLOGY

B-Tech – IT

III YEAR – V SEMESTER

IT3511 – FULL STACK WEB DEVELOPMENT

LAB MANUAL

Anna University R - 2021

Prepared By
Dr. G. A. SENTHIL
 SYLLABUS
Course Objective:
● To develop full stack applications with clear understanding of user interface, business logic and data
storage.
● To design and develop user interface screens for a given scenario
● To develop the functionalities as web components as per the requirements
● To implement the database according to the functional requirements
● To integrate the user interface with the functionalities and data storage.
List of Experiments:

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

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, InProgress 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.

Course Outcome:
CO1:Design full stack applications with clear understanding of user interface, business logic and data
storage.
CO2: Design and develop user interface screens CO3: Implement the functional requirements using
appropriate tool
CO4: Design and develop database based on the requirements
CO5 Integrate all the necessary components of the application
 INDEX

S.No Name of the Experiment

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

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

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

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

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

Develop a leave management system for an organization where users can apply
6 different types of leaves such as casual leave and medical leave. They also can view
the available number of days.

Develop a simple dashboard for project management where the statuses of various
7 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

8 users are asked to answer any random 5 questions.
 Ex. No: 1
DEVELOP A PORTFOLIO WEBSITE FOR YOURSELF WHICH
Date: GIVES DETAILS ABOUT YOURSELF FOR A POTENTIAL
Recruiter.
AIM :
Develop a portfolio website for yourself which gives details about yourself for a
potential Recruiter.

ALGORITHM:

The steps of the algorithm work as follow:

1. Define Purpose and Audience: Determine the purpose of your site and identify your target audience.
2. Choose Domain and Hosting: Select a domain name that represents you and a hosting service to make
your site accessible on the internet.

3. Select a Platform or Build from Scratch: Choose a website builder (e.g., WordPress, Wix) or build
your site from scratch using HTML, CSS, and JavaScript.
4. Design and Layout: Create a layout, design, and color scheme that reflects your style and is user-
friendly.
5. Content Creation: Write compelling content about yourself, including a bio, skills, experiences, and
projects.

6. Create Portfolio Sections: Showcase your work with images, videos, or demos.

7. Implement Contact Information: Provide contact details or a form for visitors to reach you.

8. Optimize for SEO: Incorporate keywords, meta tags, and descriptions for better search engine
visibility.

9. Mobile Responsiveness: Ensure your website looks good and functions well on mobile devices.

Test and Launch: Thoroughly test the website before launching it to ensure it works properly.

PROGRAM :

HTML (index.html):

<DOCTYPE html>

<deal long="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale-1.0

<link rel="stylesheet" href="styles.css">

aitle Portfolio Website</title>

<</head>

<body>
<header>
<nav>

<ul>

<li><a href="#home">Home</a>

<li><a href="#about>About</a></i>

<li><a href="#resume">Resume</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<section id="home">

<h1>Your Name</h1>

<h2>Full Stack Developer</h2>

</section>

<section id="about">

<h2>About Me</h2>
<p>Write a brief description about yourself and your professional background.</p> </section>

<section id="resume">

<h2>Resume</h2>

<p>Include a summary of your work experience, education, and skills.</p>

<a href="path/to/your/resume.pdf" target="_blank" noreferrer">Download Resume</a> rel="noopener

</section>

<section id="portfolio">

<h2>Portfolio</h2>

<p>Highlight your projects and provide descriptions and links to view them.</p>

<div class="project">

<h3>Project Title</h3>

<p>Project description and key features.</p>

<a href="project-url" target="_blank" rel="noopener noreferrer">View Project</a>

</div>
<!-Add more project divs as needed ->

</section>

<section id="contact">

<h2>Contact</h2>

<p>Feel free to reach out to me. Here's my contact information:</p>

<ul>

<li>Email: [email protected]</li>

<li>Phone: 123-456-7890</li>

<<li>LinkedIn: <a href="https://www.linkedin.com/in/yourname" target="_blank" rel="noopener

noreferrer">Your Name</a></li>

</ul>

</section>

<script src="script.js"></script>

</body>

</html>
CSS (styles.css):

General styles */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; }

/* Header styles */ header { background-color: #333; color: #fff; padding: 10px;

nav ul { list-style: none; padding: 0; margin: 0;

nav ul li { display: inline; margin-right: 10px; }

nav ul li a {

color: #fff; text-decoration: none;

/* Section styles */ section {

padding: 50px; }

section h2 {

margin-bottom: 20px; }

section p {

margin-bottom: 20px; }

section a {

display: inline-block; padding: 10px 20px; background-color: #333; color: #fff; text-decoration: none;

border-radius: 5px;
/* Project styles */ project ( margin-bottom: 30px; }

project h3 {

margin-bottom: 10px;

/* Responsive styles */ @media screen and (max-width: 600px) { section { padding: 30px; } }

OUTPUT:
RESULT: To Develop a portfolio website is successfully created
 Ex. No: 2
CREATE A WEB APPLICATION TO MANAGE THE TO-DO
Date: 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:

The step-by-step process to implement the to-do list web application is given as follows -

Algorithm for creating a to-do list web application:

1. Setup:
- Choose a web development framework and programming language.
- Set up your development environment.
2. Database:
- Choose a database system and create tables for users and to-do items.
3. User Authentication:
- Implement user registration and login.
4. Create To-Do Items:
- Create an interface for adding to-do items.
- Store items in the database linked to the user.
5. View, Update, and Delete:
- Develop pages to view, update, and delete to-do items.
6. User Interface:
- Design a user-friendly interface using HTML, CSS, and JavaScript or a front-end framework.
7. Security:
- Implement security measures to protect user data.
8. Testing:
- Thoroughly test the application, fixing any bugs.
9. Deployment:
- Deploy the app to a production server or cloud platform.
10. Scaling and Maintenance:
- Monitor and optimize performance.
- Regularly maintain and update the app.
11. User Support:
- Provide user support and documentation.

This condensed algorithm should give you a quick overview of the key steps in building your to-do list web
application.

PROGRAM:
HTML (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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

<script src="app.js"></script>

<title>To Do List</title>
</head>

<body>
<header class="bg-success text-white p-5">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<font face="Comic sans MS" size="11" color="black">
<strong>ToDo List</strong>
</font>

</div>
</div>
</div>
</header>

<div class="container mt-3">

<h2>Add Items</h2>

<label id="lblsuccess" class="text-success" style="display: none;">

</label>

<form id="addForm">
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-7">

<input type="text" onkeyup="toggleButton(this, 'submit')" class="form-control" id="item">

</div>

<div class="col-lg-5 col-md-5 col-sm-5">

<input type="submit" class="btn btn-dark" id="submit" value="Submit" disabled>
</div>
</div>
</form>

<h3 class="mt-4">Tasks</h3>

<form id="addForm">
<ul class="list-group" id="items"></ul>
</form>
</div>
</body>

</html>
<script>
window.onload = () => {
const form1 = document.querySelector("#addForm");

let items = document.getElementById("items");

let submit = document.getElementById("submit");
 let editItem = null;

form1.addEventListener("submit", addItem);
items.addEventListener("click", removeItem);
};

function addItem(e) {
e.preventDefault();

if (submit.value != "Submit") {
console.log("Hello");

editItem.target.parentNode.childNodes[0].data
= document.getElementById("item").value;

submit.value = "Submit";
document.getElementById("item").value = "";

document.getElementById("lblsuccess").innerHTML
= "Text edited successfully";

document.getElementById("lblsuccess")
.style.display = "block";

setTimeout(function() {
document.getElementById("lblsuccess")
.style.display = "none";
}, 3000);

return false;
}

let newItem = document.getElementById("item").value;

if (newItem.trim() == "" || newItem.trim() == null)
return false;
else
document.getElementById("item").value = "";

let li = document.createElement("li");
li.className = "list-group-item";

let deleteButton = document.createElement("button");

deleteButton.className =
"btn-danger btn btn-sm float-right delete";

deleteButton.appendChild(document.createTextNode("Delete"));
let editButton = document.createElement("button");

editButton.className =
"btn-success btn btn-sm float-right edit";

editButton.appendChild(document.createTextNode("Edit"));

li.appendChild(document.createTextNode(newItem));
li.appendChild(deleteButton);
li.appendChild(editButton);
 items.appendChild(li);
}
function removeItem(e) {
e.preventDefault();
if (e.target.classList.contains("delete")) {
if (confirm("Are you Sure?")) {
let li = e.target.parentNode;
items.removeChild(li);
document.getElementById("lblsuccess").innerHTML
= "Text deleted successfully";

document.getElementById("lblsuccess")
.style.display = "block";

setTimeout(function() {
document.getElementById("lblsuccess")
.style.display = "none";
}, 3000);
}
}
if (e.target.classList.contains("edit")) {
document.getElementById("item").value =
e.target.parentNode.childNodes[0].data;
submit.value = "EDIT";
editItem = e;
}
}

function toggleButton(ref, btnID) {

document.getElementById(btnID).disabled = false;
}

</script>

OUTPUT
RESULT

Thus, the web application to manage the TO-DO list of users where users can login and
manage their to-do items has crated Successfully.
 Ex. No: 3 . CREATE A SIMPLE MICRO BLOGGING
APPLICATION (LIKE TWITTER)
Date:

AIM:

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

PROCEDURE :

Steps to create a micro-blogging application like Twitter:

● Planning: Define features and technology stack.

● Backend Setup: Choose a backend framework, set up a database.

● User Authentication: Implement registration and login.

● Post Creation & Viewing: Develop posting and feed viewing functionalities.

● Follow/Unfollow System: Create mechanisms for users to follow/unfollow others.

● Notifications: Include a notification system for user interactions.

● Frontend Development: Use HTML, CSS, and JavaScript to build the user interface.

● Testing: Ensure thorough testing for functionality and edge cases.

● Deployment: Host the application on a server or cloud platform.

● Iterate and Improve: Gather feedback and continuously enhance the application.

PROGRAM :

HTML. (index.html).

<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content" width=device-width, initial-scale=10">
<link rel="stylesheet" href="styles.css">

dille Microblogging Apps</title>

<head>
<body>
<div class="container">
<h1>Microblogging App</h1>
<form id="postForm>
<textarea id="postContent placeholder "What's on your mind?<textarea>
<button type="submit>Port-button>
</form>
<div id="feed">
<!--Posted content will be dynamically added here—>
</div>
</div>
<script ue="script.js"></script>
</body>
</html>
CSS (styles.css):

body{
font-family: Arial, sans-serif;
}
.container
{max-width: 600px; margin: 0 auto; padding: 20px;
}
hl {
text-align: center;
}
form textarea ( display: block; width: 100%; padding: 10px; margin-bottom: 10px;}
form button ( display: block; width: 100%; padding: 10px; background-color: #4CAF50;
color: #fff; border: none; cursor: pointer;}
#feed{
margin-top: 20px;

JavaScript (script.js):

document.addEventListener("DOMContentLoaded', function() { const postForm =

document.getElementById('postForm'); const postContent =
document.getElementById('postContent'); const feed = document.getElementById("feed");
postForm.addEventListener('submit', function(e) { e.preventDefault(); const content =
postContent.value;

// Create a new post element const newPost = document.createElement('div');

newPost.classList.add('post'); newPost.textContent = content;
// Add the new post to the feed feed.appendChild(newPost);
// Clear the post content postContent.value = **; });
});
margin-top: 20px;
JavaScript (Script.js):

document.addEventListener("DOMContentLoaded", function() {

const postForm = document.getElementById('postForm'); const postContent =

document.getElementById('postContent'); const feed=document.getElementById('feed");

postForm.addEventListener('submit', function(e) { e.preventDefault(); const content =

postContent.value;

// Create a new post element const newPost = document.createElement('div');

newPost.classList.add('post'); newPost.textContent = content;

// Add the new post to the feed feed.appendChild(newPost);

// Clear the post content postContent.value = "; });

});

OUTPUT:

RESULT:

Thus, the micro blogging application (like twitter) that allows people to post their content
which can be viewed by people who follow them is created successfully.
 Ex. No: 4
CREATE A FOOD DELIVERY WEBSITE WHERE USERS CAN ORDER FOOD
FROM A PARTICULAR RESTAURANT FETED IN THE WEBSITE
Date:

AIM :

Create a food delivery website where users can order food from a particular restaurant feted
in the website
ALGORITHM:

Creating a food delivery website with the ability for users to order food from specific restaurants
involves several key components and algorithms.

1. User Registration and Authentication:

- Allow users to create accounts and log in.
- Use standard authentication methods to secure user data.
2. Restaurant Listings:
- Maintain a database of restaurants with details such as name, menu, location, and contact
information.
3. Menu Display:
- Retrieve and display the restaurant's menu, including food items and prices.
- Implement a user-friendly interface for browsing the menu.
4. Shopping Cart:
- Allow users to add items to their shopping cart.
- Implement cart management, including adding, updating, and removing items.
5. Order Placement:
- Collect user details and delivery address.
- Calculate the total order cost.
- Generate an order ID and record the order in the database.
6. Payment Processing:
- Integrate a payment gateway for users to pay online.
- Ensure secure handling of payment information.
7. Order Confirmation:
- Send email/SMS notifications to users and restaurants about the order.
- Display an order confirmation to the user.
8. Restaurant Notification:
- Alert the restaurant about the new order, including details like items and delivery address.
9. Delivery Assignment:
- Assign a delivery driver or notify a third-party delivery service.
10. Order Tracking:
- Allow users to track the status of their order (e.g., preparation, on the way, delivered).
11. Reviews and Ratings:
- Enable users to leave reviews and ratings for both restaurants and delivery services.
12. Admin Panel:
- Create an admin panel for managing restaurants, menus, and user accounts.
- Implement data analytics and reporting for business insights.
13. Algorithms:
- Implement algorithms for distance calculation to estimate delivery times.
- Develop recommendation algorithms for suggesting popular dishes or restaurants.
14. Delivery Routing:
- Optimize delivery routes for drivers to minimize delivery times.
15. Feedback and Support:
- Offer a support system for users to resolve issues or provide feedback
PROGRAM :

HTML (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">
<link
href="https://fonts.googleapis.com/css2?
family=Ubuntu+Mono&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<h1 id="top">Online</h1>
<h1 id="top1">FoodShop</h1>
</header>
<hr>
<nav id="navbar">
<img src="5.jpeg">
<ul id="navcontent">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="contact.html">ContactUs</a></li>
</ul>
</nav>
<div id="container1">
<div id="row1">
Welcome to Online FoodShop
</div>
<button class="btn">ORDER NOW</button>
<div id="container3">
<div id="row2">
<button class="btn">Prices</button>
</div>
<div id="row3">
<button class="btn">Specials</button>
</div>
</div>
</div>
<hr>
<h1 id="top3">Featured Products</h1>
<div id="container4">
<div id="row4">
<button class="btn">ORDER NOW</button>
</div>
<div id="row5">
<button class="btn">ORDER NOW</button>
</div>
<div id="row6">
<button class="btn">ORDER NOW</button>
</div>
</div>
<footer>Copyright © 2020-2021 OnlineFoodShop.
All Rights are reserved</footer>
</body>
</html>
CONTACT.HTML:
The following HTML code describes us what contents are present in the “ContactUs” tab in the navigation
bar. We have used input tags to enter the type of “query”, “name”, “email-id”, “phone number” and
“explanation” of the query. We have also used radio buttons to enquire about the customer’s membership
for “online FoodShop “. The form also provides “Submit” and “Reset” buttons.

<!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>ContactUs</title>
</head>
<body>
<div id="ContactUs">
<h1>Contact Us</h1>
<form action="#">
<div class="form-shape">
<label for="query">
Type of Query
</label>
<select name="myQuery" id="query">
<option value="sel" selected>
Select
</option>
<option value="ord">
Order related Issues
</option>
<option value="Site">
Site related Issues
</option>
<option value="fed">
Complaint related Issues
</option>
<option value="others">
Others
</option>
</select>
</div>
<div class="form-shape">
<label for="name">Name</label>
<input type="text" name="myName"
id="name"
placeholder="Enter your Name">
</div>
<div class="form-shape">
<label for="email">Email-Id</label>
<input type="email" name="myEmail"
id="email"
placeholder="Enter your email">
</div>
<div class="form-shape">
<label for="pho">Phone Number</label>
<input type="phone" name="myPhone"
id="pho"
placeholder="Enter your Phone no">
</div>
<div id="radio">
Are you a member of OnlneFoodShop:
Yes <input type="radio" name="eligible">
No <input type="radio" name="eligible">
</div>
<div class="form-shape">
<label for="message">
Ellaborate your query
</label>
<textarea name="mesg" id="message"
cols="30" rows="10">
</textarea>
</div>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
</body>
</html>

STYLE.CSS:

This is the stylesheet block which gives us the proper look of the webpage.

Header styling: It consists of two “head” tags. We have used font-style “Ubuntu” to style the header and
we also used proper colors to make some text look attractive.

Navigation bar styling: It basically consists of logo styling and content styling. First of all we have
considered the navigation bar as a flexbox and assigned the flex-direction to “column”. We have centered
the logo image by display:block. We have used the margin:auto property to center the image. Then we
considered the content of the navigation bar as a flexbox and then we have positioned it properly.
Background image styling: We used before pseudo selectors to set the respective background images.

/*CSS Reset*/
*{
margin:0px;
padding:0px;
}
/*Header Styling*/
#top{
color:rgb(245, 10, 10);
text-align:center;
font-size:46px;
font-family: 'Ubuntu Mono', monospace;
}
#top1{
text-align:center;
color:black;
font-size:21px;
font-family: 'Ubuntu Mono', monospace;
}
/* Navigation bar styling*/

/*Navbar image styling*/

#navbar img{
display:block;
width: 50px;
height:50px;
margin:auto;
margin-bottom: 3px;
}

/*Navbar Functionality*/
#navbar{
display:flex;
flex-direction: column;
background-color: gray;
height: 14vh;
width: 100vw;
font-family: 'Ubuntu Mono', monospace;
margin-top:10px;
border: 2px solid black;
border-radius:15px;
}

/*Navbar content functionality*/

#navcontent{
display: flex;
justify-content: center;
}
/*Navbar content styling*/
ul li{
list-style: none;
margin: 15px;
border-radius: 20px;
}
ul li a{
padding: 1px;
color:white;
text-decoration: none;
border-radius:10px;
}
ul li a:hover{
background-color: red;
border-radius: 10px;
}

/* website background image designing */

#container1{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height:63vh;
}

/*Setting the background image using before pseudo selector*/

#container1::before{
content:'';
background: url("./1.jpg") no-repeat center center/cover;
width: 100vw;
height:59vh;
position: absolute;
top:0px;
left: 0px;
font-family: 'Ubuntu Mono', monospace;
margin-right:45px;
font-weight: bold;
z-index: -1;
opacity: 0.89;
 border: 2px solid black;
border-bottom-left-radius: 100px;
}
#row1{
color: black;
font-weight:bold;
font-size: 2rem;
text-align: center;
margin-top: 35px;
}
/*Button Styling*/
.btn{
margin-top:15px;
border: 3px solid white;
border-radius:15px;
background-color:yellow;
font-size:20px;
font-weight: bold;
font-family: 'Ubuntu Mono', monospace;
}
.btn:hover{
cursor: pointer;
background-color: red;
}
#container3{
display: flex;
justify-content: space-evenly;
}
#row2{
width:24vw;
height:21vh;
box-shadow: 2px 7px 16px 19px;
margin-top:51px;
margin-bottom: 51px;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
margin-right: 38px;
border-radius: 40px;
}
#row2::before{
content: '';
background: url('2.jpeg') no-repeat center center/cover;
position: absolute;
top: 0px;
left:0px;
width: 24vw;
height:21vh;
z-index: -1;
border-radius: 40px;
}
#row3{
position: relative;
width: 24vw;
height:21vh;
display: flex;
justify-content: center;
align-items: flex-end;
box-shadow: 2px 7px 16px 19px;
margin-top:51px;
margin-bottom: 51px;

margin-left: 38px;
border-radius: 40px;
}
#row3::before{
content: '';
background: url('3.jpeg') no-repeat center center/cover;
position: absolute;
top:0px;
left:0px;
width: 24vw;
height:21vh;
z-index: -1;
border-radius: 40px;
}

#top3{
text-align: center;
color:red;
font-family: 'Ubuntu Mono', monospace;
}
#container4{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
margin: 41px;
}
#row4{
width: 29vw;
height: 360px;
border: 2px solid black;
background:url('a1.jpeg') no-repeat center center/cover;
display: flex;
justify-content:center;
align-items:flex-end;
border-radius: 15px;
}
#row5{
width: 29vw;
height: 360px;
border: 2px solid black;
background:url('a2.jpeg') no-repeat center center/cover;
display: flex;
justify-content:center;
align-items:flex-end;
border-radius: 15px;
}
#row6{
width: 30vw;
height: 360px;
border: 2px solid black;
background:url('a3.jpeg') no-repeat center center/cover;
display: flex;
justify-content:center;
align-items:flex-end;
border-radius: 15px;
}
/*Designing the footer*/
footer{
text-align: center;
}
/*Designing of Contact Us*/
#ContactUs{
width:100vw;
 height:100vh;
display:flex;
flex-direction: column;
align-items: center;
background-color: gray;
}
.form-shape input, .form-shape select, .form-shape textarea{
width: 92%;
padding: 0.5rem;
}
/*Changing the color of placeholder*/
::placeholder{
color:gray;
}
/*Making the webpage responsive using media queries*/
@media only screen and (max-width:1131px){
#row4{
width: 42vw;
}
#row5{
width:45vw;
}
#row6{
margin-top: 20px;
width:90vw;
}
}
@media only screen and (min-width:600px) and (max-width:781px)
{
#row4{
width:84vw;
margin: auto;
margin-left: 22px;
}
#row5{

width:84vw;
margin: auto;
margin-top: 20px;
margin-left: 22px;
}
 #row6{
width:84vw;
margin: auto;
margin-top: 20px;
margin-left: 22px;
}
}
@media only screen and (max-width:600px){
#row4{
width:78vw;
margin: auto;
margin-left: 3px;
}
#row5{

width:78vw;
margin: auto;
margin-top: 20px;
margin-left: 3px;
}
#row6{
width:78vw;
margin: auto;
margin-top: 20px;
margin-left: 3px;
}
}
@media only screen and (min-height:1000px){
#navbar{
height:10vh;
}
#container1::before{
height:39vh;
}
#container1{
height:44vh
}
}
OUTPUT:

RESULT:

Thus Web Application of a food delivery website where users can order food from a
particular restaurant feted in the website is created successfully.
 Ex. No: 5
DEVELOP A CLASSIFIEDS WEB APPLICATION TO BUY AND
Date: SELL USED PRODUCTS

AIM:

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

ALGORITHM:

Developing a classifieds web application for buying and selling used products involves multiple components
and steps.

1. Requirements Gathering:
- Define the core features and functionality of your classifieds platform.
- Understand user needs and expectations.
- Create a list of categories for products (e.g., electronics, vehicles, clothing).

2. Technology Stack:
- Choose the technology stack for your web application (e.g., front-end, back-end, and database
technologies).

3. Database Design:
- Design a database schema to store user accounts, product listings, categories, and user interactions.
- Choose a relational database system (e.g., MySQL, PostgreSQL).

4. User Registration and Authentication:

- Implement user registration and login functionality.
- Use secure authentication methods (e.g., OAuth, JWT).

5. Product Listing:
- Allow users to create and manage product listings.
- Include fields for title, description, price, category, location, and images.

6. Search and Filter:

- Implement a search functionality to allow users to find products based on keywords and categories.
- Add filters for price range, location, and date posted.

7. Messaging System:
- Enable messaging between buyers and sellers.
- Implement real-time chat or email notifications.

8. Payment Integration (if needed):

- Integrate a payment gateway for transactions.
- Ensure secure payment processing.
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="styles.css">

<title>Classified Web App</title>

</head>

<body>

<header>

<h1>Classified Web App</h1>

</header>

<main>

<div class="create-ad">

<h2>Create Ad</h2>

<form id="adForm">

<input type="text" id="adTitle" placeholder "Title" required >

<textarea id="adDescription" placeholder"Description" required></textarea>

<input type="text" id="adPrice" placeholder "Price" required>

<button type="submit">Create Ad</button>

</form>

</div>

<div class="ads" id="adsContainer">

<!--Ads will be dynamically added here-->

</div>

</main>

<script src="script.js"></script>

</body>
</html>

Styles.css

body { font-family: Arial, sans-serif; margin: 0, padding: 0;

}
header( background-color: #4CAF50; padding: 20px; text-align: center, color: #fff;

main ( padding: 20px;

h1, h2,h3 ( margin: 0;

.create-ad input[type="text"];
width 100%,

display: block; padding: 10px; margin-bottom: 10px;

create-ad button {

display: block;

width: 100%;

padding: 10px;

background-color: #4CAF50,

color: #fff

border: none;

cursor: pointer,

ads (

margin-top: 20px;

ad (

padding 10px,

background-color: #f5f5f5;

margin-bottom: 10px;

Script.js:

document.addEventListener("DOMContentLoaded", function() {

const adForm = document.getElementById('adForm');

const adsContainer = document.getElementById('adsContainer');

adForm.addEventListener('submit', function(e) {

e.preventDefault();
const title =document.getElementById("adTitle").value;
const description= document.getElementById("adDescription").value;

const price = document.getElementById('adPrice').value;

const newAd=document.createElement('div');

newAd.classList.add("ad");

newAd.innerHTML="

<h3>${title}</h3>

<p>${description}</p>

<p>Price: $$[price] </p>

adsContainer.appendChild(newAd);

document getElementById('adTitle').value=" document.getElementById("adDescription").value = "";

document.getElementById("adPrice").value = "";
});
});

OUTPUT:

RESULT:

Thus the Web application developing a classifieds web application for buying and selling used products
involves multiple components and steps has created successfully.
 Ex. No: 6
DEVELOP A LEAVE MANAGEMENT SYSTEM FOR AN
Date: ORGANIZATION

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:

Developing a leave management system involves several steps and can be quite complex, but here's
a high-level algorithm to get you started:

1. User Registration and Authentication:

- Create a user registration system for employees to sign up.
- Implement authentication mechanisms to ensure secure access.
2. User Roles:
- Define user roles, such as regular employees, managers, and HR personnel.
3. Leave Types:
- Create different leave types, like casual leave, medical leave, vacation, etc.
4. Leave Balance:
- Maintain leave balances for each employee, specifying the total number of leave days for each
type.
5. Leave Application:
- Allow users to submit leave applications, specifying leave type, start date, end date, and a
reason.
6. Leave Approval Workflow:
- Implement a workflow for leave approval:
- Managers receive leave requests.
- Managers can approve, reject, or forward requests to higher authorities.
- HR personnel can handle escalated cases.
7. Leave Availability:
- Calculate and display available leave days based on the leave balance and approved leave.
8. Leave Calendar:
- Create a calendar view to display leave requests and approvals.
9. Notifications:
- Send notifications to users for leave request status updates.
10. Reporting:
- Generate reports on leave usage, approvals, and leave balances.
11. Leave Policies:
- Define leave policies and rules (e.g., minimum notice period, blackout periods).
12. Integration with Payroll:
- Integrate with the payroll system to ensure proper salary adjustments.
13. Record Keeping:
- Maintain a record of all leave requests and approvals for auditing.
14. Security and Access Control:
- Implement robust security measures to protect sensitive employee data.
15. Mobile Accessibility:
- Create a mobile-friendly interface for employees to access the system on the go.
16. Testing and Validation:
- Thoroughly test the system to ensure it works correctly and meets the organization's needs.
17. User Training:
- Train employees, managers, and HR personnel on how to use the system.
18. Maintenance and Updates:
- Regularly maintain and update the system to accommodate changes in leave policies and
regulations.
19. Feedback Mechanism:
- Implement a feedback mechanism for users to report issues or suggest improvements.
20. Data Backup and Recovery:
- Set up a data backup and recovery system to prevent data loss.

PROGRAM:
Create a server.js file in the root folder and copy this into the empty file.
const express = require("express");
const app = express();
const port = process.env.PORT || 3000;
const vm = require("v-response");
const morgan = require('morgan');
const mongoose = require("mongoose")
app.use(express.json());
app.use(morgan('dev'));
const database = 'mongodb://localhost:27017/levemanagementdb';

mongoose.connect((database), {
useUnifiedTopology: true,
useFindAndModify: false,
useNewUrlParser: true,
useCreateIndex: true,
})
.then(async () => {
vm.log("connected to database", database);
})
.catch(err => vm.log("error mongodb", err));

app.listen(port, () => vm.log("server running on port:", port));

The server.js file will start up our Nodejs server to run this you can type this to your terminal

node server.js

If all goes well you should get this in your terminal

Alt Text
We need to create an endpoint whereby users can register to achieve that we need to create an
authentication folder in our project and create four files inside the folder
(auth.model.js,auth.route.js,auth.controller.js, auth.validation.js) in the auth. model file.

const mongoose = require("mongoose");

const Schema = mongoose.Schema;
const userSchema = new Schema({
fullname:{
type: String
 },
manager: {
type: Schema.Types.ObjectId,
ref: "user"
},
email: {
type: String
},
password: {
type: String
},
role: {
type: String,
enum: ['manager', 'staff'],
default: 'staff'
},
deleted: {
type: Boolean,
default: false
}
}, {timestamps: true});

const Usermodel = mongoose.model('user', userSchema, 'Users');

module.exports = Usermodel

auth.validation.js:

'use strict';
const Validator = require("validatorjs");

export const UserValidator = {

/**
* @param {Object} obj The validation object
* @return {Object}
* */
validateAccount(obj) {
const rules = {
email: 'required|string',
password: 'required|string',
fullname: 'required|string',
manager: 'required|string',

};
const validator = new Validator(obj, rules);
return {
errors: validator.errors.all(),
passed: validator.passes(),
}
},
};

auth.controller.js

const UserValidator = require("./auth.validator");

const _ = require("underscore");
const User = require("./auth.model");
const vm = require("v-response");
/**
* @controller User authentication controller
* */
/**
* @param
* */

//CREATE ACCOUNT
exports.CreateAccount = async (req, res, next) => {
try {
let obj = req.body;
const validateUserInput = await UserValidator.validateAccount(obj);
if (!validateUserInput.passed) {
return res.status(400)
.json({
status: false,
code: 400,
message: "There's error in your inputs",
errors: validateUserInput.errors,
})
}
const checkUserEmail = await User.findOne({email: req.body.email})
if (checkUserEmail) {
return res.status(409)
.json(vm.ApiResponse(false, 409, 'email already exist'))
} else if (!checkUserEmail) {

_.extend(obj, {
password: await vm.hashedPassword(obj.password, 10),
});
const account_object = await new User(obj);
const saveAccount = await account_object.save();
if (!saveAccount) {
return res.status(400)
.json(vm.ApiResponse(false, 400, "Oops! an error occurr"))
} else {
saveAccount.password = null;
return res.status(201)
.json(vm.ApiResponse(true, 200, `account created`, account_object));
}
}
} catch (e) {
return next(e);
}

}
//LOGIN
exports.login = async (req, res, next) => {
try {
const checkEmail = await User.findOne({email: req.body.email});
if (!checkEmail) {
return res.status(400)
.json(vm.ApiResponse(false, 400, 'email not found'))
} else {
const compareEmail = vm.comparepassword(checkEmail.password, req.body.password);
if (compareEmail) {
 const signtoken = vm.signToken(checkEmail._id, 'yourSecret');
checkEmail.password = null;
return res.status(200)
.json(vm.ApiResponse(true, 200, "login sucessfull", {user: checkEmail, token: signtoken}))
}
}
} catch (e) {
return next(e);
}

};

//list manager so when staff needs to register they can select their managers

exports.listManagers = async (req, res, next) => {

try {

const findMangers = await User.find({role: "manager"})

if (findMangers) {
return res.json(findMangers);
} else if (findMangers.length === 0) {
return res.json('0 managers')
} else {
return res.json("Oops! an error occurr")
}
} catch (e) {
return next(e);
}
}

auth.route.js
'use strict';
const {Router} = require('express');
const UserController = require("./auth.controller");

const router = Router();

router.post("/create/account", UserController.CreateAccount);
router.post("/account/login", UserController.login);
router.get("/managers/list", UserController.listManagers);

module.exports = router;

So We are done with the first module which enables users to register and login into their account so in
the next module we will be working on sending a leave request as a staff and notifying the manager of
the leave request via email and also notify the staff when the manager approves or reject leave request
for the email notification we will be using SendGrid you can create an account
https://signup.sendgrid.com/

Create a Mailer.js file

'use strict';
const Helper = require("sendgrid").mail;
const sg = require('sendgrid')('yourkey');
const vm = require("v-response");
module.exports.sendMail = sendMail;
function sendMail(from, to, subject, content, template) {
let fromEmail = new Helper.Email(from);
let toEmail = new Helper.Email(to);
 let emailContent = new Helper.Content("text/html", content);
let mail = new Helper.Mail(fromEmail, subject, toEmail, emailContent);

let isEmailSent = false;

let request = sg.emptyRequest({
method: 'POST',
path: '/v3/mail/send',
body: mail.toJSON()
});

sg.API(request, function (err, response) {

if (err) {
vm.log("error");
vm.log("err in sendgrid: ", err);
isEmailSent = false;
}
vm.log("sendgrid body:", response.statusCode);
isEmailSent = true;
});
return isEmailSent;

Create a leave folder and create three files (leave.model.js, leave.route.js, leave.controller.js)

Leave.model.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const leaveSchema = new Schema({

reason: {
type: String
},
staff: {
type: Schema.Types.ObjectId,
ref: "user"
},
leave_status: {
type: String,
enum: ['pending', 'approved', 'rejected'],
default: "pending"
}

}, {timestamps: true})

const leaveModel = mongoose.model("leave", leaveSchema, "Leave");

module.exports = leaveModel;

Leave.controller.js
const {sendMail} = require("../util/mailer");

const LeaveModel = require("./leave.model");

const User = require("../authentication/auth.model");
const _ = require("underscore");
const vm = require("v-response");
//request leave
exports.requestLeave = async (req, res, next) => {
try {
const find_user = await User.findById(req.body.staff);
if (!find_user) {
return res.status(400)
.json(vm.ApiResponse(false, 400, 'Invalid user details or unverified account'))
} else {
const leaverequestBody = _.extend(req.body, {staff: find_user._id, reason: req.body.reason})
const createLeaveRequest = await new LeaveModel(leaverequestBody);
await createLeaveRequest.save();
const find_manager = await User.findOne({_id: find_user.manager});
//notify staff manager about leave request
await sendMail('noreply@leavemanagement', find_manager.email, 'Leave Request',
`${find_user.fullname} is requesting for leave`);
return res.status(200)
.json(vm.ApiResponse(true, 200, "leave request sent"))
}
} catch (e) {
return next(e);
}

};

exports.approveLeaveOrRejectLeave = async (req, res, next) => {

try {
const findLeave = await LeaveModel.findById(req.query.leave_id);
const findstaff = await User.findById(findLeave.staff);
if (!findLeave) {
return res.status(404)
.json(vm.ApiResponse(false, 400, 'Leave request not found'))
} else if (findLeave) {
if (req.body.approvalstatus === 'approved') {
await sendMail('noreply@leavemanagement', findstaff.email, 'Leave Approval', `Hello
${findstaff.fullname},your leave request has been approved`);
} else {
await sendMail('noreply@leavemanagement', findstaff.email, 'Leave Approval', `Hello
${findstaff.fullname},your leave request has been rejected `);
}
findLeave.leave_status = req.body.approvalstatus;
await findLeave.save();
return res.status(200)
.json(vm.ApiResponse(true, 200, "leave request status updated successfully"))
}
} catch (e) {
return next(e);
}

};
Leave.route.js
'use strict';
const {ManagerChecker} = require("../util/RoleChecker");

const {Router} = require('express');

const LeaveController = require("./leave.controller");
const router = Router();
router.post("/request/leave", LeaveController.requestLeave);
//the ManagerChecker ensures that only a manager can approve or reject a leave request
router.patch("/update/leave/status", ManagerChecker, LeaveController.approveLeaveOrRejectLeave);

module.exports = router;

Create a MangerCheck.js file

const User = require("../authentication/auth.model");
const jwt = require("jsonwebtoken")

exports.ManagerChecker = async (req, res, next) => {

let token = req.headers.authorization;
if (!token) {
return res.status(400)
.json("please login to continue")
}
if (token !== undefined) {
let decodeToken = jwt.decode(token);
let id = decodeToken.id;
if (id) {
let user = await User.findById(id);
if (user && user.role !== 'manager') {
return res.status(403).json({
status: false,
code: 403,
message: 'You are not authorized to do this action'
})
} else {
return next();
}
}
}
return next();
}

And lastly, let's seed a manager account so we can test all our hard work if you've made it this far "Ooin
you're doing well"

CREATE A seeder.js file

const mongoose = require("mongoose");

const bcrypt = require("bcryptjs");
mongoose.Promise = require('bluebird');
const db = 'mongodb://localhost:27017/levemanagementdb';

mongoose.connect(db);
const User = require("../authentication/auth.model");

async function seedUser() {

const hash = await bcrypt.hash('password123', 10);
User.create({
email: "[email protected]",
password: hash,
fullname: "staff manager",
role: 'manager',
}).then(user => {
 console.log(`${user} user created`);
}).catch((err) => {
console.log(err);
}).finally(() => {
mongoose.connection.close();

})
}
seedUser();

To use the seeder file add this to the script in your package.json file
"seed": "node util/seeder.js" then run npm run seed

if all goes well you should see this in your terminal user created then start your Nodejs server

OUTPUT:

RESULT:

Thus, the Full Stack web application 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 successfully completed.
 Ex. No: 7
DEVELOP A SIMPLE DASHBOARD FOR PROJECT
Date: MANAGEMENT

AIM:

To Develop a simple dashboard for project management where the status of various tasks is
available. New tasks can be added and status of existing tasks can be changed among pending,
in progress and completed.

ALGORITHM:

To develop a simple dashboard for project management, you can follow these steps:

1. Design the user interface: Create a layout that displays the tasks and their statuses. You can use HTML and
CSS to create a visually appealing dashboard.

2. Create a data structure: Define a data structure to store the task information, such as an array or object.
Each task should have properties like task name and status.

3. Display tasks: Use JavaScript to dynamically display the tasks on the dashboard. You can loop through the
task data structure and generate HTML elements for each task.

4. Add task functionality: Implement a form or input field where users can add new tasks. When a task is
added, update the task data structure and refresh the dashboard to display the new task.

5. Change task status: Add buttons or dropdown menus next to each task to allow users to change the status.
When a status is changed, update the task data structure and refresh the dashboard to reflect the updated
status.
o

PROGRAM :

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>Project Management Dashboard</title>

</head>
<body>
<header>
<h1>Project Management Dashboard</h1>
</header>
<main>
<div class="task-form">
<h2>Add New Task</h2>
<form id="taskForm">
<input type="text" id="taskName" placeholder="Task Name" required> <button type="submit">Add
Task</button>
</form>
</div>
<div class="task-list">
<h2>Task List</h2>
<ul id="taskList">
<!-Tasks will be dynamically added here →→→
</ul>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
background-color: #4CAF50; color: #fff; border: none;cursor: pointer;
task-list ( flex-basis: 60%;
.task(
padding: 10px; background-color: #f5f5f5; margin-bottom: 10px; }
pending (
background-color: #ffcccb;
inprogress (
background-color: #ffffcc;
.completed {
background-color: #90ee90;
JavaScript (script.js):
document.addEventListener("DOMContentLoaded', function() { const taskForm =
document.getElementById('taskForm"); const taskList document.getElementById("taskList");
task Form.addEventListener('submit', function(e) {
CSS (styles.ess):
Full Stack Web
26
body ( font-family: Arial, sans-serif, margin: 0; padding: 0;
header { background-color: #4CAF50; padding: 20px; text-align: center; color: #fff;
} display: flex; justify-content: space-between;
main {
padding: 20px;
h1, h2 ( margin: 0;
task-form input[type="text"] { display: block; width: 100%; padding: 10px; margin-bottom: 10px;
.task-form button { padding: 10px;
}
OUTPUT:

RESULT :

Thus, the development of a simple dashboard for project management where the status of various tasks
is available. New tasks can be added and status of existing tasks can be changed among pending, InProgress
and completed is successfully and implemented.
Ex. No: 8
DEVELOP AN ONLINE SURVEY APPLICATION
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.

PROCEDURE:

Getting started with online surveys is pretty easy when you follow these 7 simple steps:

1. Decide on your research goals.

2. Create a list of questions.
3. Invite the participants.
4. Gather your responses.
5. Analyse the results.
6. Write a report.
7. Apply what you have learned.

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="styles.css"> <title>Online Survey Application</title>
</head>
<body>
<header>
<h1>Online Survey Application</h1>
</header>
<main>
<div class="question-container" >
<h2>Question:</h2>
<p id="question"> </p>
</div>
<div class="answer-container">
<h2>Your Answer:</h2>
<textarea id="answer" placeholder="Enter your answer here"></textarea>
<button id="submitAnswer">Submit Answer</button>

</div>
</main>
<script src="script.js"></script>
</body>
</html> Styles.css body {
font-family: Arial, sans-serif; margin: 0;
padding: 0; } header {
background-color: #4CAF50; padding: 20px;
text-align: center; color: #fff;
}
main {
padding: 20px; display: flex;
justify-content: space-between;
}
h1, h2 { margin: 0;
}
.question-container, .answer-container { flex-basis: 45%;
}

textarea {
height: 150px; width: 100%;
margin-bottom: 10px; padding: 10px;
}
button {
padding: 10px;
background-color: #4CAF50; color: #fff;
border: none; cursor: pointer;
}
Script.js:
document.addEventListener("DOMContentLoaded", function() { const questionElement
= document.getElementById("question"); const answerElement =
document.getElementById('answer');
const submitAnswerButton = document.getElementById("submitAnswer"); const
questions=[
"What is your favorite color?", "What is your favorite food?",
"What is your favorite hobby?", "What is your favorite movie?", "What is your favorite
book?"
];
function displayRandomQuestion() {
const randomIndex = Math.floor(Math.random()*questions.length);

questionElement.textContent = questions[randomIndex];
}

submitAnswerButton.addEventListener('click', function() { const answer =

answerElement.value;
console.log("Submitted answer:", answer); answerElement.value = '';
displayRandomQuestion();
});
displayRandomQuestion();
});
OUTPUT:

RESULT:

Thus the web application develop an online survey application where a collection of questions is
available and users are asked to answer any random 5 questions created succesfullty.