Full Stack LAB
Uploaded by
jvishal2k25Full Stack LAB
Uploaded by
jvishal2k25[Link] M.
JAGANATHAN ENGINEERING COLLEGE
(AUTONOMOUS)
CHENNIMALAI, ERODE - 638 112
Name :
Branch : MCA
Semester : II
Register No :
Certified that this is the bonafide record of work done by the above student in MC25203
FULL STACK WEB DEVLOPMENT LABORATORY during the year 2025-2026.
Faculty In-charge Head of the Department
Submitted for the University Practical Examination heldon
Internal Examiner External Examiner
1
INDEX
Page Mark Sign
[Link] Date Title No
1 Basic Form Validation
Event Management System (Users& Organizers
2 Platform)
3 Personal Finance Tracker
4 Learning Management System
5 Function and Class Component
6 Appointment Booking System
7 Online Job Portal System
8 Online Complaint / Support Ticket System
9 Crud Operations Using Mysql And [Link]
10 Online Donation / Fund Raising System
[Link]:
BASIC FORM VALIDATION
DATE:
AIM:
To design a web form using HTML and validate user inputs such as name, email, address, and
phone number using JavaScript, ensuring that all required fields are properly filled before form
submission.
ALGORITHM:
1. Start the program.
2. Create HTML structure using <!DOCTYPE html>, <html>, <head>, and <body> tags.
3. Set page title and styling
Add CSS for background, form box, inputs, and button.
4. Design the form layout
Create a centered form box using CSS flexbox.
5. Add input fields
Name field
Email field
Address field
Phone number field
6. Create submit button
Add a styled submit button using CSS.
7. Attach JavaScript validation function
Use onsubmit="return validateForm()" in form tag.
8. Fetch input values in JavaScript
Get name, email, address, and phone values using [Link].
9. Apply validation rules
Check empty fields
Validate email format (@)
Check phone number length (10 digits) and numeric value
10. Display alert messages and end program
• Show error alerts for invalid input
• Show success alert with entered details if all inputs are valid
• Return true or false accordingly
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #74ebd5, #ACB6E5);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-box
{ background:
white; padding:
25px; border-radius:
10px; width: 320px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
text-align: center;
}
input {
width: 90%;
padding: 8px;
margin: 8px 0;
}
.btn {
background: #1e3c72;
color: white;
border: none;
padding: 10px;
width: 100%;
border-radius: 5px;
cursor: pointer;
}
.btn:hover
{ background:
#0f2447;
}
</style>
<script>
function validateForm() {
let name = [Link]["myForm"]["name"].[Link]();
let email = [Link]["myForm"]["email"].[Link]();
let address = [Link]["myForm"]["address"].[Link]();
let phone = [Link]["myForm"]["phone"].[Link]();
// Name validation
if (name === "") {
alert(" Name must be filled out");
return false;
}
// Email validation
if (email === "" || ![Link]("@"))
{ alert(" Enter a valid email address");
return false;
}
// Address validation
if (address === "") {
alert(" Address cannot be empty");
return false;
}
// Phone validation (10 digits)
if (phone === "" || [Link] !== 10 || isNaN(phone))
{ alert(" Enter a valid 10-digit phone number");
return false;
}
// Success message
alert(
"Form Submitted Successfully!\n\n" +
"Name: " + name + "\n" +
"Email: " + email + "\n" +
"Address: " + address + "\n" +
"Phone: " + phone
);
return true;
}
</script>
</head>
<body>
<div class="form-box">
<h2>Advanced Form Validation</h2>
<form name="myForm" onsubmit="return validateForm()">
<input type="text" name="name" placeholder="Enter your name">
<input type="email" name="email" placeholder="Enter your email">
<input type="text" name="address" placeholder="Enter your address">
<input type="text" name="phone" placeholder="Enter phone number">
<button type="submit" class="btn">Submit</button>
</form>
</div>
</body>
</html>
OUTPUT :
RESULT :
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]:
EVENT MANAGEMENT SYSTEM
DATE: (USERS & ORGANIZERS PLATFORM)
AIM:
To develop a simple Event Management System using HTML, CSS, and JavaScript that
allows users to create events, view available events, and register for events using local
storage.
ALGORITHM:
1. Start the program.
2. Design the webpage using HTML:
o Add a heading for the Event Management Platform.
o Create input fields for event name and event date.
o Add a button to create events.
o Create a section to display the list of events.
3. Style the webpage using CSS:
o Set font style and background color.
o Design containers (boxes) for better layout.
o Style buttons and inputs for user interaction.
4. Initialize an empty array events in JavaScript:
o Retrieve existing events from local storage if available.
5. Create addEvent() function:
o Get event name and date from input fields.
o Check if inputs are empty; show alert if true.
o Add event object (name, date, registered count) to array.
o Store updated data in local storage.
o Call display function.
6. Create registerEvent(index) function:
o Increase registration count for selected event.
o Update local storage.
o Refresh event display.
7. Create displayEvents() function:
o Clear previous event list.
o Loop through events array.
o Display each event with name, date, and registration count.
o Add register button for each event.
8. Call displayEvents() when page loads to show stored events.
9. Run the program in a browser.
10. Verify that:
Events can be added.
Events are displayed correctly.
Users can register for events.
11. Stop the program.
PROGRAM:
HTML ([Link])
<!DOCTYPE html>
<html>
<head>
<title>Event Management System</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Event Management Platform</h1>
<!-- Organizer Section -->
<div class="box">
<h2>Create Event (Organizer)</h2>
<input type="text" id="eventName" placeholder="Event Name">
<input type="date" id="eventDate">
<button onclick="addEvent()">Add Event</button>
</div>
<!-- Event List -->
<div class="box">
<h2>Available Events</h2>
<ul id="eventList"></ul>
</div>
<script src="[Link]"></script>
</body>
</html>
CSS ([Link])
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
}
h1 {
color: #333;
}
.box {
background: white;
padding: 20px;
margin: 20px auto;
width: 300px;
border-radius: 5px;
}
input {
width: 90%;
padding: 8px;
margin: 5px;
}
button {
padding: 8px 15px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
li {
list-style: none;
margin: 10px 0;
}
JavaScript ([Link])
let events = [Link]([Link]("events")) || [];
function addEvent() {
let name = [Link]("eventName").value;
let date = [Link]("eventDate").value;
if (name === "" || date === "") {
alert("Please fill all fields");
return;
}
[Link]({ name, date, registered: 0 });
[Link]("events", [Link](events));
displayEvents();
}
function registerEvent(index)
{ events[index].registered++;
[Link]("events", [Link](events));
displayEvents();
}
function displayEvents() {
let list = [Link]("eventList");
[Link] = "";
[Link]((event, index) =>
{ [Link] += `
<li>
<strong>${[Link]}</strong><br>
Date: ${[Link]}<br>
Registered: ${[Link]}<br>
<button onclick="registerEvent(${index})">Register</button>
</li>
`;
});
}
displayEvents();
OUTPUT:
RESULT:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]: PERSONAL FINANCE TRACKER
DATE:
AIM:
To develop a Personal Finance Tracker using HTML, CSS, and JavaScript that allows users
to record income and expenses, view transaction details, calculate total balance, and visualize
data using charts.
ALGORITHM:
1. Start the program.
2. Design the webpage using HTML:
o Create a main container with a heading.
o Add a form to input transaction details (type, amount, category, description).
o Create a table to display transaction history.
o Add a summary section to show total income, expense, and balance.
o Add canvas elements for charts.
3. Style the webpage using CSS:
o Apply background color and font styling.
o Design form, table, and container layout.
o Style buttons and inputs for better user experience.
4. Initialize an empty array transactions in JavaScript to store data.
5. Add an event listener to the form:
o Prevent default form submission.
o Retrieve input values (type, amount, category, description).
o Get current date.
o Store all values as an object in the transactions array.
6. Create updateTable() function:
o Clear existing table data.
o Loop through transactions array.
o Insert each transaction into the table dynamically.
7. Create updateSummary() function:
o Calculate total income using filter and reduce methods.
o Calculate total expense similarly.
o Compute balance (income − expense).
o Display results in the summary section.
8. Create updateCharts() function:
o Generate income vs expense bar chart.
o Group expenses by category.
o Display category-wise data using pie chart.
9. Call all update functions after adding each transaction.
10. Reset the form after submission.
11. Run the program in a browser.
12. Verify that:
Transactions are added correctly.
Table updates dynamically.
Summary calculations are accurate.
Charts display proper data visualization.
13. Stop the program.
PROGRAM:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Finance Tracker</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]
</head>
<body>
<div class="container">
<h1>Personal Finance Tracker</h1>
<!-- Form to add transaction -->
<div class="form-container">
<h2>Add Transaction</h2>
<form id="transactionForm">
<label>Type:</label>
<select id="type">
<option value="Income">Income</option>
<option value="Expense">Expense</option>
</select>
<label>Amount:</label>
<input type="number" id="amount" required>
<label>Category:</label>
<input type="text" id="category" required>
<label>Description (optional):</label>
<input type="text" id="description">
<button type="submit">Add Transaction</button>
</form>
</div>
<!-- Transactions table -->
<div class="transactions">
<h2>Transactions</h2>
<table id="transactionTable">
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Category</th>
<th>Amount</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- Transactions will appear here -->
</tbody>
</table>
</div>
<!-- Summary -->
<div class="summary">
<h2>Summary</h2>
<p>Total Income: ₹<span id="totalIncome">0</span></p>
<p>Total Expense: ₹<span id="totalExpense">0</span></p>
<p>Balance: ₹<span id="balance">0</span></p>
</div>
<!-- Charts -->
<div class="charts">
<h2>Charts</h2>
<canvas id="incomeExpenseChart"></canvas>
<canvas id="categoryChart"></canvas>
</div>
</div><script src="[Link]"></script>
</body>
</html>
[Link]
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
container {
max-width: 900px;
margin: 20px auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;color: #333;
form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
form label {
margin-top: 10px;
margin-bottom: 5px;
form input, form select, form button
{ padding: 8px;
font-size: 16px;
}
form button
{ margin-top:
15px;
background-color: #4CAF50;
color: white;
cursor: pointer;
border-radius: 4px;
form button:hover
{ background-color:
#45a049;
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
table, th, td {
border: 1px solid #ccc;
th, td {
padding: 8px;
text-align: center;
}
.summary p {
font-size: 18px;
.charts {
margin-top: 20px;
}
canvas {
max-width: 100%;
margin-top: 20px;
}
[Link]
let transactions = [];
// Handle form submission
[Link]('transactionForm').addEventListener('submit', function(e) {
[Link]();
const type = [Link]('type').value;
const amount = parseFloat([Link]('amount').value);
const category = [Link]('category').value;
const description = [Link]('description').value;
const date = new Date().toLocaleDateString();
const transaction = { type, amount, category, description, date };
[Link](transaction);
updateTable();
updateSummary();
updateCharts();
// Reset form
[Link]();
});
// Update transaction table
function updateTable() {
const tbody = [Link]('#transactionTable tbody');
[Link] = '';
[Link](t => {
const row = [Link]('tr');
[Link] = `
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>₹${[Link](2)}</td>
<td>${[Link]}</td>
`;
[Link](row);
});
// Update summary
function updateSummary() {
const totalIncome = transactions
.filter(t => [Link] === "Income")
.reduce((sum, t) => sum + [Link], 0);
const totalExpense = transactions
.filter(t => [Link] === "Expense")
.reduce((sum, t) => sum + [Link], 0);
const balance = totalIncome - totalExpense;
[Link]('totalIncome').textContent = [Link](2);
[Link]('totalExpense').textContent = [Link](2);
[Link]('balance').textContent = [Link](2);
// Update charts
let incomeExpenseChart, categoryChart;
function updateCharts() {
const totalIncome = transactions
.filter(t => [Link] === "Income")
.reduce((sum, t) => sum + [Link], 0);
const totalExpense = transactions
.filter(t => [Link] === "Expense")
.reduce((sum, t) => sum + [Link], 0);
// Income vs Expense chart
const ctx1 = [Link]('incomeExpenseChart').getContext('2d');
if (incomeExpenseChart) [Link]();
incomeExpenseChart = new Chart(ctx1,
{ type: 'bar',
data: {
labels: ['Income', 'Expense'],
datasets: [{
label: 'Amount (₹)',
data: [totalIncome, totalExpense],
backgroundColor: ['green', 'red']
}]
},
options: { responsive: true }
});
// Category-wise Expense chart
const categories = {};
[Link](t => [Link] === "Expense").forEach(t =>
{ categories[[Link]] = (categories[[Link]] || 0) + [Link];
});
const ctx2 = [Link]('categoryChart').getContext('2d');
if (categoryChart) [Link]();
categoryChart = new Chart(ctx2,
{ type: 'pie',
data: {
labels: [Link](categories),
datasets: [{
data: [Link](categories),
backgroundColor: [
'#FF6384','#36A2EB','#FFCE56','#4BC0C0','#9966FF','#FF9F40'
}]
},
options: { responsive: true }
});
}
OUTPUT:
RESULT:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]: LEARNING MANAGEMENT SYSTEM
DATE:
AIM:
To design and develop a simple Learning Management System (LMS) using HTML, CSS,
Bootstrap, and JavaScript that allows users to view courses, enroll in them, and attempt a
basic quiz with instant feedback.
ALGORITHM:
1. Start the program.
2. Design the structure using HTML:
o Create a responsive navigation bar using Bootstrap.
o Add a hero section with heading and description.
o Create a courses section with multiple course cards and enroll buttons.
o Add a quiz section with a question and answer buttons.
o Include a footer section.
3. Apply styling using CSS:
o Set global font and layout.
o Style hero section with gradient background.
o Use Flexbox to align quiz elements properly.
o Apply spacing using box model (padding and margin).
4. Use Bootstrap for responsiveness:
o Implement grid system for course cards.
o Ensure layout adjusts for different screen sizes using media queries.
5. Add functionality using JavaScript:
o Create a function checkAnswer(isCorrect).
o Get the result element from the DOM.
o Display “Correct Answer” if true.
o Display “Wrong Answer” if false.
o Change text color accordingly (green/red).
6. Link HTML with CSS and JavaScript files.
7. Run the program in a web browser.
8. Verify that:
o Navigation bar works properly.
o Courses are displayed in cards.
o Quiz buttons show correct feedback.
o Layout is responsive on different devices.
9. Stop the program.
PROGRAM:
1. [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LMS - Learning Management System</title>
<!-- Bootstrap CSS -->
<link href="[Link]
rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">MyLMS</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="hero text-center text-white">
<h1>Learn Anytime, Anywhere</h1>
<p>Enroll in courses, watch lessons, and take quizzes</p>
</header>
<!-- Courses Section -->
<section class="container my-5">
<h2 class="text-center mb-4">Available Courses</h2>
<div class="row g-4">
<!-- Course Card -->
<div class="col-md-4">
<div class="card h-100 shadow">
<div class="card-body">
<h5 class="card-title">Web Development</h5>
<p class="card-text">HTML, CSS, Bootstrap & JavaScript</p>
<button class="btn btn-success w-100">Enroll</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow">
<div class="card-body">
<h5 class="card-title">Python Programming</h5>
<p class="card-text">Basics to advanced Python</p>
<button class="btn btn-success w-100">Enroll</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow">
<div class="card-body">
<h5 class="card-title">Data Structures</h5>
<p class="card-text">Arrays, Stacks, Queues, Trees</p>
<button class="btn btn-success w-100">Enroll</button>
</div>
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section class="quiz-section">
<h2 class="text-center">Quick Quiz</h2>
<div class="quiz-box">
<p>1. What does CSS stand for?</p>
<button onclick="checkAnswer(true)">Cascading Style Sheets</button>
<button onclick="checkAnswer(false)">Creative Style System</button>
<p id="result"></p>
</div>
</section>
<!-- Footer -->
<footer class="text-center text-white bg-dark p-3">
© 2026 MyLMS | Responsive Bootstrap Project
</footer>
<script
src="[Link]
<script src="[Link]"></script>
</body>
</html>
2. [Link]
/* Global Styles */
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
}
/* Hero Section */
.hero {
background: linear-gradient(to right, #0d6efd, #6610f2);
padding: 60px 20px;
/* Quiz Section using Flexbox */
.quiz-section {
background-color: #f8f9fa;
padding: 40px 20px;
.quiz-box {
max-width: 500px;
margin: auto;
padding: 20px;
background: white;
border-radius: 8px;
/* Flexbox */
display: flex;
flex-direction: column;
gap: 10px;
}
/* Buttons */
.quiz-box button
{ padding:
10px; border:
none;
background-color: #0d6efd;
color: white;
border-radius: 5px;
/* Box Model */
.card {
padding: 10px;
margin: 5px;
/* Responsive Design - Media Queries */
@media (min-width: 768px) {
.hero {
padding: 100px;
.quiz-box {
font-size: 18px;
}
}
3 [Link]
function checkAnswer(isCorrect) {
const result = [Link]("result");
if (isCorrect) {
[Link] = "Correct Answer!";
[Link] = "green";
} else {
[Link] = "Wrong Answer. Try again!";
[Link] = "red";
OUTPUT:
RESULT:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]:
FUNCTION AND CLASS COMPONENT
DATE:
AIM:
To create a ReactJS application using both Function Component and Class Component for
displaying employee information and understanding component-based architecture.
ALGORITHM:
1. Start the program.
2. Import React and Component from the React library.
3. Create a Function Component named EmployeeFunction:
o Use a JavaScript function.
o Return JSX to display employee details like name, designation, and department.
4. Create a Class Component named EmployeeClass:
o Extend it from [Link].
o Use the render() method to return JSX.
o Display employee details inside it.
5. Create the main component App:
o Add headings such as “Full Stack Web Development” and topic name.
6. Include both components inside App:
o Call <EmployeeFunction />
o Call <EmployeeClass />
7. Add simple descriptive text explaining that:
o Function components are simple and easy to use.
o Class components use lifecycle methods and render function.
8. Apply basic styling using center alignment.
9. Export the App component.
10. Run the application to display output in the browser.
11. Stop the program.
PROGRAM:
import React, { Component } from "react";
// Function Component
function EmployeeFunction() {
return (
<div>
<h2>Function Component</h2>
<p>Name: Ramesh</p>
<p>Designation: Web Developer</p>
<p>Department: IT</p>
<hr />
</div>
);
}
// Class Component
class EmployeeClass extends Component {
render() {
return (
<div>
<h2>Class Component</h2>
<p>Name: Kavya</p>
<p>Designation: Software Engineer</p>
<p>Department: CSE</p>
<hr />
</div>
);
}
}
// Main App Component
function App() {
return (
<div style={{ textAlign: "center" }}>
<h1>FULL STACK WEB DEVELOPMENT</h1>
<h2>FUNCTION AND CLASS COMPONENT</h2>
<EmployeeFunction />
<EmployeeClass />
<p>React supports reusable components.</p>
<p>Function components are simple and easy.</p>
<p>Class components use render method and lifecycle methods.</p>
</div>
);
}
export default App;
OUTPUT :
RESULT :
Hence, the ReactJS application using Function Component and Class Component was
verified and executed successfully and the desired output was obtained.
[Link]:
APPOINTMENT BOOKING SYSTEM
DATE:
AIM:
To design and develop a simple Clinic Appointment System using HTML, CSS, and
Bootstrap that allows users to book appointments, view upcoming appointments, and manage
scheduling details through a responsive web interface.
ALGORITHM:
1. Start the program.
2. Create the basic structure using HTML:
o Define the document type and language.
o Add meta tags for character encoding and responsiveness.
o Set the title of the webpage.
3. Include Bootstrap CSS using CDN for styling and responsive design.
4. Design the Navigation Bar:
o Add a brand title for the system.
o Include menu options like Home, My Appointments, and Profile.
o Make the navbar responsive using Bootstrap classes.
5. Create the Appointment Booking Form:
o Add input fields for selecting doctor/professional.
o Add date and time selection fields.
o Include a textarea for entering the reason.
o Add a submit button for booking.
6. Design the Upcoming Appointments Section:
o Create a table to display appointment details.
o Include columns for date, time, professional, status, and actions.
o Add buttons for rescheduling and cancelling appointments.
7. Apply basic styling using CSS:
o Set background color and spacing.
o Customize container margins and text styles.
8. Include Bootstrap JavaScript and jQuery for interactive components.
9. Run the program in a web browser.
10. Verify that:
The layout is responsive on different devices.
The form accepts user input correctly.
Appointment details are displayed properly.
11. Stop the program.
PROGRAM:
<!DOCTYPE html>
<html lang="en"> // specifies the language as English.
<head>
<meta charset="UTF-8"> // ensures proper character encoding (supports all characters)
<meta name="viewport" content="width=device-width, initial-scale=1"> // makes the page
responsive on mobile devices.
<title>Clinic Appointment System</title>
<!-- Bootstrap CSS -->
//Loads Bootstrap CSS from a CDN (ready-made styles).
<link rel="stylesheet"
href="[Link]
<style>
body {
background-color: #f8f9fa;
.container {
margin-top: 30px; // Adds spacing at the top of containers.
.navbar-brand {
font-weight: bold; // Makes the navbar brand text bold.
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light"> // navbar-expand-lg means
expands on large screens //navbar-light bg-light means light-colored theme.
<a class="navbar-brand" href="#">Clinic Appointment System</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">My Appointments</a></li>
<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
</ul>
</div>
</nav>
<!-- Booking Form -->
<div class="container">
<h2>Book an Appointment</h2>
<form>
<div class="form-group">
<label for="professional">Choose a Professional</label>
<select class="form-control" id="professional">
<option>Dr. Smith</option>
<option>Dr. Johnson</option>
<option>Therapist Emily</option>
</select>
</div>
<div class="form-group">
<label for="appointmentDate">Date</label>
<input type="date" class="form-control" id="appointmentDate">
</div>
<div class="form-group">
<label for="appointmentTime">Time</label>
<input type="time" class="form-control" id="appointmentTime">
</div>
<div class="form-group">
<label for="reason">Reason for Appointment</label>
<textarea class="form-control" id="reason"></textarea>
</div>
<button type="submit" class="btn btn-primary">Book Appointment</button>
</form>
</div>
<!-- Upcoming Appointments -->
<div class="container mt-5">
<h3>Your Upcoming Appointments</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Professional</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026-04-10</td>
<td>10:00 AM</td>
<td>Dr. Smith</td>
<td>Confirmed</td>
<td>
<button class="btn btn-warning btn-sm">Reschedule</button>
<button class="btn btn-danger btn-sm">Cancel</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Bootstrap JS -->
<script src="[Link]
<script
src="[Link]
</body>
</html>
OUTPUT:
RESULT:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]:
ONLINE JOB PORTAL SYSTEM
DATE:
AIM
To develop a simple Job Portal using HTML and JavaScript to post jobs and apply for jobs.
ALGORITHM
1. Start
2. Initialize Variables
o Create an empty list jobs to store job details
o Create an empty list applications to store applicant details
o Set jobIdCounter = 1 to assign unique IDs for each job
3. Get Job Details
o Read job title and company name entered by the user
4. Validate Job Input
o Check whether job title and company name are empty
o If any field is empty, display an error message and stop this process
5. Create and Store Job
o Create a job object containing id, title, and company
o Add the job object to the jobs list
o Increment jobIdCounter by 1 for the next job
6. Display Job List
o Clear previous job display
o Traverse through jobs list
o Display each job with its title, company, and unique job ID
7. Get Application Details
o Read applicant name and job ID entered by the user
8. Validate Application
o Check if applicant name is empty
o Check if entered job ID exists in the jobs list
o If any condition is invalid, display an error message and stop this process
9. Store Application
o Create an application object with name and jobId
o Add the application to the applications list
10. Display Applications and End
Clear previous application display
Traverse through applications list
For each application, find the corresponding job using job ID
Display applicant name along with job title and company name
11. End
PROGRAM
HTML ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Portal</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input, button { margin: 5px 0; padding: 5px; }
.job-card { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
</style>
</head>
<body>
<h1>Job Portal</h1>
<h2>Post a Job</h2>
<input type="text" id="jobTitle" placeholder="Job Title">
<input type="text" id="jobCompany" placeholder="Company">
<button id="postJobBtn">Post Job</button>
<h2>Available Jobs</h2>
<div id="jobList"></div>
<h2>Apply for a Job</h2>
<input type="text" id="applicantName" placeholder="Your Name">
<input type="text" id="jobId" placeholder="Job ID to Apply">
<button id="applyJobBtn">Apply</button>
<h3>Applications</h3>
<div id="applications"></div>
<script src="[Link]"></script>
</body>
</html>
JavaScript ([Link])
// ES6: Using let, const, arrow functions, template literals
let jobs = [];
let applications = [];
let jobIdCounter = 1;
// DOM elements
const jobListDiv = [Link]('jobList');
const applicationsDiv = [Link]('applications');
// Post Job
[Link]('postJobBtn').addEventListener('click', () =>
{ const title = [Link]('jobTitle').[Link]();
const company = [Link]('jobCompany').[Link]();
if (!title || !company) {
alert("Please fill in both fields");
return;
}
const job = { id: jobIdCounter++, title, company };
[Link](job);
displayJobs();
[Link]('jobTitle').value = '';
[Link]('jobCompany').value = '';
});
// Display Jobs
const displayJobs = () =>
{ [Link] = '';
[Link](job => {
[Link] += `<div class="job-card">
<strong>${[Link]}</strong> at <em>${[Link]}</em> (ID: ${[Link]})
</div>`;
});
};
// Apply for Job
[Link]('applyJobBtn').addEventListener('click', () => {
const name = [Link]('applicantName').[Link]();
const jobId = parseInt([Link]('jobId').value);
const job = [Link](j => [Link] === jobId);
if (!name || !job) {
alert("Invalid name or Job ID");
return;
}
[Link]({ name, jobId });
displayApplications();
[Link]('applicantName').value = '';
[Link]('jobId').value = '';
});
// Display Applications
const displayApplications = () =>
{ [Link] =
''; [Link](app => {
const job = [Link](j => [Link] === [Link]);
[Link] += `<div>${[Link]} applied for ${[Link]} at
${[Link]}</div>`;
});
};
OUTPUT:
RESULTS:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]:
ONLINE COMPLAINT / SUPPORT TICKET SYSTEM
DATE:
AIM
To develop a simple Support Ticket System using HTML and JavaScript to raise, view, and
close tickets.
ALGORITHM
1. Start
2. Design the Web Page
Create an HTML page with input fields to enter user name and issue description
Add a button labeled “Raise Ticket”
Provide a section to display the list of raised tickets
3. User Enters Details
Allow the user to type their name and describe the issue in the given input fields
4. Read Input on Button Click
When the user clicks “Raise Ticket”, read the entered name and issue from the input
fields
5. Validate Inputs
Check whether the name or issue field is empty
If any field is empty, display an error message asking the user to fill all fields
Stop further execution until valid input is provided
6. Create Ticket
If inputs are valid, create a new ticket
Assign a unique ticket ID
Store user name and issue description
Set the ticket status as “Open”
7. Store and Display Tickets
Add the created ticket to a list of tickets
Display all tickets on the screen with details such as ID, name, issue, and status
8. Close Ticket Option
Provide a “Close” button for each ticket displayed
When the button is clicked, identify the corresponding ticket using its ID
9. Update Ticket Status
Change the selected ticket’s status from “Open” to “Closed”
Refresh and update the displayed ticket list to reflect the change
10. End
PROGRAM
HTML ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Support Ticket System</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input, textarea, button { margin: 5px 0; padding: 5px; width: 100%; }
.ticket-card { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
</style>
</head>
<body>
<h1>Support Ticket System</h1>
<h2>Raise a Ticket</h2>
<input type="text" id="userName" placeholder="Your Name">
<textarea id="issueDesc" placeholder="Describe your issue"></textarea>
<button id="raiseTicketBtn">Raise Ticket</button>
<h2>Tickets</h2>
<div id="ticketList"></div>
<script src="[Link]"></script>
</body>
</html>
JavaScript ([Link])
let tickets = [];
let ticketIdCounter = 1;
const ticketListDiv = [Link]('ticketList');
// Raise Ticket
[Link]('raiseTicketBtn').addEventListener('click', () => {
const name = [Link]('userName').[Link]();
const desc = [Link]('issueDesc').[Link]();
if (!name || !desc) {
alert("Please fill in all fields");
return;
}
const ticket = { id: ticketIdCounter++, name, desc, status: 'Open' };
[Link](ticket);
displayTickets();
[Link]('userName').value = '';
[Link]('issueDesc').value = '';
});
// Display Tickets
const displayTickets = () =>
{ [Link] = '';
[Link](ticket => {
[Link] += `<div class="ticket-card">
<strong>Ticket #${[Link]}</strong> by ${[Link]}<br>
${[Link]}<br>
<em>Status: ${[Link]}</em>
<button onclick="closeTicket(${[Link]})">Close</button>
</div>`;
});
};
// Close Ticket
const closeTicket = (id) => {
const ticket = [Link](t => [Link] === id);
if (ticket) {
[Link] = 'Closed';
displayTickets();
}
};
OUTPUT:
RESULTS:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]: CRUD OPERATIONS USING MYSQL AND
[Link]
DATE:
AIM:
To performing CRUD (Create, Read, Update, Delete) operations using MySQL and [Link].
ALGORITHM:
Step 1: Initialize Application
1. Import necessary modules:
express for web server (though not used for routing here).
mysql2 for MySQL database connectivity.
2. Create an Express application instance.
Step 2: Connect to MySQL Database
3. Configure database connection with:
Host
User
Password
Database name
4. Attempt to connect to MySQL using the configuration.
If connection fails, throw an error.
If successful, print "MySQL Connected".
Step 3: Perform SQL Operations
3.1 : SELECT Operation
5. Execute a SELECT * FROM books query.
If successful, log all rows retrieved.
If error occurs, handle/log error (commented out in code).
3.2 INSERT Operation
6. Define a book object (user) with properties: title, author_id, genre, price, and published_date.
7. Insert the user object into the books table using INSERT INTO ... SET ?.
8. If insert is successful:
Print the insertId of the new record.
If error occurs, throw and log the error.
3.3 : UPDATE Operation
9. Define another book object (booksupdate) with updated properties.
10. Update the book with id = 2 using UPDATE books SET ? WHERE id = 2.
11. If update is successful:
Print the number of affected rows.
If error occurs, throw and log the error.
3.4 : DELETE Operation
12. Define a DELETE query to remove books with id IN (4,5).
13. Execute the delete query.
If rows are affected, print "Record deleted successfully".
If no rows are affected, print "No record found with the specified ID".
If error occurs, throw and log the error.
Step 4: Close Database Connection
14. Close the database connection using [Link]().
If successful, log "MySQL connection was closed".
If error occurs during closure, throw and log the error.
PROGRAM:
Const express = require('express');
var mysql = require('mysql2');
const app = express();
// Database Connection
const db =
[Link]({ host:
"localhost",
user: "root",
password: "viimsmcalab",
database: "bookstore"
});
[Link]((err)=>
{ if (err)
{throw err; }
[Link]("MySQL Connected");
});
// SELECT Query
[Link]('SELECT * FROM books', (err, rows) => {
//if (err) throw err;
[Link]('Data received from database:');
[Link](rows);
});
// Insert Query
const user =
{ title:
"Bigdata",
author_id: 5,
genre: "subject",
price: 100,
published_date: "2008-05-23"
};
[Link]('INSERT INTO books SET ?', user, (err, results) =>
{ if (err) {
[Link]('An error occurred while inserting data');
throw err;
[Link]('Data inserted:',[Link]);
});
// Update query
const booksupdate =
{ title: "FSWD",
author_id: 8,
genre: "subject",
price: 500,
published_date: "2010-05-23"
};
[Link]('UPDATE books SET ? WHERE id = 2', booksupdate,(err, results) =>
{ if (err) {
[Link]('An error occurred while updating data:', err);
throw err;
[Link](`Records updated: ${[Link]}`);
});
// Delete query
const deleteQuery = 'DELETE FROM books WHERE id IN (4,5)';
[Link](deleteQuery, (err, results) => {
if (err) {
[Link]('An error occurred while deleting data:', err);
throw err;
if ([Link] > 0) {
[Link]('Record deleted successfully');
} else {
[Link]('No record found with the specified ID');
});
// Close DB Connection
[Link]((err)=> {
if (err)
{throw err; }
[Link]("MySQL connection was closed");
});
MySQL Commands
RESULT:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
[Link]:
ONLINE DONATION / FUND RAISING SYSTEM
DATE:
AIM
To develop a Donation Web Application using HTML, [Link], Express, and MongoDB to store
and display donor details.
ALGORITHM
1. Start
o Begin the execution of the donation application.
2. Initialize Server
o Create a [Link] server using Express and enable CORS and JSON parsing.
3. Connect to Database
o Use Mongoose to connect to MongoDB database donationDB and ensure
connection.
4. Define Schema and Model
o Create a schema with name and amount, and define the Donation model.
5. Design Frontend Page
o Create HTML page with input fields for name and amount, a Donate button, and
display section.
6. Collect and Validate Input
o When user clicks Donate, read values and ensure inputs are not empty.
7. Send Data to Server
o Send the data using POST request (/donate) in JSON format.
8. Store Data in Database
o Server receives data, creates a donation object, and saves it in MongoDB.
9. Fetch and Display Data
o Use GET request (/donations) to retrieve all records and display them
dynamically.
10. End
PROGRAM
[Link]
const crypto = require("crypto");
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
[Link](cors());
[Link]([Link]());
// MongoDB connect
[Link]("mongodb://[Link]:27017/donationDB");
[Link]("connected", () =>
{ [Link]("MongoDB connected to donationDB");
});
// Schema
const DonationSchema = new
[Link]({ name: String,
amount: Number
});
const Donation = [Link]("Donation", DonationSchema);
// Add donation
[Link]("/donate", async (req, res) =>
{ [Link]("Received:", [Link]); // � ADD THIS
const data = new Donation([Link]);
await [Link]();
[Link]({ message: "Saved" });
});
// Get all donations
[Link]("/donations", async (req, res) =>
{ const data = await [Link]();
[Link](data);
});
[Link](5000, () => [Link]("Server running on port 5000"));
[Link]
!DOCTYPE html>
<html>
<head>
<title>Donation App</title>
</head>
<body>
<h2>Donation App</h2>
<input id="name" placeholder="Your Name">
<br><br>
<input id="amount" type="number" placeholder="Amount">
<br><br>
<button onclick="donate()">Donate</button>
<h3>Donors</h3>
<ul id="list"></ul>
<script>
async function donate() {
const name = [Link]("name").value;
const amount = [Link]("amount").value;
[Link]("Sending:", name, amount);
await fetch("[Link]
{ method: "POST",
headers: {
"Content-Type": "application/json"
},
body:
[Link]({ name:
name,
amount: Number(amount)
})
});
loadData();
async function loadData() {
const res = await fetch("[Link]
const data = await [Link]();
const list = [Link]("list");
[Link] = "";
[Link](d => {
const li = [Link]("li");
[Link] = [Link] + " - ₹" + [Link];
[Link](li);
});
// Load existing data
loadData();
</script>
</body>
</html>
OUTPUT:
TERMINAL:
PS D:\SSS-FSWD(29-4-2026)\Donation-UNIT-5> node [Link]
Server running on port 5000
MongoDB connected to donationDB
DATABASE: ( MONGODB OUTPUT)
> show dbs
admin 0.000GB
config 0.000GB
donationDB 0.000GB
local 0.000GB
> use donationsDB
switched to db donationsDB
> [Link]().pretty()
{
"_id" : ObjectId("69f1df00155a32286b589e44"),
"name" : "mano",
"amount" : 2000,
"___" : 0
}
{
"_id" : ObjectId("69f1e0dc155a32286b589e48"),
"name" : "Selvi",
"amount" : 50000,
"___" : 0
}
RESULTS:
Hence, the program has been verified and executed successfully and the desired output is
obtained.
You might also like
- HTML Forms with PHP: User Input HandlingNo ratings yetHTML Forms with PHP: User Input Handling50 pages
- HTML Form Elements and Attributes GuideNo ratings yetHTML Form Elements and Attributes Guide18 pages
- Software Requirements Specification: Project: Mytodo - A Simple To-Do List WebsiteNo ratings yetSoftware Requirements Specification: Project: Mytodo - A Simple To-Do List Website4 pages
- Understanding JavaScript Events and HandlersNo ratings yetUnderstanding JavaScript Events and Handlers9 pages
- Cloud Data Security Supervision ProcedureNo ratings yetCloud Data Security Supervision Procedure15 pages
- IT3401-WEB Essentials Lab Manual 1 IT3401-WEB Essentials Lab Manual 1No ratings yetIT3401-WEB Essentials Lab Manual 1 IT3401-WEB Essentials Lab Manual 146 pages
- XAMPP Installation Guide for Web DevelopmentNo ratings yetXAMPP Installation Guide for Web Development46 pages
- Cuboid Volume and Surface Area CalculatorNo ratings yetCuboid Volume and Surface Area Calculator5 pages
- PHP and JavaScript Form Validation GuideNo ratings yetPHP and JavaScript Form Validation Guide1 page
- Webx - HTML, Css & Javascript Fundamentals: Presented By: Jitendra Sri Talabattula Sai Prakash ArumulliNo ratings yetWebx - HTML, Css & Javascript Fundamentals: Presented By: Jitendra Sri Talabattula Sai Prakash Arumulli10 pages
- Library Management System Project OverviewNo ratings yetLibrary Management System Project Overview41 pages
- Design and Development of A Responsive Web Application Based On Scaffolding LearningNo ratings yetDesign and Development of A Responsive Web Application Based On Scaffolding Learning6 pages
- Candidate Skills Evaluation for QualcommNo ratings yetCandidate Skills Evaluation for Qualcomm3 pages
- AI-Driven Personalized Learning RoadmapsNo ratings yetAI-Driven Personalized Learning Roadmaps12 pages
- Django Internship Report at Broadway InfosysNo ratings yetDjango Internship Report at Broadway Infosys37 pages
- Front-end Developer Resume of Mohd SameerNo ratings yetFront-end Developer Resume of Mohd Sameer2 pages
- Front-End Developer Resume - Jino JebarsonNo ratings yetFront-End Developer Resume - Jino Jebarson1 page