Scribd
Upload
36 views64 pages

Full Stack Web Development Lab Record

The document outlines the laboratory record for the Full Stack Web Development course at CSI College of Engineering for the academic year 2024-2025. It includes a certification section for students, an index of experiments, and detailed procedures for various web development projects such as creating a portfolio website, login/signup pages, and a to-do list application. Each experiment includes aims, procedures, code examples, and expected results.

Uploaded by

sujithjosh313
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
36 views64 pages

Full Stack Web Development Lab Record

The document outlines the laboratory record for the Full Stack Web Development course at CSI College of Engineering for the academic year 2024-2025. It includes a certification section for students, an index of experiments, and detailed procedures for various web development projects such as creating a portfolio website, login/signup pages, and a to-do list application. Each experiment includes aims, procedures, code examples, and expected results.

Uploaded by

sujithjosh313
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

CSI COLLEGE OF ENGINEERING

THE NILGIRIS-643 215


Autonomous Institution

LABORATORY RECORD

DEPARTMENT OF INFORMATION TECHNOLOGY


IT3511 – FULL STACK WEB
DEVELOPMENT LABORATORY
YEAR 2025-2026
1
CSI COLLEGE OF ENGINEERING, KETTI
The Nilgiris – 643 215
(Approved by AICTE New Delhi –Affiliated to Anna University Chennai)

Register No: ....................................................................


Department: ………………….………………………...

This is to Certified that Mr./Ms ..................................................... with the register no


...................................................................................... has satisfactorily completed the
practical Course IT3511 FULL STACK WEB DEVELOPMENT Laboratory
prescribed by Anna University, Chennai for ……….. Semester [Link] Examination
during the academic year 2024 – 2025.

Staff In-Charge Head of the Department

Submitted to the Anna University, Chennai [Link] Examination for .............. Semester,
conducted on ………………..

Internal Examiner External Examiner

2
INDEX

EXP DATE LIST OF EXPERIMENTS MARKS STAFF


NO SIGNATURE

1 Develop a portfolio website for yourself


which gives details about yourself for a
potential recruiter.
2 Develop a simple login and Signup page

3 Create a web application to manage the TO-DO


list of users, can login and manage their to-do
items.

4 Create a simple micro blogging application (like


twitter) that allows people to post their content
which can be viewed by people who follow
them.
5 Create a food delivery website where users can
order food from a particular restaurant listed in
the website.
6 Develop a classifieds web application to buy and
sell used products.
7 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.

8 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.
9 Develop an online survey application where a
collection of questions is available and users are
asked to answer any random 5 questions.

10 Develop a simple web application for booking


movie tickets on online

1
EX No:01 DEVELOP A PORTFOLIO WEBSITE FOR YOURSELF WHICH GIVES DETAILS
ABOUT YOURSELF FOR A POTENTIAL RECRUITER
Date:

AIM:

The aim of this question is to create a simple portfolio website using HTML and CSS. The website should
provide information about yourself for potential recruiters.

Procedure:
• Create an HTML file (e.g., [Link]) with basic structure.
• Link an external CSS file (e.g., [Link]) to your HTML.
• Add a header with your name and job title.
• Include a section for a brief self-introduction.
• Create a skills section using an unordered list.
• Showcase projects using div elements for each.
• Provide a section with contact information.
• Write CSS rules for styling elements.
• Implement media queries for responsiveness.
• Test in various browsers and devices; review and refine as needed.

Code:
[Link]:

<!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>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">Your Name</div>
<ul class="nav-links" id="navLinks">
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
2
</ul>
<div class="hamburger" id="hamburger">☰</div>
</nav>
</header>
<section class="hero">
<h1>Your Name</h1>
<h2>Your Ambition</h2>
<p>Your Passion</p>
</section>
<section id="about">
<h2>About</h2>
<p>About Yourself</p>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<p>✔ Project Topic</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p> Email</p>
<p> <a href="[Link]
<p> <a href="[Link]
</section>
<footer>© 2025 Your Name</footer>
<script src="[Link]"></script>
</body>
</html>

[Link]:

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif
}

body{
background:#0a192f;
color:#ccd6f6;
line-height:1.6

}
header{background:#112240;
padding:15px;
3
position:sticky;top:0
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center
}

.logo{color:#64ffda;
font-weight:bold
}

.nav-links{
display:flex;
list-style:none;gap:15px
}

.nav-links a{
color:#ccd6f6;
text-decoration:none
}

.nav-links a:hover{
color:#64ffda
}
.hamburger{
display:none;
cursor:pointer;
color:#64ffda}
.hero{padding:60px;
text-align:center
}

section{
padding:40px;
text-align:center
}

footer{
text-align:center;
padding:15px;
background:#112240;
color:#8892b0
}
@media(max-width:768px)
{
.nav-links{
display:none;
flex-direction:column;
background:#112240;
padding:10px;
position:absolute;

4
right:10px;top:50px
}
.[Link]{
display:flex
}
.hamburger{
display:block
}
}

Output:

Result:

Thus the to creation a simple portfolio website using HTML and CSS is done successfully and output got verified.

5
EX No:02 DEVELOP A SIMPLE LOGIN AND SIGNUP PAGE

Date:

Aim:

To design and develop a simple Login and Signup web page using HTML, CSS, and JavaScript for user
authentication interface.

Procedure:

 Create a project folder (e.g., LoginSignupApp).


 Inside the folder, create three files:
• [Link]
• [Link]
• [Link]
• [Link]
 Write HTML code for [Link] to create a form with fields for email and password, and a login button.
 Write HTML code for [Link] with fields for first name, email, password, and repeat password, and a
signup button.
 Link the CSS file ([Link]) in both HTML pages to apply styling (colors, layout, borders, etc.).
 Link the JavaScript file using the <script> tag with the defer attribute to ensure it runs after the page loads.
 Add JavaScript validation for Signup and for Login:
 Display error messages if validation fails using innerText of a paragraph element with ID error-message.
 Run the pages [Link] and [Link] in a browser

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>
<body>
<div class="wrapper">
<h2>Login</h2>
<p id="error-message"></p>
<form id="login-form">
<input type="email" id="email" placeholder="Email"><br>
<input type="password" id="password" placeholder="Password"><br>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="[Link]">Signup</a></p>
</div>
</body>
</html>
6
[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>
<body>
<div class="wrapper">
<h2>Signup</h2>
<p id="error-message"></p>
<form id="signup-form">
<input type="text" id="firstname" placeholder="Firstname"><br>
<input type="email" id="email" placeholder="Email"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="password" id="repeat" placeholder="Repeat Password"><br>
<button type="submit">Signup</button>
</form>
<p>Already have an account? <a href="[Link]">Login</a></p>
</div>
</body>
</html>

[Link]

body {
font-family: Arial;
background: #58034f;
text-align: center;
}
.wrapper {
background: #ffffff;
width: 300px;
margin: 100px auto;
padding: 20px;
border-radius: 10px;
}
input, button {
width: 90%;
padding: 10px;
margin: 8px 0;
}
button {
background: #ff0303;
color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
cursor: pointer;
7
}
button:hover {
background: #ff0000;
}
#error-message {
color: red;
}
a{
color: #d20e0e;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

[Link]

[Link]("DOMContentLoaded", () => {
const signupForm = [Link]("signup-form");
const loginForm = [Link]("login-form");
const error = [Link]("error-message");

if (signupForm) {
[Link]("submit", (e) => {
const fname = [Link]("firstname").[Link]();
const email = [Link]("email").[Link]();
const pass = [Link]("password").value;
const rep = [Link]("repeat").value;

if (!fname || !email || !pass || [Link] < 8 || pass !== rep) {


[Link]();
[Link] = "Please fill all fields correctly!";
} else {
[Link] = "";
alert("Signup successful!");
}
});
}

if (loginForm) {
[Link]("submit", (e) => {
const email = [Link]("email").[Link]();
const pass = [Link]("password").value;

if (!email || !pass) {
[Link]();
[Link] = "Email and password required!";
} else {
[Link] = "";
alert("Login successful!");
}
});
}
8
});

Output:

Result:

Thus a simple Login and Signup web page using HTML, CSS, and JavaScript for user authentication interface
is created successfully and ouyput got verified.

9
EX No:03 CREATE A WEB APPLICATION TO MANAGE THE TO-DO LIST OF
USERS, WHERE USERS CAN LOGIN AND
Date: 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
Procedure:
1. Create the Login Form:
2. Design the TO-DO List Interface:
3. Style Your Application:.
4. Implement JavaScript Functions:
5. Test the Application:
6. Enhance and Expand (Optional):

Code:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart To-Do App</title>
<link href="[Link]
rel="stylesheet">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="auth-container active" id="loginPage">
<h2> Welcome Back!</h2>
<input type="text" id="login-username" placeholder="Username">
<input type="password" id="login-password" placeholder="Password">
<button id="login-btn">Login</button>
<p>Don't have an account? <a id="gotoRegister">Register</a></p>
</div>
<div class="auth-container" id="registerPage">
<h2> Create Account</h2>
<input type="text" id="reg-username" placeholder="Choose Username">
<input type="password" id="reg-password" placeholder="Choose Password">
<button id="register-btn">Register</button>
<p>Already have an account? <a id="gotoLogin">Login</a></p>
</div>
<div class="container" id="todoPage">
<h1> Smart To-Do List</h1>
<div class="input-section">
<input type="text" id="taskInput" placeholder="✍ Enter a new task...">
<button id="addTask"> </button>
</div>
<ul id="taskList"></ul>
10
<div class="task-summary">
<p> Total: <span id="total">0</span></p>
<p> Ongoing: <span id="ongoing">0</span></p>
<p> Completed: <span id="completed">0</span></p>
</div>
<div id="quote"></div>
<button id="logout-btn"> Logout</button>
</div>
<script src="[Link]"></script>
</body>
</html>

[Link]
*{
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
margin: 0; background: linear-gradient(135deg, #667eea, #764ba2, #89f7fe);background-size: 400% 400%;
animation: gradientMove 8s ease infinite;height: 100vh;display: flex;justify-content: center;
align-items: center;color: #fff;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.auth-container, .container {
background: rgba(255, 255, 255, 0.1);padding: 30px 40px;border-radius: 20px;backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(255,255,255,0.3);text-align: center;width: 350px;display: none;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.[Link],
11
.[Link] {
display: block;
}
input {
display: block;width: 100%;margin: 10px 0;padding: 12px;border-radius: 10px;border: none;outline: none;
text-align: center;font-size: 15px;
}
button {
background: linear-gradient(90deg, #43cea2, #185a9d);border: none;color: white;padding: 12px 20px;
border-radius: 12px;font-weight: 600;cursor: pointer;width: 100%;margin-top: 10px;transition: transform
0.2s ease;
}
button:hover {
transform: scale(1.05);
}
.input-section {display: flex;gap: 10px;margin-bottom: 15px;
}
#taskInput {
flex: 1;padding: 18px;border-radius: 12px;border: none;outline: none; font-size: 18px;text-align: center;
}
#addTask {
background: linear-gradient(90deg, #ff9966, #ff5e62);padding: 18px;font-size: 18px;border-radius: 12px;
}
ul {
list-style: none;padding: 0;margin: 0;
}
li {
background: rgba(255, 255, 255, 0.2);margin: 8px 0;padding: 10px;border-radius: 10px;display: flex;
justify-content: space-between;align-items: center;font-size: 15px;
}
[Link] {
text-decoration: line-through; opacity: 0.7;
}
12
.task-summary {
display: flex;justify-content: space-between; margin-top: 15px; font-size: 14px;
}
#quote {
margin-top: 15px;font-size: 14px;font-style: italic; color: #fff;
}
[Link]

const loginPage = [Link]('loginPage');


const registerPage = [Link]('registerPage');
const todoPage = [Link]('todoPage');
[Link]('gotoRegister').onclick = () => {
[Link]('active');
[Link]('active');
};
[Link]('gotoLogin').onclick = () => {
[Link]('active');
[Link]('active');
};
[Link]('register-btn').onclick = () => {
const user = [Link]('reg-username').value;
const pass = [Link]('reg-password').value;
if (user && pass) {
[Link]('todoUser', [Link]({ user, pass }));
alert(' Registered successfully!');
[Link]('active');
[Link]('active');
} else {
alert('⚠ Please fill in all fields');
}
};
[Link]('login-btn').onclick = () => {
const user = [Link]('login-username').value;
const pass = [Link]('login-password').value;
const stored = [Link]([Link]('todoUser'));
if (stored && user === [Link] && pass === [Link]) {
[Link]('active');
[Link]('active');
} else {
alert(' Invalid credentials!');
}
};

[Link]('logout-btn').onclick = () => {
[Link]('active');
[Link]('active');
};
const taskInput = [Link]('taskInput');
const addTaskBtn = [Link]('addTask');
const taskList = [Link]('taskList');
13
const totalEl = [Link]('total');
const ongoingEl = [Link]('ongoing');
const completedEl = [Link]('completed');
const quoteEl = [Link]('quote');
let tasks = [Link]([Link]('tasks')) || [];
const quotes = [
" Keep going, you're doing great!",
" Every task done is a step forward.",
" Small steps make big changes.",
" Productivity feels amazing!",
" One more task down, you're unstoppable!"
];
function updateSummary() {
const total = [Link];
const completed = [Link](t => [Link]).length;
const ongoing = total - completed;
[Link] = total;
[Link] = ongoing;
[Link] = completed;
[Link] = completed > 0 ? quotes[completed % [Link]] : "";
}
function renderTasks() {
[Link] = '';
[Link]((task, i) => {
const li = [Link]('li');
[Link] = [Link] ? 'completed' : '';
[Link] = `
<span>${[Link]}</span>
<div>
<button onclick="toggleTask(${i})">✔</button>
<button onclick="deleteTask(${i})">🗑</button>
</div>`;
[Link](li);
});
updateSummary();
}
[Link] = function (i) {
tasks[i].completed = !tasks[i].completed;
saveTasks();
renderTasks();
}
[Link] = function (i) {
[Link](i, 1);
saveTasks();
renderTasks();
}
[Link] = () => {
const text = [Link]();
if (text) {
[Link]({ text, completed: false });
[Link] = '';
saveTasks();
renderTasks();
} else {
alert('⚠ Please enter a task!');
14
}
};
function saveTasks() {
[Link]('tasks', [Link](tasks));
}
renderTasks()

Output:

Result:

The Smart To-Do List Web Application with Login Authentication and Task Management was successfully
designed, implemented, and executed using HTML, CSS, and JavaScri

15
EX No:04 CREATE A SIMPLE MICRO BLOGGING APPLICATION (LIKE
TWITTER) THAT ALLOWS PEOPLE TO POST THEIR
Date: 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

Procedure:

• Create three web pages — Signup, Login, and Home — using HTML, CSS, and JavaScript.
• Design user-friendly forms for signup and login with validations using JavaScript.
• Store and retrieve user data securely in localStorage for authentication.
• After successful login, redirect the user to the Home page displaying posts and tweets.
• Enable features like posting tweets, liking posts, and logout functionality with localStorage updates.

Code

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign up / X</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div class="container">
<div class="left">
<div class="x-logo">𝕏</div>
</div>

<div class="right">
<h1>Happening now</h1>
<h2>Join today.</h2>

<form id="signupForm">
<input type="text" id="name" placeholder="Name" required />
<input type="email" id="email" placeholder="Email" required />
<input type="password" id="password" placeholder="Password" required />
<button type="submit">Sign Up</button>
</form>

<p>Already have an account? <a href="[Link]">Sign in</a></p>


</div>
</div>
1
16
<script>
const form = [Link]("signupForm");
[Link]("submit", (e) => {
[Link]();

const name = [Link]("name").value;


const email = [Link]("email").value;
const password = [Link]("password").value;

if (!name || !email || !password) {


alert("Please fill in all fields");
return;
}

[Link]("userEmail", email);
[Link]("userPassword", password);
[Link]("userName", name);

alert("Signup successful!");
[Link] = "[Link]";
});
</script>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login / X</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div class="container">
<div class="left">
<div class="x-logo">𝕏</div>
</div>

<div class="right">
<h1>Happening now</h1>
<h2>Sign in to X.</h2>

<form id="loginForm">
<input type="email" id="loginEmail" placeholder="Email" required />
<input type="password" id="loginPassword" placeholder="Password" required />
<button type="submit">Login</button>
</form>

1
17
<p>Don’t have an account? <a href="[Link]">Sign up</a></p>
</div>
</div>

<script>
[Link]("loginForm").addEventListener("submit", (e) => {
[Link]();

const email = [Link]("loginEmail").[Link]();


const password = [Link]("loginPassword").[Link]();

const storedEmail = [Link]("userEmail");


const storedPassword = [Link]("userPassword");
const storedName = [Link]("userName");

if (email === storedEmail && password === storedPassword) {


[Link]("currentUser", storedName);
alert("Login successful!");
[Link] = "[Link]";
} else {
alert("Invalid email or password!");
}
});
</script>

</body>
</html>

[Link]

@import
url("[Link]
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--bg-dark: #000;
--bg-card: #16181c;
--accent: #1d9bf0;
--accent-hover: #1a8cd8;
--text: #e7e9ea;
--text-muted: #8b98a5;
--border: #2f3336;
}
body {
background-color: var(--bg-dark);
1
18
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
padding: 80px 20px;
width: 100%;
max-width: 1200px;
}
.left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.x-logo {
font-size: 275px; /* increase size */
font-weight: bold;
color: #a2aeb6; /* Twitter blue */
text-align: center;
}
.left img {
width: 350px;
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 400px;
1
19
}
.right h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 20px;
}

.right p {
font-size: 1.2rem;
color: var(--text-muted);
form {
display: flex;
flex-direction: column;
gap: 15px;
}
input {
padding: 14px;
background: #0f1419;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 1rem;
transition: border-color 0.2s;
}
input:focus {
border-color: var(--accent);
outline: none;
}
button {
padding: 14px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: var(--accent-hover);
transform: scale(1.02);
}
.navbar {
position: fixed;
1
20
.nav-item {
color: var(--text);
font-size: 1.1rem;
padding: 10px 0;
cursor: pointer;
transition: color 0.2s;
}
.nav-item:hover {
color: var(--accent);
}
.tweet-box {
margin-left: 300px;
padding: 20px;
width: 600px;
border-bottom: 1px solid var(--border);
}
.tweet-box textarea {
width: 100%;
background: transparent;
border: none;
color: var(--text);
font-size: 1.1rem;
resize: none;
outline: none;
height: 80px;
margin-bottom: 10px;
}
.tweet-box button {
background: var(--accent);
border: none;
color: white;
border-radius: 50px;
padding: 10px 20px;
font-weight: 600;
cursor: pointer;
float: right;
}
.tweet-box button:hover {
background: var(--accent-hover);
}
.feed {
margin-left: 300px;
width: 600px;
display: flex;
flex-direction: column;
1
21
gap: 15px;
padding: 20px 0;
}
color: var(--text-muted);
cursor: pointer;
transition: color 0.2s ease;
}
.[Link] {
color: var(--accent);
}

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home / X</title>
<link
href="[Link]
rel="stylesheet">
<script src="[Link]
</head>
<body>
<h3>Welcome, <span id="displayName"></span></h3>
<div class="left-sidebar">
<div class="logo">𝕏</div>
<div class="nav-item"><i data-lucide="home"></i> Home</div>
<div class="nav-item"><i data-lucide="search"></i> Explore</div>
<div class="nav-item"><i data-lucide="bell"></i> Notifications</div>
<div class="nav-item"><i data-lucide="mail"></i> Messages</div>
<div class="nav-item"><i data-lucide="user"></i> Profile</div>
<button id="logoutBtn" class="tweet-btn">Logout</button>
</div>
<div class="main">
<div class="feed-header">
<div class="tab active">For you</div>
const tweetInput = [Link]("tweetInput");
const tweetBtn = [Link]("tweetBtn");
const tweetFeed = [Link]("tweetFeed");
const logoutBtn = [Link]("logoutBtn");
const currentUser = [Link]("currentUser") || "guest";
let tweets = [Link]([Link]("tweets")) || [];
function renderTweets() {
1
22
[Link] = "";
[Link]().reverse().forEach((tweet, i) => {
const div = [Link]("div");
[Link]("tweet");

<div><span class="username">${[Link]}</span> <span


class="handle">@${[Link]().replace(/ /g, '')}</span></div>
<div>${[Link]}</div>
<div class="actions">
<span> </span>
<span> </span>
<span class="like-btn ${[Link] ? 'liked' : ''}" data-index="${i}">
${[Link]}</span>
</div>
</div>
`;
[Link](div);
});
}
[Link]("click", () => {
const text = [Link]();
if (!text) return;
const newTweet = { user: currentUser, content: text, likes: 0, liked: false };
[Link](newTweet);
[Link]("tweets", [Link](tweets));
[Link] = "";
renderTweets();
});
[Link]("click", e => {
if ([Link]("like-btn")) {
const i = [Link];
tweets[i].liked = !tweets[i].liked;
tweets[i].likes += tweets[i].liked ? 1 : -1;
[Link]("tweets", [Link](tweets));
renderTweets();
}
});
[Link]("click", () => {
[Link]("currentUser");
[Link] = "[Link]";
});
renderTweets();
</script>
</body>
</html>
1
23
Output:

Result:

A simple micro blogging application (like twitter) that allows people to post their content which can be
viewed by people who follow them is successfully created and output got verified.

1
24
EX No:05 CREATE A FOOD DELIVERY WEBSITE WHERE USERS CAN
ORDER FOOD FROM A PARTICULAR RESTAURANT
Date: LISTED IN THE WEBSITE.

Aim:
To develop a simple Food Delivery Website using HTML, CSS, and JavaScript, where users can log in,
sign up, view a restaurant’s menu, add food items to the cart, and place an order.

Procedure:

• Create a new project folder named FoodDeliveryWebsite.

• Open VS Code (or any text editor) and create a new file named [Link].

• Copy and paste the complete HTML, CSS, and JavaScript code (given below) into the file.

• Save the file and open it in your web browser (Right-click → Open with → Chrome).

• The homepage displays a sample restaurant called Spice Junction with its menu.
• Click Login / Sign Up to create a user account (stored locally using JavaScript).

• Add menu items to your cart, review your order, and click Checkout to place the order.

• The system will show a confirmation message with an Order ID and save it in local storage.

• Test the login, signup, and order flow to verify the functionality.

Code:
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Delivery Website</title>
<link rel="stylesheet" href="[Link]" />
<script src="[Link]" defer></script>
</head>
<body>
<!-- LOGIN PAGE -->
<div class="login-container" id="loginPage">
1
25
<div class="login-box">
<h2>Login</h2>
<p id="error"></p>
<input type="email" id="email" placeholder="Enter email" required />
<input type="password" id="password" placeholder="Enter password" required />
<button onclick="login()">Login</button>
<p style="font-size:14px; margin-top:10px;">Demo: demo@[Link] / demopass</p>
</div>
</div>

<!-- RESTAURANT PAGE -->


<div id="restaurantPage" style="display:none;">
<header>

<h2>Spice Junction </h2>


<button onclick="logout()">Logout</button>
</header>

<div class="restaurant">
<h2>Welcome to Spice Junction!</h2>
<p>Choose from our delicious menu items below.</p>
</div>

<div class="menu">
<div class="item">
<h3>Chicken Biryani</h3>
<p>₹180</p>
<button onclick="addToCart('Chicken Biryani',180)">Add to Cart</button>
</div>
<div class="item">
<h3>Paneer Butter Masala</h3>
<p>₹150</p>
<button onclick="addToCart('Paneer Butter Masala',150)">Add to Cart</button>

1
26
</div>
<div class="item">
<h3>Veg Fried Rice</h3>
<p>₹120</p>
<button onclick="addToCart('Veg Fried Rice',120)">Add to Cart</button>
</div>
<div class="item">
<h3>Gulab Jamun</h3>
<p>₹80</p>
<button onclick="addToCart('Gulab Jamun',80)">Add to Cart</button>
</div>
</div>

<div class="cart">
<h3>Your Cart</h3>
<ul id="cartList"></ul>
<p id="total">Total: ₹0</p>
<button id="checkoutBtn" onclick="checkout()">Checkout</button>
</div>
</div>
</body>
</html>

[Link]:
*{
box-sizing: border-box;font-family: "Poppins", sans-serif;
}
body {
margin: 0;padding: 0;background-color: #f7f7f7;
}
.login-container {
display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;

1
27
background: linear-gradient(135deg, #ff4b2b, #ff416c);color: white;
}
.login-box {
background: white;color: #333;padding: 30px;border-radius: 12px;box-shadow: 0 4px 8px rgba(0,0,0,0.2);
width: 300px;text-align: center;
}
.login-box input {
width: 90%;padding: 10px;margin: 8px 0;border-radius: 6px;border: 1px solid #ccc;
}
.login-box button {
background: #ff4b2b; color: white;border: none;padding: 10px 20px;border-radius: 6px;
cursor: pointer;width: 100%;font-weight: bold;
}
.login-box button:hover {
background: #ff2a00;
}
#error {
color: red;font-size: 14px;
}
header {
background: #ff4b2b;color: white;display: flex;
justify-content: space-between;padding: 15px 25px;align-items: center;
}
header h2 {
margin: 0;
}
header button {
background: white;color: #ff4b2b;border: none;padding: 8px 15px;border-radius: 8px;cursor: pointer;
font-weight: bold;
}
header button:hover {
background: #ffe5e0;}

1
28
.item h3 {
margin: 0;
}
.item button {
background: #ff4b2b;color: white;border: none;padding: 8px 10px;border-radius: 6px;cursor: pointer;
margin-top: 8px;
}
.cart {
background: white;margin: 30px auto;width: 300px;padding: 20px;border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.cart h3 {
text-align: center;
}
.cart ul {
list-style: none;padding: 0;
}
.cart li {
display: flex;justify-content: space-between;padding: 5px 0;border-bottom: 1px solid #eee;
}
#checkoutBtn {
background: #ff4b2b;color: white;border: none;padding: 10px;border-radius: 8px;cursor: pointer;
width: 100%;margin-top: 10px;font-weight: bold;
}
#checkoutBtn:hover {
background: #ff2a00;
}

[Link]:
const demoUser = { email: "demo@[Link]", password: "demopass" };
let cart = [];

1
29
[Link] = function() {
if ([Link]("loggedIn") === "true") {
[Link]("loginPage").[Link] = "none";
[Link]("restaurantPage").[Link] = "block";
}
};
function login() {
const email = [Link]("email").value;
const password = [Link]("password").value;
const error = [Link]("error");
}
function logout() {
[Link]("loggedIn");
[Link]();
}
function addToCart(item, price) {
[Link]({ item, price });
displayCart();
}
function displayCart() {
const cartList = [Link]("cartList");
const totalEl = [Link]("total");
[Link] = "";
function checkout() {
if ([Link] === 0) {
alert("Your cart is empty!");
return;
}

alert(" Order placed successfully!");


cart = [];
displayCart();
}

1
30
Output:

Result:
Creation of a simple Food Delivery Website using HTML, CSS, and JavaScript, where users can log in,
sign up, view a restaurant’s menu, add food items to the cart, and place an order is completed successfully
and output got verifie

1
31
EX No:06 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.

Procedure:

1. Register and log in,


2. Add (sell) products with images,
3. View and buy products,
4. Track their purchased products
5. And manage their own listings — using localStoragedescription

Code
Home.
html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Used Products</title>
<link rel="stylesheet" href="[Link]">
</head><body><nav>
<h1>Used Products</h1><ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Buy</a></li>
<li><a href="[Link]">Sell</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
<li><button id="logoutBtn">Logout</button></li>
</ul></nav><center><section class="hero">
<h2>Welcome to Used Products Market!</h2>
<p>Buy and Sell second-hand items safely and easily.</p></section></center>
<script src="[Link]"></script></body></html>

[Link]

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


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buy | Used Products</title>
<link rel="stylesheet" href="[Link]"></head><body><nav<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Buy</a></li>
<li><a href="[Link]">Sell</a></li>
1
32
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
<li><a href="[Link]">My Purchases</a></li>
<li><button id="logoutBtn">Logout</button></li></ul></nav><div class="page-container">
<h2>Available Products</h2><div id="productList" class="product-grid"></div></div>
<script src="[Link]"></script></body></html>

[Link]

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login | Used Products</title><link rel="stylesheet" href="[Link]">
</head><body> <div class="auth-container"><h2>Login</h2>
<form id="loginForm">
<input type="email" id="loginEmail" placeholder="Email" required>
<input type="password" id="loginPassword" placeholder="Password" required>
<button type="submit">Login</button>
<p>Don't have an account? <a href="[Link]">Register here</a></p></form>
<p id="loginMsg" class="message"></p></div><script src="[Link]"></script></body></html>

[Link]

body {
font-family: Arial, sans-serif;background: #f8f9fa; margin: 0;padding: 0;color: #333;
}
.auth-container, .page-container {
width: 90%;max-width: 400px;margin: 100px auto;background: #fff;padding: 25px;border-radius:
10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);text-align: center;
}
button {
background: #007bff;color: #fff;border: none;cursor: pointer;
}
button:hover {
background: #0056b3;
}
nav {
background: #007bff;color: #fff;padding: 10px;display: flex;justify-content: center;
}
nav ul {
list-style: none;display: flex;gap: 15px;
}
nav ul li a, nav button {
color: white;text-decoration: none;font-weight: bold;
}
1
33
.product-grid {
display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 15px;
}
.product-grid div {
border: 1px solid #ccc;padding: 10px;background: #fff;border-radius: 8px;
}
.product-card {
border: 1px solid #ccc; padding: 10px;background: #fff;border-radius: 8px;text-align: center;
}
.product-card img {
width: 100%; height: 150px;object-fit: cover; border-radius: 6px; margin-bottom: 10px;
}

[Link]

const regForm = [Link]("registerForm");

if (regForm) {

[Link]("submit", (e) => {

[Link]();

const name = [Link]("regName").[Link]();

const email = [Link]("regEmail").[Link]();

const password = [Link]("regPassword").[Link]();

const users = [Link]([Link]("users")) || [];

const userExists = [Link]((u) => [Link] === email);

const msg = [Link]("registerMsg");

[Link] = "";

if (userExists) {

[Link] = " User already exists!";

[Link] = "red";

return;

[Link]({ name, email, password });

[Link]("users", [Link](users));

[Link] = " Registration successful! Redirecting...";


1
34
[Link] = "green";

setTimeout(() => ([Link] = "[Link]"), 1500);

});

const loginForm = [Link]("loginForm");

if (loginForm) {

[Link]("submit", (e) => {

[Link]();

const email = [Link]("loginEmail").[Link]();

const password = [Link]("loginPassword").[Link]();

const users = [Link]([Link]("users")) || [];

const validUser = [Link]((u) => [Link] === email && [Link] === password);

const msg = [Link]("loginMsg");

[Link] = "";

if (validUser) {

[Link]("loggedInUser", [Link](validUser));

[Link] = " Login successful!";

[Link] = "green";

setTimeout(() => ([Link] = "[Link]"), 1000);

} else {

[Link] = " Invalid credentials!";

[Link] = "red";

});

const logoutBtn = [Link]("logoutBtn");

if (logoutBtn) {

[Link]("click", () => {

[Link]("loggedInUser");
1
35
[Link] = "[Link]";

});

const name = [Link]("prodName").[Link]();

const price = [Link]("prodPrice").[Link]();

const desc = [Link]("prodDesc").[Link]();

const imageFile = [Link]("prodImage").files[0];

if (!imageFile) {

alert("Please upload an image!");

return;

const reader = new FileReader();

[Link] = function () {

const products = [Link]([Link]("products")) || [];

[Link]({

name,

price,

desc,

image: [Link],

seller: [Link],

});

[Link]("products", [Link](products));

alert(" Product added successfully!");

[Link]();

const myProductsList = [Link]("myProducts");

if (myProductsList) {

const loggedInUser = [Link]([Link]("loggedInUser"));

? userProducts

.map(

(p, i) => `
1
36
<div class="product-card">

<img src="${[Link]}" alt="${[Link]}" class="product-image">

<h3>${[Link]}</h3>

<p><strong> ${[Link]}</strong></p>

<p>${[Link]}</p>

<button class="deleteBtn" data-index="${i}">Delete</button>

</div>`

.join("")

: `<p>You haven't added any products yet.</p>`;

[Link](".deleteBtn").forEach((btn) => {

[Link]("click", (e) => {

const index = [Link]("data-index");

const allProducts = [Link]([Link]("products")) || [];

const filtered = [Link](

(p) => !([Link] === [Link] && [Link] === userProducts[index].name)

);

[Link]("products", [Link](filtered));

alert(" Product deleted successfully!");

[Link]();

});

});

const purchaseList = [Link]("myPurchases");

if (purchaseList) {

const loggedInUser = [Link]([Link]("loggedInUser"));

const purchases = [Link]([Link]("purchased")) || [];

const userPurchases = [Link]((p) => [Link] === [Link]);

[Link] = [Link]

: `<p>You haven't purchased anything yet.</p>`;}


1
37
Output:

Result:

Developing a classifieds web application to buy and sell used products was created successfullly
and Output got Verified.

1
38
EX No:07 DEVELOP A LEAVE MANAGEMENT SYSTEM FOR AN
ORGANIZATION WHERE USERS CAN APPLY DIFFERENT
Date: TYPES OF LEAVES SUCH AS CASUAL LEAVE AND MEDICAL
LEAVE. THEY ALSO CAN VIEW THE AVAILABLE
NUMBER OF DAYS.

Aim:
To create Leave Management system app using HTML,CSS,JS is successfully created

Procedure:

1. Create the HTML Structure

1. Open a new HTML file — [Link].


2. Design the Interface (CSS) : Create [Link]
3. Use basic styling for the form, table, and buttons.
4. Implement JavaScript Logic : Create [Link].
5. Capture form submission event.
6. Validate inputs (no empty fields, valid dates).
7. Calculate number of leave days.
8. Display record in the table and optionally store in localStorage.

Code:
[Link]:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Advanced Leave Management System</title>
<style></style></head><body><div class="wrap">
<header>
<h1>Advanced Leave Management System</h1>
<div class="top-actions">
<div class="chip">Saved locally (localStorage)</div>
<button class="btn" id="exportCsv">Export CSV</button>
<button class="btn ghost" id="clearAll">Clear All</button>
</div>
</header>
<div class="container">
<aside class="card" aria-labelledby="formTitle">
<h2 id="formTitle">Apply for Leave</h2>
<form id="leaveForm" autocomplete="off">
<div class="field">
<label for="empName">Employee Name</label>
<input id="empName" type="text" placeholder="Full name" required />
</div>
<div class="field">
<label for="leaveType">Leave Type</label>
1
39
<select id="leaveType" required>
<option value="">Select type</option>
<option>Casual Leave</option>
<option>Sick Leave</option>
<option>Annual Leave</option>
<option>Maternity/Paternity</option>
<option>Unpaid Leave</option>
</select></div>
<div class="meta">
<div style="flex:1" class="field">
<label for="fromDate">From</label>
<input id="fromDate" type="date" required /></div>
<div style="flex:1" class="field">
<label for="toDate">To</label>
<input id="toDate" type="date" required /></div></div>
<div class="field">
<label for="days">Number of Days</label>
<input id="days" type="number" min="1" placeholder="Auto-calculated" readonly /></div>
<div class="field">
<label for="reason">Reason</label>
<textarea id="reason" placeholder="Short reason (min 10 chars)" required></textarea> </div>
<div style="display:flex;gap:8px;align-items:center">
<button class="btn" type="submit">Submit Request</button>
<button type="reset" class="btn ghost">Reset</button></div>
<div class="hint" style="margin-top:10px">Tip: Admin can Approve / Reject requests from
the table. Use Export to download CSV.</div>
</form> </aside><section>
<div class="card">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
<div class="controls" style="flex:1">
<input class="search" id="search" placeholder="Search by name, type, reason..." />
<select id="filterStatus">
<option value="all">All Statuses</option>
<option value="Pending">Pending</option>
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option> </select>
<select id="sortBy">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="fromDateAsc">From Date ↑</option>
<option value="fromDateDesc">From Date ↓</option>
</select></div></div>
<div class="table-wrap">
<table id="leaveTable" aria-live="polite"><thead>
<tr>
<th>Name</th><th>Type</th>th>From</th><th>To</th><th>Days</th>
<th>Reason</th><th>Status</th> <th>Actions</th></tr></thead>
<tbody></tbody> </table></div><footer>
<div class="muted" id="count">0 requests</div><div class="flex">
<div class="badge" id="lastSaved">--</div></div></footer></div> </section></div></div>
<div class="modal-backdrop" id="modal">
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
1
40
<h3 id="modalTitle">Confirm action</h3>
<p id="modalMsg"></p>
<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:12px">
<button class="btn ghost" id="modalCancel">Cancel</button>
<button class="btn" id="modalConfirm">Confirm</button>
</div> </div> </div> <script></script></body>
</html>

[Link]:

:root{
--bg:#0f1724; --card:#0b1220; --muted:#70a4ec; --accent:#06b6d4; --success:#10b981; --
danger:#ef4444; --warning:#f59e0b; --glass: rgba(255,255,255,0.03);
--radius:12px; --gap:16px; --maxw:1100px;
font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#071028 0%, #081225
60%);color:#4b3c6a}
.wrap{max-width:var(--maxw);margin:28px auto;padding:20px;}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
h1{font-size:20px;margin:0}
.top-actions{display:flex;gap:10px;align-items:center}
.btn{background:var(--accent);border:none;padding:8px 12px;border-
radius:10px;color:#032;cursor:pointer;font-weight:600}
.[Link]{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.container{display:grid;grid-template-columns:360px 1fr;gap:18px}
.card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 6px 18px
rgba(2,6,23,0.6)}
form .field{display:flex;flex-direction:column;margin-bottom:12px}
label{font-size:12px;color:var(--muted);margin-bottom:6px}
input[type=text], textarea, select, input[type=date], input[type=number]{background:var(--
glass);border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:8px;color:inherit}
textarea{min-height:80px;resize:vertical}
.meta{display:flex;gap:10px}
.small{font-size:12px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03)}
thead th{font-size:12px;color:var(--muted);}
.status{display:inline-block;padding:6px 8px;border-radius:999px;font-weight:700;font-size:12px}
.pending{background:var(--warning);color:#041018}
.approved{background:var(--success);color:#042010}
.rejected{background:var(--danger);color:#fff}
.actions{display:flex;gap:6px}
.chip{background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:8px;font-size:12px}
.controls{display:flex;gap:8px;align-items:center}
.search{flex:1}
.muted{color:var(--muted)}
.table-wrap{overflow:auto}
footer{margin-top:14px;display:flex;justify-content:space-between;align-items:center}
.hint{font-size:13px;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-
1
41
items:center;justify-content:center}
.modal{background:#071225;padding:18px;border-radius:12px;max-width:520px;width:100%}
.flex{display:flex;gap:10px}
.badge{padding:6px 10px;border-radius:20px;background:rgba(255,255,255,0.03)}
@media (max-width:880px){.container{grid-template-columns:1fr;}.card{padding:12px}}

[Link]:

const $ = (sel, root = document) => [Link](sel);


const STORAGE_KEY = 'ams_leaves_v1';
const leaveForm = $('#leaveForm');
const tableBody = $('#leaveTable tbody');
const empName = $('#empName');
const leaveType = $('#leaveType');
const fromDate = $('#fromDate');
const toDate = $('#toDate');
const reason = $('#reason');
const daysInput = $('#days');
const search = $('#search');
const raw = [Link](STORAGE_KEY);
if(raw){
try{ leaves = [Link](raw) }catch(e){ leaves = [] }
}
render();
bindEvents();
updateLastSaved();
}
function bindEvents(){
[Link]('submit', onSubmit);
[Link]('input', calculateDays);
[Link]('click', onTableClick);
[Link]('input', render);
[Link]('change', render);
[Link]('change', render);
[Link]('click', exportCSV);
[Link]('click', onClearAll);
[Link]('click', closeModal);
[Link]('click', confirmModal);
[Link]('keydown', (e)=>{ if([Link]==='Escape') closeModal(); });
}

function generateId(){ return 'L' + [Link]().toString(36) +


[Link]().toString(36).slice(2,7); }
function onSubmit(e){
[Link]();
// basic validation
if(![Link]() || ![Link] || ![Link] || ![Link] ||
![Link]()){
alert('Please fill all fields'); return;
}
if(new Date([Link]) > new Date([Link])){
alert('From date must be earlier than or equal to To date'); return;
1
42
}
if([Link]().length < 10){ alert('Reason must be at least 10 characters'); return; }
function calculateDays(){
if([Link] && [Link]){
if(new Date([Link]) <= new Date([Link])){
[Link] = calcWorkingDays([Link], [Link]);
} else [Link] = '';
} else [Link] = '';
}
function render(){
const q = [Link]().toLowerCase();
let list = [Link]();
if([Link] !== 'all') list = [Link](x => [Link]() ===
[Link]());
if(q) list = [Link](x => ([Link] + ' ' + [Link] + ' ' + [Link]).toLowerCase().includes(q));
const sortVal = [Link];
[Link]((a,b)=>{
if(sortVal === 'newest') return new Date([Link]) - new Date([Link]);
if(sortVal === 'oldest') return new Date([Link]) - new Date([Link]);
if(sortVal === 'fromDateAsc') return new Date([Link]) - new Date([Link]);
if(sortVal === 'fromDateDesc') return new Date([Link]) - new Date([Link]);
return 0;
});
[Link] = '';
for(const entry of list){
const tr = [Link]('tr');
[Link] = [Link];
<td title="${escapeAttr([Link])}">${truncate(escapeHtml([Link]),80)}</td>
<td><span class="status ${[Link]()}">${[Link]}</span></td>
<td class="actions">
<button class="btn ghost smallBtn" data-action="view">View</button>
<button class="btn ghost smallBtn" data-action="edit">Edit</button>
<button class="btn smallBtn" data-action="status" data-
status="Approved">Approve</button>
<button class="btn smallBtn" data-action="status" data-status="Rejected">Reject</button>
<button class="btn ghost smallBtn" data-action="delete">Delete</button>
</td>
`;
[Link](tr);
}

[Link] = `${[Link]} request${[Link] !== 1 ? 's' : ''}`;


}
function onTableClick(e){
const btn = [Link]('button'); if(!btn) return;
const tr = [Link]('tr'); if(!tr) return;
const id = [Link];
const action = [Link];
if(action === 'delete'){
pendingAction = {type:'delete', id};
showModal('Delete request?', 'Are you sure you want to delete this leave request? This action
cannot be undone.');
1
43
} else if(action === 'status'){
const newStatus = [Link];
pendingAction = {type:'status', id, payload:newStatus};
showModal(`${newStatus} request?`, `Change status to ${newStatus}?`);
} else if(action === 'view'){
const ent = [Link](x=>[Link]===id); if(!ent) return;
showModal('View request', `Name: ${[Link]}\nType: ${[Link]}\nFrom: ${[Link]}\nTo:
${[Link]}\nDays: ${[Link]}\nStatus: ${[Link]}\nReason: ${[Link]}`,'okOnly');
} else if(action === 'edit'){
openEdit(id);
}
}
function openEdit(id){
const ent = [Link](x=>[Link]===id); if(!ent) return;
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
// delete the original so submit will create new updated entry
leaves = [Link](x=>[Link]!==id);
save();
render();
[Link]();
}
function save(){
[Link](STORAGE_KEY, [Link](leaves));
updateLastSaved();
}
function updateLastSaved(){
const raw = [Link](STORAGE_KEY);
if(!raw){ [Link] = 'No data'; return; }
try{
const parsed = [Link](raw);
[Link] = `${[Link]} saved • ${new Date().toLocaleString()}`;
}catch(e){ [Link] = '--' }
}

function showModal(title, message, mode){


$('#modalTitle').textContent = title;
[Link] = message;
[Link] = mode || '';
if(mode === 'okOnly'){
[Link] = 'none';
[Link] = 'Close';
} else {
[Link] = '';
[Link] = 'Cancel';
}
[Link] = 'flex';
}
1
44
}
function exportCSV(){
if(![Link]){ alert('No data to export'); return; }
const header = ['ID','Name','Type','From','To','Days','Reason','Status','Created At'];
const rows = [Link](r => [[Link], [Link], [Link], [Link], [Link], [Link], [Link](/\n/g,' '),
[Link], [Link]]);
const csv = [header, ...rows].map(r => [Link](c =>
`"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n');
const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
const url = [Link](blob);
const a = [Link]('a'); [Link] = url; [Link] = `leaves_${new
Date().toISOString().slice(0,10)}.csv`; [Link](a); [Link](); [Link]();
[Link](url);
}
function escapeHtml(s){ return String(s).replace(/[&<>\"]+/g, function(t){ return
({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'})[t] || t; }); }
function escapeAttr(s){ return String(s).replace(/\"/g,'&quot;'); }
function truncate(s,n){ return [Link]>n? [Link](0,n-1)+'…': s; }
init();

OUTPUT:

Result:

To create Leave Management system app using HTML,CSS,JS is successfully created.

1
45
EX No:08 DEVELOP A SIMPLE DASHBOARD FOR PROJECT
MANAGEMENT WHERE THE STATUSES OF VARIOUS TASKS
Date: 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 availaible
. New tasks can be added and the status of exisiting tasks can be changed among pending, in progress or
completed

Procedure

• Create the HTML structure.


• Design the dashboard using CSS.
• Add JavaScript functionality.
• Implement status update feature.
• Test the functionality..
• Finalize the dashboard.

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login | Project Dashboard</title>
<link rel="stylesheet" href="[Link]" />
<script defer src="[Link]"></script>
</head>
<body class="auth-bg">
<div class="auth-container fade-in">
<h1 class="glow">Welcome Back</h1>
<input type="text" id="loginUsername" placeholder="Username" />
<input type="password" id="loginPassword" placeholder="Password" />
<button class="btn" onclick="animateButton(this); login()">Login</button>
<p>Don’t have an account? <a href="[Link]">Sign up</a></p>
</div>
<div id="toast"></div>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
1
46
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signup | Project Dashboard</title>
<link rel="stylesheet" href="[Link]" />
<script defer src="[Link]"></script>
</head>
<body class="auth-bg">
<div class="auth-container fade-in">
<h1 class="glow">Create Account</h1>
<input type="text" id="signupUsername" placeholder="Username" />
<input type="password" id="signupPassword" placeholder="Password" />
<input type="password" id="confirmPassword" placeholder="Confirm Password" />
<button class="btn" onclick="animateButton(this); signup()">Sign Up</button>
<p>Already have an account? <a href="[Link]">Login</a></p>
</div>
<div id="toast"></div>
</body>
</html>

[Link]

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #100116, #2575fc);
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
}
.form-box {
background: #0b7fb9;
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
text-align: center;
}
.form-box h2 {
margin-bottom: 20px;
color: #333;
}
.input-group {
margin-bottom: 15px;
1
47
}

.input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 10px;
font-size: 16px;
transition: 0.3s ease;
}
.input-group input:focus {
border-color: #4d4b4d;
outline: none;
box-shadow: 0 0 8px rgba(106, 17, 203, 0.3);
}
.switch-text a {
color: #6a11cb;
text-decoration: none;
font-weight: bold;
}
.switch-text a:hover {
text-decoration: underline;
}

[Link]

function showToast(message, type = "info") {


const toastContainer = [Link]("toast");
const toast = [Link]("div");
[Link] = "toast-msg";
const users = [Link]([Link]("users")) || {};
if (!users[username]) {
alert("User not found! Please signup first.");
return;
}
if (users[username].password !== password) {
alert("Incorrect password!");
return;
}
[Link]("loggedInUser", username);
alert("Login successful!");
[Link] = "[Link]";
}
function addTask() {
const name = [Link]("taskName").[Link]();
const status = [Link]("taskStatus").value;
const deadline = [Link]("taskDeadline").value;
const assignedTo = [Link]("assignedTo")?.value || "Me";
const user = [Link]("loggedInUser");
if (!name || !deadline) {
alert("Please enter task name and deadline!");
return;
1
48
}
let users = [Link]([Link]("users")) || {};
if (!users[user]) users[user] = { password: "", tasks: [] };
users[user].[Link]({
name,
status,
deadline,
progress: 0,
note: "",
assignedTo
});
[Link]("users", [Link](users));
[Link]("taskName").value = "";
[Link]("taskDeadline").value = "";
displayTasks();
}
function displayTasks() {
const user = [Link]("loggedInUser");
const users = [Link]([Link]("users")) || {};
const tasks = users[user]?.tasks || [];
const taskList = [Link]("taskList");
if (!taskList) return;
[Link] = "";
[Link]((t, i) => {
[Link] = ` ${new Date([Link]).toLocaleString()}`;
const status = [Link]("select");
["Pending", "InProgress", "Completed"].forEach(s => {
const opt = [Link]("option");
[Link] = s;
[Link] = s;
if (s === [Link]) [Link] = true;
[Link](opt);
});
[Link]("change", () => {
[Link] = [Link];
if ([Link] === "Completed") [Link] = 100;
[Link]("users", [Link](users));
displayTasks();
});
const progress = [Link]("input");
[Link] = "number";
[Link] = 0;
[Link] = 100;
[Link] = [Link];
[Link] = "progress-input";
function updateCharts() {
const user = [Link]("loggedInUser");
const users = [Link]([Link]("users")) || {};
const tasks = users[user]?.tasks || [];
if (![Link]) return;
const total = [Link];
const completed = [Link](t => [Link] === "Completed").length;
1
49
const avgProgress =
[Link]((sum, t) => sum + ([Link] || 0), 0) / total;
const progressFill = [Link]("progress-fill");
const progressText = [Link]("progress-text");
if (progressFill && progressText) {
[Link] = `${avgProgress}%`;
[Link] = `${[Link](avgProgress)}% Completed`;
}
const pie = [Link]("pieChart");
if (pie) {
const ctx = [Link]("2d");
[Link](0, 0, [Link], [Link]);

const pending = [Link](t => [Link] === "Pending").length;


const inProgress = [Link](t => [Link] === "InProgress").length;
const data = [pending, inProgress, completed];
const colors = ["#ff5f6d", "#fddb92", "#5efc82"];
let start = 0;
[Link]((val, i) => {
const slice = (val / total) * 2 * [Link];
[Link]();
[Link](110, 110);
[Link](110, 110, 100, start, start + slice);
[Link]();
[Link] = colors[i];
[Link]();
start += slice;
});
}
}

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>
<body>
<div class="container">
<form class="form-box" onsubmit="handleLogin(event)">
<h2>Login</h2>
<div class="input-group">
<input type="password" id="loginPassword" placeholder="Password" required>
</div>
<button type="submit" class="btn">Login</button>
<p class="switch-text">
Don't have an account? <a href="[Link]">Sign Up</a>
1
50
</p>
</form>
</div>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard | Project Manager</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body class="bg-image">
<div class="header fade-in">
<h1> Project Dashboard</h1>
<div class="header-controls">
<button id="themeToggle" class="glow-btn" onclick="animateButton(this)"> </button>
<button class="logout-btn glow-btn" onclick="animateButton(this); logout()">Logout</button>
</div>
</div>
<div class="analytics fade-in">
<div class="progress-section">
<h3> Task Completion Overview</h3>
<div class="progress-bar"><div id="progress-fill"></div></div>
<p id="progress-text">0% Completed</p>
</div>
</div>
<div class="task-input fade-in">
<input type="text" id="taskName" placeholder="Task name..." />
<input type="text" id="assignedTo" placeholder="Assign to (name/email)" />
<input type="datetime-local" id="taskDeadline" />
<select id="taskStatus">
<option value="Pending">Pending</option>
<option value="InProgress">In Progress</option>
<option value="Completed">Completed</option>
</select>
<button id="addBtn" class="glow-btn" onclick="animateButton(this); addTask()">Add Task</button>
</div>
<div class="task-list fade-in" id="taskList"></div>
<div id="toast" class="toast">Saved</div>
<script src="[Link]"></script>
</body>
</html>

1
51
Output:

Result:

A project management dashboard was successfully developed where new tasks can be added and
existing task statuses can be modified among Pending, In Progress, and Completed.

40
EX No:09 DEVELOP AN ONLINE SURVEY APPLICATION WHERE A
COLLECTION OF QUESTIONS IS AVAILABLE AND USERS ARE
Date: 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.

Procedure:
1. Create Project Folder:
Make a new folder named survey-app and add the following files:
survey-app/
├── [Link]
├── [Link]
└── [Link]
2. Design Login & Signup Pages:
o Use HTML forms for username and password inputs.
o Use localStorage to store and validate user credentials.
3. Create Survey Page:
o Prepare a collection of 10 sample questions.
o Randomly select any 5 questions using JavaScript ([Link]).
o Allow the user to submit text answers.
4. Store Survey Responses:
o Save the user’s responses in localStorage under their username.
5. Display Responses:
o After submission, show all previous responses by that user.
6. Add Styling (CSS):
o Apply gradient background, box shadows, and clean layout using CSS.
7. Test the Application:
o Open [Link] in a browser.
o Sign up → Log in → Fill survey → View saved responses.

Code
[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey App</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div class="container" id="loginPage">
4
53
<h1>Login</h1>
<form id="loginForm">
<input type="text" id="loginUsername" placeholder="Username" required />
<input type="password" id="loginPassword" placeholder="Password" required />
<button class="btn" type="submit">Login</button>
</form>
<p>Don't have an account? <a href="#" id="goSignup">Sign up</a></p>
</div>
<div class="container hidden" id="surveyPage">
<h2>Answer 5 Random Questions</h2>
<form id="surveyForm"></form>
<button class="btn" id="submitSurvey">Submit</button>
</div
<div class="container hidden" id="responsePage">
<h2>Survey Responses</h2>
<div id="responsesList"></div>
<button class="btn" id="logoutBtn">Logout</button>
</div>
<script src="[Link]"></script>
</body>
</html>

[Link]

*{
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to right, #74ebd5, #acb6e5);
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 400px;
background: #fff;
margin: 80px auto;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
padding: 30px 25px;
text-align: center;
}
h1, h2 {
color: #333;
}
form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
4
54
input, textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
}
.btn:hover {
background: #43a047;
}
a{
color: #1976d2;
text-decoration: none;
}
.hidden {
display: none;
}
.question {
margin-bottom: 20px;
text-align: left;
}
label {
font-weight: 600;
margin-bottom: 6px;
display: block;
}
.response-card {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
border-radius: 8px;}
[Link]

const questions = ["What is your favorite hobby?", "Which city do you live in?","What’s your dream
job?", "Who inspires you the most?","What’s your favorite movie?","Do you prefer tea or
coffee?","What’s your biggest goal this year?","Favorite subject in school?","What’s your favorite
food?","What’s your happiest memory?"];
const loginPage = [Link]("loginPage");
const signupPage = [Link]("signupPage");
const surveyPage = [Link]("surveyPage");
const responsePage = [Link]("responsePage");
const loginForm = [Link]("loginForm");
const signupForm = [Link]("signupForm");
const surveyForm = [Link]("surveyForm");
const responsesList = [Link]("responsesList");
[Link]("goSignup").addEventListener("click", () => {
[Link]("submit", (e) => {
[Link]();
const username = [Link]("signupUsername").[Link]();
const password = [Link]("signupPassword").[Link]();
const user = [Link]([Link](username));
if (user && [Link] === password) {
[Link]("currentUser", username);
4
55
function showSurvey() {
[Link]("hidden");
[Link]("hidden");
[Link]("hidden");
[Link]("hidden");
[Link] = "";
const randomQuestions = [Link](() => 0.5 - [Link]()).slice(0, 5);
[Link]((q, i) => {
const div = [Link]("div");
[Link] = "question";
[Link] = `
<label>${i + 1}. ${q}</label>
<textarea name="q${i + 1}" required></textarea>
`;
[Link](div);
});
}
[Link]("submitSurvey").addEventListener("click", () => {
const formData = new FormData(surveyForm);
const answers = {};
[Link]((value, key) => (answers[key] = value));

const username = [Link]("currentUser");


const user = [Link]([Link](username));

[Link](answers);
[Link](username, [Link](user));

alert("Survey submitted!");
showResponses();
});
function showResponses() {
[Link]("hidden");
[Link]("hidden");
[Link] = "";
const username = [Link]("currentUser");
const user = [Link]([Link](username));
[Link]((resp, idx) => {
const div = [Link]("div");
[Link] = "response-card";
[Link] = `<h4>Response ${idx + 1}</h4><ul>${
[Link](resp)
.map(a => `<li>${a}</li>`)
.join("")
}</ul>`;
[Link](div);
});
}

[Link]("logoutBtn").addEventListener("click", () => {
[Link]("currentUser");
[Link]("hidden");
4
56
[Link]("hidden");
})

Output:

Result:

Thus the Online Survey Application where a collections of questions is available and Users are
asked to answer any Random 5 Questions is Completed Successfully and Output got Verified.
4
57
EX No:10 DEVELOP A WEB APPLICATION FOR BOOKING MOVIE TICKETS
ON ONLINE
Date:

Aim:
To Develop a simple web application for booking movie tickets on online
Procedure:
1. Create [Link] for movie selection and seat layout.
2. Design seat styles and layout using [Link].
3. Use JavaScript to handle seat selection and total cost calculation.
4. Store selected seats and movie details in localStorage.
5. Auto-load previous selections and update UI dynamically.
Program:
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Booker</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="movie-container">
<label>Pick a movie:</label>
<select id="movie">
<option value="10">Avengers: Endgame ($10)</option>
<option value="12">Oppenheimer ($12)</option>
<option value="9">Dune: Part Two ($9)</option>
<option value="8">The Joker ($8)</option>
</select>
</div>

4
58
<ul class="showcase">
<li><div class="seat"></div><small>Available</small></li>
<li><div class="seat selected"></div><small>Selected</small></li>
<li><div class="seat occupied"></div><small>Occupied</small></li>
</ul>
<div class="container">
<div class="screen"></div>
<!-- 6 rows x 8 seats -->
<div class="row">
<div class="seat"></div><div class="seat"></div><div class="seat"></div><div
class="seat"></div>
<div class="seat"></div><div class="seat"></div><div class="seat"></div><div
class="seat"></div>
</div>
<div class="row">
<div class="seat"></div><div class="seat"></div><div class="seat occupied"></div><div
class="seat"></div>
<div class="seat"></div><div class="seat occupied"></div><div class="seat"></div><div
class="seat"></div> </div>
<div class="row">
<div class="seat"></div><div class="seat occupied"></div><div class="seat"></div><div
class="seat"></div>
<div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat
occupied"></div> </div>
<div class="row">
<div class="seat"></div><div class="seat"></div><div class="seat"></div><div
class="seat"></div>
<div class="seat occupied"></div><div class="seat"></div><div class="seat"></div><div
class="seat"></div>
</div></div>
<p class="text">You have selected <span id="count">0</span> seats for a price of $<span
id="total">0</span>.</p>
<script src="[Link]"></script></body>
</html>

4
59
[Link]:
@import url('[Link]
:root {
--bg: #242333;
--seat: #444451;
--selected: #6feaf6;
--occupied: #fff;}
body {
font-family: 'Lato', sans-serif;
background: var(--bg);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
min-height: 100vh;}
.movie-container { margin: 20px; }
select { padding: 5px 15px; border-radius: 5px; }
.showcase {
display: flex; gap: 10px; margin-bottom: 15px;
background: rgba(0,0,0,0.2); padding: 10px 20px; border-radius: 5px;}
.showcase .seat { height: 15px; width: 18px; }
.showcase .selected { background: var(--selected); }
.showcase .occupied { background: var(--occupied); }
.container { perspective: 1000px; margin-bottom: 20px; }
.screen {
background: #fff; height: 60px; width: 100%; margin: 15px 0;
transform: rotateX(-45deg); box-shadow: 0 3px 10px rgba(255,255,255,0.7);}
.row { display: flex; }
.seat {
height: 14px; width: 18px; margin: 3px; background: var(--seat);
4
60
border-top-left-radius: 10px; border-top-right-radius: 10px;
transition: transform 0.2s;}
.[Link] { background: var(--selected); }
.[Link] { background: var(--occupied); }
.seat:not(.occupied):hover { transform: scale(1.2); cursor: pointer; }
.text span { color: var(--selected); font-weight: 700; }

[Link]:
const container = [Link]('.container');
const seats = [Link]('.row .seat:not(.occupied)');
const count = [Link]('count');
const total = [Link]('total');
const movieSelect = [Link]('movie');
function updateCount() {
const selected = [Link]('.row .[Link]');
const seatIndex = [...selected].map(seat => [...seats].indexOf(seat));
[Link]('selectedSeats', [Link](seatIndex));
[Link] = [Link];
[Link] = [Link] * +[Link];}
function loadUI() {
const selectedSeats = [Link]([Link]('selectedSeats')) || [];
[Link](i => seats[i].[Link]('selected'));
[Link] = [Link]('selectedMovieIndex') || 0;
updateCount();}
[Link] = e => {
[Link]('selectedMovieIndex', [Link]);
updateCount();};
[Link] = e => {
if ([Link]('seat') && ![Link]('occupied')) {
[Link]('selected');
updateCount(); }};
loadUI();
4
61
Output:

Result:
A simple web application for booking movie tickets on online is created successful and the output
was verified.

4
62

You might also like