GNANAMANI COLLEGE OF TECHNOLOGY,

NAMAKKAL - 637 018

DEPAR

DEPARTMENT OF INFORMATION TECHNOLOGY

INSTITUTE

VISION

Emerging as a technical institution of high standard and excellence to produce quality

Engineers, Researchers, Administrators and Entrepreneurs with ethical and moral values to
contribute the sustainable development of the society.

MISSION

We facilitate our students

MI1: To have in-depth domain knowledge with analytical and practical skills in cutting edge
technologies by imparting quality technical education.

MI2: To be industry ready and multi-skilled personalities to transfer technology to industries and
rural areas by creating interests among students in Research and Development and
Entrepreneurship.

DEPARTMENT

VISION

To be the department that imparts professional computing training and makes competent
engineer to work in the emerging areas of information technology field.

MISSION

 To prepare competent engineers and adapt to the dynamic needs of industries.

 To pave way to the enrichment of knowledge and skills using latest technologies in
the diverse domain of information technology.
 Inculcate strong ethical values and professionalism to serve society while
concurrently updating knowledge and skills through life-long learning.




GNANAMANI COLLEGE OF TECHNOLOGY,

NAMAKKAL - 637 018

DEPAR
DEPARTMENT OF INFORMATION TECHNOLOGY

PROGRAM EDUCATIONAL OBJECTIVES(PEOs)

Programme Educational Objectives of B.Tech (Information Technology) are listed below:

 PEO-1: Be proficient in utilizing the fundamental knowledge of various streams

in engineering and technology.
 PEO-2: Think logically and to pursue lifelong learning to understand technical issues related
to computing systems and to provide optimal solutions.
 PEO-3: Design and develop hardware and software system by understanding the
importance of social, business and environmental needs in the social contexts.

PROGRAM SPECIFIC OUTCOMES(PSOs)

Engineering Graduates will be able to:

 PSO1: Apply the mathematical and the computing knowledge to identify and provide
solutions for computing problems.

 PSO2: Design and develop computer programs in the areas related to algorithms,
networking, web design and data analytics of varying complexity.

PROGRAM OUTCOMES(PO)

Engineering Graduates will be able to:

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering problems.

2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and engineering sciences.

3. Design/development of solutions: Design solutions for complex engineering problems and

design system components or processes that meet the specified needs with appropriate consideration
for the public health and safety, and the cultural, societal, and environmental considerations

4. Conduct investigations of complex problems: Use research-based knowledge and research

methods including design of experiments, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.

5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with
an understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional engineering

solutions in societal and environmental contexts, and demonstrate the knowledge of, and need for
sustainable development.

8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.

9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and receive clear
instructions.

11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and leader
in a team, to manage projects and in multidisciplinary environments.

12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
EX.NO:1 PORTFOLIO WEBSITE
DATE:
AIM:

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

1. Create a project in a visual studio.

2. Create HTML file for the Portfolio Website project.
3. Use anchor tags for home, about, resume, portfolio and contact.
4. Use Download Resume button is used to download and display the resume.
5. Then create CSS file for the Portfolio Website project.
6. Finally, executes the project and displays the website.

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>Portfolio Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<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>Raja.S</h1>
<h2>Student of B.Tech Information Technology</h2>
</section>
<section id="about">
<h2>About Me</h2>
<p>I am pursuing III-IT in Gnanamani College of Technology. </p>
<p>I completed my HSC in ABC Higher Secondary School. </p>
<p>I completed my SSLC in ABC Higher Secondary School. </p>
</section>
<section id="resume">
<h2>Resume</h2>
<p>I got 1st prize for paper presentation in XYZ College. </p>
<p>I know web designing. </p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<div class="project">
<h3>Food Delivery Website</h3>
<p>It helps us to order foods in online. </p>
<h3>Micro Blogging Application</h3>
<p>It helps us to put a blog. </p>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can reach me at :</p>
<ul>
<li>Email: [email protected]</li>
<li>Phone: 9876543210</li>
</ul>
</section>
</body>
</html>

styles.css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 10px;
}
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 {
margin-bottom: 30px;
}
.project h3 {
margin-bottom: 10px;
}

OUTPUT:
RESULT:
Thus the portfolio website for a potential recruiter was created and executed successfully.
EX.NO :2 TO-DO LIST

DATE:
AIM:
To 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 a project in a visual studio.
2. Create HTML file for the TO-DO list project.
3. First create a login page.
4. Then add a new tasks for TO-DO list.
5. Then create CSS file for the TO-DO list project.
6. Then add Java Script file for the TO-DO list project.
7. Finally, executes the project and displays the website.

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>TO-DO List</title>
</head>
<body>
<div class="container">
<h1>TO-DO List</h1>
<form id="loginForm">
<h2>Login</h2>
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password"
required>
<button type="submit">Login</button>
</form>
<form id="todoForm" class="hidden">
<h2>Add New Task</h2>
<input type="text" id="task" placeholder="Task" required>
<button type="submit">Add Task</button>
</form>
<ul id="todoList" class="hidden">
</ul>
<button id="logoutButton" class="hidden">Logout</button>
</div>
<script src="script.js"></script>
</body>
</html>

styles.css
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
h1{
text-align: center;
}
form h2{
margin-top: 20px;
}
form input[type="text"],
form input[type="password"] {
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;
 }
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
.hidden {
display: none;
}

script.js

document.addEventListener('DOMContentLoaded',function(){
const loginForm = document.getElementById('loginForm');
const todoForm = document.getElementById('todoForm');
const todoList = document.getElementById('todoList');
const logoutButton = document.getElementById('logoutButton');
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
todoForm.classList.remove('hidden');
todoList.classList.remove('hidden');
logoutButton.classList.remove('hidden');
loginForm.classList.add('hidden');
});
todoForm.addEventListener('submit',function(e){
e.preventDefault();
const task = document.getElementById('task').value;
const newTask = document.createElement('li');
newTask.textContent = task;
todoList.appendChild(newTask);
document.getElementById('task').value = '';
});
logoutButton.addEventListener('click',function(){
todoForm.classList.add('hidden');
todoList.classList.add('hidden');
logoutButton.classList.add('hidden');
loginForm.classList.remove('hidden');
});
});
OUTPUT:
RESULT:
Thus the TO-DO list of web application, users can login and manage their TO-DO items was
created and executed successfully.
EX.NO:3 MICRO BLOGGING APPLICATION
DATE:
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:
1. Create a project in a visual studio.
2. Create HTML file for the micro blogging application.
3. Post your content in the textarea.
4. Posted content will be dynamically displayed below.
5. Then create CSS file for the micro blogging application.
6. Then add JavaScript file for the micro blogging application.
7. Finally, executes the project and displays the page.

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>Microblogging Application</title>
</head>
<body>
<div class="container">
<h1>Microblogging Application</h1>
<form id="postForm">
<textarea id="postContent" placeholder="What's on your mind?"></textarea>
<button type="submit">Post</button>
</form>
<div id="feed">
</div>
</div>
<script src="script.js"></script>
</body>
</html>

styles.css

body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
 margin: 0 auto;
padding: 20px;
}
h1{
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;
}

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;
const newPost = document.createElement('div');
newPost.classList.add('post');
newPost.textContent = content;
feed.appendChild(newPost);
postContent.value = '';
});
});
OUTPUT:

RESULT:
Thus the micro blogging application was created and executed successfully.
EX.NO:4 FOOD DELIVERY WEBSITE

DATE:
AIM:
To create a food delivery website where users can order food from a particular
restaurant listed in the website.
PROCEDURE:
1. Create a project in a visual studio.
2. Create HTML file for the food delivery website.
3. Then create CSS file for the food delivery website.
4. Then add JavaScript file for the food delivery website.
5. While executing the project, choose the restaurant.
6. Then menu list will be shown, select the items in the menu.
7. Finally, place the order in the website.
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>Food Delivery Website</title>
</head>
<body>
<header>
<h1>Food Delivery Website</h1>
</header>
<main>
<div class="restaurants">
<h2>Choose a Restaurant</h2>
<ul id="restaurantList">
</ul>
</div>
<div class="menu" id="menuContainer">
</div>
<div class="cart">
<h2>Cart</h2>
<ul id="cartItems">
</ul>
<button id="checkoutButton">Checkout</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 {
display: flex;
justify-content: space-between;
padding: 20px;
}
.restaurants {
flex-basis: 30%;
}
.menu {
flex-basis: 15%;
}
h1,h2 {
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
.restaurant-item {
padding: 10px;
background-color: #f5f5f5;
margin-bottom: 10px;
cursor: pointer;
}
.menu-item {
padding: 10px;
background-color: #f5f5f5;
margin-bottom: 10px;
}
.cart-item {
padding: 10px;
background-color: #f5f5f5;
margin-bottom: 10px;
}
#checkoutButton {
display: block;
width: 100%
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}

script.js
document.addEventListener('DOMContentLoaded',function(){
const restaurantList = document.getElementById('restaurantList');
const menuContainer = document.getElementById('menuContainer');
const cartItems = document.getElementById('cartItems');
const checkoutButton = document.getElementById('checkoutButton');
const restaurants = [
{name: 'Adyar Ananda Bhavan', menu: ['Idly', 'Pongal', 'Chappathi', 'Dhosai']},
{name: 'Star Biriyani', menu: ['Chicken Biriyani', 'Mutton Biriyani', 'Chicken Fry', 'Mutton Fry']},
{name: 'Meat And Eat', menu: ['Chicken Pizza', 'Mushroom Pizza', 'Veg Pizza','Burger']},
];
restaurants.forEach((restaurant,index)=>{
const restaurantItem = document.createElement('li');
restaurantItem.classList.add('restaurant-item');
restaurantItem.textContent = restaurant.name;
restaurantItem.addEventListener('click',function(){
menuContainer.innerHTML = '';
cartItems.innerHTML = '';
restaurant.menu.forEach(menuItem=>{
const menuItemElement = document.createElement('div');
menuItemElement.classList.add('menu-item');
menuItemElement.textContent = menuItem;
menuItemElement.addEventListener('click',function(){
const cartItemElement = document.createElement('li');
cartItemElement.classList.add('cart-item');
cartItemElement.textContent = menuItem;
cartItems.appendChild(cartItemElement);
});
menuContainer.appendChild(menuItemElement);
});
});
restaurantList.appendChild(restaurantItem);
});
checkoutButton.addEventListener('click',function(){
alert ('Order placed successfully!');
cartItems.innerHTML = '';
});
});
OUTPUT:
RESULT:
Thus the food delivery website was created and executed successfully.
EX.NO:5 CLASSIFIED WEB APPLICATION
DATE:

AIM:
To develop a classified web applications to buy and sell used products.
PROCEDURE:
1. Create a project in a visual studio.
2. Create HTML file for the classified web application.
3. Then create CSS file for the classified web application.
4. Then add JavaScript file for the classified web application.
5. While executing the project, create ad to sell used products.
6. Finally, create ad in the classified website.

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">
</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{
margin: 0;
}
.create-ad input[type="text"],
.create-ad textarea {
display: block;
width: 95%;
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 classified web application was created and executed successfully.
EX.NO:6 LEAVE MANAGEMENT SYSTEM
DATE:
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, also view the available number of
days.
PROCEDURE:
1. Create a project in a visual studio.
2. Create HTML file for the leave management system.
3. Then create CSS file for the leave management system.
4. Then add JavaScript file for the leave management system.
5. In this application, users can apply the casual leave or medical leave.
6. Finally, available number of days also displayed.

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>Leave Management System</title>
</head>
<body>
<header>
<h1>Leave Management System</h1>
</header>
<main>
<div class="leave-form">
<h2>Leave Application</h2>
<form id="leaveForm">
<select id="leaveType">
<option value="casual">Casual Leave</option>
<option value="medical">Medical Leave</option>
</select><br></br>
<input type="number" id="leaveDays" placeholder="No. of days" required>
<button type="submit">Apply Leave</button>
</form>
</div>
<div class="leave-balance">
<h2>Leave Balance</h2>
<div id="leaveBalance">
</div>
</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 {
display: flex;
justify-content: space-between;
padding: 20px;
}
h1, h2 {
margin:0;
}
.leave-form input[type="number"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.leave-form select,
.leave-form input[type="number"],
.leave-form button {
width: 100%;
}
.leave-form button {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}
.leave-balance {
flex-basis: 40%;
}
#leaveBalance {
padding: 10px;
 background-color: #f5f5f5;
}

script.js

document.addEventListener('DOMContentLoaded', function() {
const leaveForm = document.getElementById('leaveForm');
const leaveType = document.getElementById('leaveType');
const leaveDays = document.getElementById('leaveDays');
const leaveBalance = document.getElementById('leaveBalance');
const leaveBalanceData = {
casual: 10,
medical: 5
};
function displayLeaveBalance() {
const selectedLeaveType = leaveType.value;
leaveBalance.textContent = `Available ${selectedLeaveType} leaves:
${leaveBalanceData[selectedLeaveType]}`;
}
function updateLeaveBalance() {
const selectedLeaveType = leaveType.value;
const days = parseInt(leaveDays.value);
leaveBalanceData[selectedLeaveType] -= days;
displayLeaveBalance();
}
leaveForm.addEventListener('submit', function(e) {
e.preventDefault();
updateLeaveBalance();
leaveDays.value = '';
});
displayLeaveBalance();
});
OUTPUT:

RESULT:
Thus the leave management system for an organization was created and executed
successfully.
EX NO:7 PROJECT MANAGEMENT DASHBOARD

DATE:
AIM:
To develop a simple dashboard for project management where the status of various
tasks are available. New tasks can be added and the status of existing tasks can be changed
among pending, inprogress or completed..

PROCEDURE:
1. Create a project in a visual studio.
2. Create HTML file for the project management dashboard.
3. Then create CSS file for the project management dashboard.
4. Then add JavaScript file for the project management dashboard.
5. In this application, dashboard can show the status of the tasks.
6. Finally, display the status of existing tasks can be changed using various colors.

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>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">
</ul>
</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 {
display: flex;
justify-content: space-between;
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;
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;
}
script.js
document.addEventListener('DOMContentLoaded', function() {
const taskForm = document.getElementById('taskForm');
const taskList = document.getElementById('taskList');
taskForm .addEventListener('submit', function(e) {
e.preventDefault();
const taskName = document.getElementById('taskName').value;
const newTask = document.createElement('li');
newTask.classList.add('task','pending');
newTask.textContent = taskName;
newTask.addEventListener('click', function() {
const currentStatus = newTask.classList.item(1);
if(currentStatus==='pending') {
newTask.classList.remove('pending');
newTask.classList.add('inprogress');
} else if(currentStatus==='inprogress') {
newTask.classList.remove('inprogress');
newTask.classList.add('completed');
} else {
newTask.classList.remove('completed');
newTask.classList.add('pending');
}
});
taskList.appendChild(newTask);
document.getElementById('taskName').value = '';
});
});
OUTPUT:

RESULT
Thus the project management dashboard application was created and executed
successfully.
 EX.NO:8 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 five questions.
PROCEDURE:
1. Create a project in a visual studio.
2. Create HTML file for an online survey application.
3. Then create CSS file for an online survey application.
4. Then add JavaScript file for an online survey application.
5. In this application, random question will be displayed the users can answer that questions.
6. Finally, the users can submit the answer.

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="submit">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 {
width: 90%;
height: 150px;
padding: 10px;
margin-bottom: 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('submit');
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 online survey application was created and executed successfully.