Ex no.
1: Event Management System
🎯 AIM
To develop a simple Event Management System using HTML and JavaScript, where users can browse,
register, and manage events, and organizers can create and track event participation using browser
storage.
PROCEDURE
1. Open a text editor such as Notepad or VS Code.
2. Create a new file and save it as [Link].
3. Write the HTML structure for the webpage.
4. Add input fields for event title and date.
5. Use JavaScript to:
o Store events in localStorage
o Display events dynamically
o Allow users to register for events
o Track number of participants
6. Implement functions:
o createEvent() to add events
o displayEvents() to show events
o register() to join events
o deleteEvent() to remove events
7. Save the file.
8. Open the file in a web browser.
9. Test all functionalities (create, register, delete).
💻 CODE
<!DOCTYPE html>
<html>
<head>
<title>Event Management System</title>
</head>
<body>
<h1>Event Management System</h1>
<h2>Create Event (Organizer)</h2>
<input id="title" placeholder="Event Title">
<input id="date" placeholder="Date">
<button onclick="createEvent()">Create Event</button>
<h2>Available Events</h2>
<div id="eventList"></div>
<script>
let events = [Link]([Link]("events")) || [];
function saveData() {
[Link]("events", [Link](events));
}
function createEvent() {
let title = [Link]("title").value;
let date = [Link]("date").value;
if (title === "" || date === "") {
alert("Enter all details");
return;
}
[Link]({
id: [Link](),
title: title,
date: date,
participants: []
});
saveData();
displayEvents();
}
function displayEvents() {
let container = [Link]("eventList");
[Link] = "";
[Link](event => {
let div = [Link]("div");
[Link] = `
<h3>${[Link]} (${[Link]})</h3>
<p>Participants: ${[Link]}</p>
<input id="name-${[Link]}" placeholder="Enter your name">
<button onclick="register(${[Link]})">Register</button>
<button onclick="deleteEvent(${[Link]})">Delete</button>
<hr>
`;
[Link](div);
});
}
function register(id) {
let name = [Link]("name-" + id).value;
if (name === "") {
alert("Enter name");
return;
}
let event = [Link](e => [Link] === id);
[Link](name);
saveData();
displayEvents();
}
function deleteEvent(id) {
events = [Link](e => [Link] !== id);
saveData();
displayEvents();
}
displayEvents();
</script>
</body>
</html>
OUTPUT
🧾 RESULT
Thus, the Event Management System was successfully developed using HTML and JavaScript. The
application allows users to create events, register for events, and track participation using browser
local storage.
Ex no.2: Personal Finance Tracker
🎯 AIM
To develop a Personal Finance Tracker using HTML and JavaScript that allows users to log income
and expenses, categorize transactions, and view basic financial analysis.
PROCEDURE
1. Open a text editor such as Notepad or VS Code.
2. Create a new file and save it as [Link].
3. Design the HTML structure with input fields for:
o Amount
o Type (Income/Expense)
o Category
4. Use JavaScript to:
o Store transactions in localStorage
o Display transaction history
o Calculate total income and expenses
5. Implement functions:
o addTransaction() to add data
o displayTransactions() to show records
o updateSummary() to calculate totals
6. Save the file.
7. Open the file in a web browser.
8. Test by adding income and expense entries.
💻 CODE
<!DOCTYPE html>
<html>
<head>
<title>Personal Finance Tracker</title>
</head>
<body>
<h1>Personal Finance Tracker</h1>
<h2>Add Transaction</h2>
<input id="amount" type="number" placeholder="Enter amount">
<select id="type">
<option value="income">Income</option>
<option value="expense">Expense</option>
</select>
<input id="category" placeholder="Category (Food, Salary, etc)">
<button onclick="addTransaction()">Add</button>
<h2>Summary</h2>
<p>Total Income: ₹<span id="income">0</span></p>
<p>Total Expense: ₹<span id="expense">0</span></p>
<p>Balance: ₹<span id="balance">0</span></p>
<h2>Transactions</h2>
<div id="list"></div>
<script>
let transactions = [Link]([Link]("transactions")) || [];
function saveData() {
[Link]("transactions", [Link](transactions));
}
function addTransaction() {
let amount = [Link]("amount").value;
let type = [Link]("type").value;
let category = [Link]("category").value;
if (amount === "" || category === "") {
alert("Enter all details");
return;
}
[Link]({
id: [Link](),
amount: Number(amount),
type: type,
category: category
});
saveData();
displayTransactions();
updateSummary();
}
function displayTransactions() {
let container = [Link]("list");
[Link] = "";
[Link](t => {
let div = [Link]("div");
[Link] = `
<p>${[Link]()} - ₹${[Link]} (${[Link]})
<button onclick="deleteTransaction(${[Link]})">Delete</button></p>
`;
[Link](div);
});
}
function deleteTransaction(id) {
transactions = [Link](t => [Link] !== id);
saveData();
displayTransactions();
updateSummary();
}
function updateSummary() {
let income = 0, expense = 0;
[Link](t => {
if ([Link] === "income") income += [Link];
else expense += [Link];
});
[Link]("income").innerText = income;
[Link]("expense").innerText = expense;
[Link]("balance").innerText = income - expense;
}
displayTransactions();
updateSummary();
</script>
</body>
</html>
OUTPUT
🧾 RESULT
Thus, the Personal Finance Tracker was successfully developed using HTML and JavaScript. The
application allows users to record income and expenses, categorize transactions, and view financial
summaries using browser local storage.
Ex no.3: Learning Management System (HTML & CSS)
🎯 AIM
To develop a simple Learning Management System (LMS) using HTML and CSS where instructors can
upload courses and students can view, enroll, access content, and attempt quizzes (static interface).
PROCEDURE
1. Open a text editor such as Notepad or VS Code.
2. Create a new file and save it as [Link].
3. Design the webpage using HTML:
o Add sections for courses
o Display course details
o Provide enroll and quiz options
4. Use CSS to:
o Style the layout
o Improve readability and design
5. Create course cards with:
o Course title
o Instructor name
o Description
o Enroll button
6. Add a simple quiz section using HTML form elements.
7. Save the file.
8. Open the file in a browser.
9. Verify UI layout and content display.
💻 CODE
<!DOCTYPE html>
<html>
<head>
<title>Learning Management System</title>
<style>
body {
font-family: Arial;
background-color: #f4f4f4;
margin: 20px;
}
h1 {
text-align: center;
}
.course {
background: white;
padding: 15px;
margin: 10px;
border-radius: 8px;
box-shadow: 0 0 5px gray;
}
button {
background: blue;
color: white;
border: none;
padding: 8px;
margin-top: 5px;
cursor: pointer;
}
.quiz {
background: white;
padding: 15px;
margin: 10px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>Learning Management System</h1>
<h2>Available Courses</h2>
<div class="course">
<h3>Web Development</h3>
<p>Instructor: John</p>
<p>Learn HTML, CSS, and JavaScript</p>
<button>Enroll</button>
</div>
<div class="course">
<h3>Python Programming</h3>
<p>Instructor: Smith</p>
<p>Basics of Python and applications</p>
<button>Enroll</button>
</div>
<h2>Course Content</h2>
<div class="course">
<p>Lesson 1: Introduction</p>
<p>Lesson 2: Basics</p>
</div>
<h2>Quiz</h2>
<div class="quiz">
<p>1. HTML stands for?</p>
<input type="radio" name="q1"> Hyper Text Markup Language<br>
<input type="radio" name="q1"> High Tech Machine Language<br>
<p>2. CSS is used for?</p>
<input type="radio" name="q2"> Styling<br>
<input type="radio" name="q2"> Programming<br>
<br>
<button>Submit</button>
</div>
</body>
</html>
OUTPUT:
🧾 RESULT
Thus, the Learning Management System interface was successfully created using HTML and CSS. The
system displays courses, allows enrollment (UI level), provides course content, and includes a quiz
section.
Ex no.4: Appointment Booking System (HTML & CSS)
🎯 AIM
To develop a simple Appointment Booking System using HTML and CSS that allows users to
schedule, view, and manage appointments for clinics or professionals (static interface).
PROCEDURE
1. Open a text editor such as Notepad or VS Code.
2. Create a new file and save it as [Link].
3. Design the webpage using HTML:
o Add a form for booking appointments
o Include fields for name, date, time, and service
4. Use CSS to:
o Style the form and layout
o Improve user interface appearance
5. Add a section to display booked appointments (static display).
6. Save the file.
7. Open the file in a web browser.
8. Verify layout and input fields.
💻 CODE
<!DOCTYPE html>
<html>
<head>
<title>Appointment Booking System</title>
<style>
body {
font-family: Arial;
background-color: #f2f2f2;
margin: 20px;
}
h1 {
text-align: center;
}
.container {
background: white;
padding: 20px;
margin: auto;
width: 300px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}
input, select {
width: 100%;
padding: 8px;
margin: 8px 0;
}
button {
width: 100%;
padding: 10px;
background: green;
color: white;
border: none;
cursor: pointer;
}
.appointments {
margin-top: 20px;
background: white;
padding: 15px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Appointment Booking System</h1>
<div class="container">
<h2>Book Appointment</h2>
<input type="text" placeholder="Your Name">
<input type="date">
<input type="time">
<select>
<option>Doctor Consultation</option>
<option>Dentist</option>
<option>Therapy Session</option>
</select>
<button>Book Appointment</button>
</div>
<div class="appointments">
<h2>Appointments</h2>
<p>John - 2026-05-10 - 10:00 AM - Doctor Consultation</p>
<p>Mary - 2026-05-11 - 02:00 PM - Dentist</p>
</div>
</body>
</html>
📸 OUTPUT
🧾 RESULT
Thus, the Appointment Booking System was successfully designed using HTML and CSS. The system
provides a user interface for scheduling and viewing appointments.
Ex no.5: Job Portal System (HTML & JavaScript)
🎯 AIM
To develop a simple Job Portal System using HTML and JavaScript where recruiters can post job
vacancies and applicants can search jobs and apply online.
PROCEDURE
1. Open a text editor such as Notepad or VS Code.
2. Create a new file and save it as [Link].
3. Design the webpage using HTML:
o Add input fields for job title and company
o Add a button to post jobs
4. Use JavaScript to:
o Store jobs in localStorage
o Display job listings dynamically
o Allow users to apply for jobs
5. Implement functions:
o addJob() to post jobs
o displayJobs() to show job list
o applyJob() to apply
6. Save the file.
7. Open the file in a web browser.
8. Test by posting and applying for jobs.
💻 CODE
<!DOCTYPE html>
<html>
<head>
<title>Job Portal</title>
</head>
<body>
<h1>Job Portal System</h1>
<h2>Post Job (Recruiter)</h2>
<input id="title" placeholder="Job Title">
<input id="company" placeholder="Company Name">
<button onclick="addJob()">Post Job</button>
<h2>Available Jobs</h2>
<div id="jobList"></div>
<script>
let jobs = [Link]([Link]("jobs")) || [];
function saveData() {
[Link]("jobs", [Link](jobs));
}
function addJob() {
let title = [Link]("title").value;
let company = [Link]("company").value;
if (title === "" || company === "") {
alert("Enter all details");
return;
}
[Link]({
id: [Link](),
title: title,
company: company,
applicants: []
});
saveData();
displayJobs();
}
function displayJobs() {
let container = [Link]("jobList");
[Link] = "";
[Link](job => {
let div = [Link]("div");
[Link] = `
<h3>${[Link]} - ${[Link]}</h3>
<p>Applicants: ${[Link]}</p>
<input id="name-${[Link]}" placeholder="Your Name">
<input id="resume-${[Link]}" placeholder="Resume (text)">
<button onclick="applyJob(${[Link]})">Apply</button>
<button onclick="deleteJob(${[Link]})">Delete</button>
<hr>
`;
[Link](div);
});
}
function applyJob(id) {
let name = [Link]("name-" + id).value;
let resume = [Link]("resume-" + id).value;
if (name === "" || resume === "") {
alert("Enter all details");
return;
}
let job = [Link](j => [Link] === id);
[Link]({ name, resume });
saveData();
displayJobs();
}
function deleteJob(id) {
jobs = [Link](j => [Link] !== id);
saveData();
displayJobs();
}
displayJobs();
</script>
</body>
</html>
📸 OUTPUT
🧾 RESULT
Thus, the Job Portal System was successfully developed using HTML and JavaScript. The system
allows recruiters to post jobs and applicants to apply, with data stored using browser local storage.
Ex no.6: Complaint / Support Ticket System (HTML & JavaScript)
🎯 AIM
To develop a Complaint / Support Ticket System using HTML and JavaScript where users can raise
issues, track their status, and receive responses from administrators.
PROCEDURE
1. Open a text editor such as Notepad or VS Code.
2. Create a new file and save it as [Link].
3. Design the webpage using HTML:
o Add input fields for user name and complaint
o Add a button to submit complaint
4. Use JavaScript to:
o Store complaints in localStorage
o Display complaints dynamically
o Track complaint status (Pending / Resolved)
5. Implement functions:
o addComplaint() to submit complaint
o displayComplaints() to show tickets
o resolveComplaint() to update status
6. Save the file.
7. Open the file in a web browser.
8. Test by submitting and resolving complaints.
💻 CODE
<!DOCTYPE html>
<html>
<head>
<title>Support Ticket System</title>
</head>
<body>
<h1>Complaint / Support Ticket System</h1>
<h2>Raise Complaint</h2>
<input id="name" placeholder="Your Name">
<input id="issue" placeholder="Describe Issue">
<button onclick="addComplaint()">Submit</button>
<h2>Tickets</h2>
<div id="ticketList"></div>
<script>
let tickets = [Link]([Link]("tickets")) || [];
function saveData() {
[Link]("tickets", [Link](tickets));
}
function addComplaint() {
let name = [Link]("name").value;
let issue = [Link]("issue").value;
if (name === "" || issue === "") {
alert("Enter all details");
return;
}
[Link]({
id: [Link](),
name: name,
issue: issue,
status: "Pending"
});
saveData();
displayTickets();
}
function displayTickets() {
let container = [Link]("ticketList");
[Link] = "";
[Link](ticket => {
let div = [Link]("div");
[Link] = `
<h3>${[Link]}</h3>
<p>${[Link]}</p>
<p>Status: ${[Link]}</p>
<button onclick="resolveTicket(${[Link]})">Mark Resolved</button>
<button onclick="deleteTicket(${[Link]})">Delete</button>
<hr>
`;
[Link](div);
});
}
function resolveTicket(id) {
let ticket = [Link](t => [Link] === id);
[Link] = "Resolved";
saveData();
displayTickets();
}
function deleteTicket(id) {
tickets = [Link](t => [Link] !== id);
saveData();
displayTickets();
}
displayTickets();
</script>
</body>
</html>
📸 OUTPUT
🧾 RESULT
Thus, the Complaint / Support Ticket System was successfully developed using HTML and JavaScript.
The system allows users to submit complaints, track their status, and manage tickets using browser
local storage.
Ex no.7: Library Management System ([Link], [Link] & MongoDB)
🎯 AIM
To develop a Library Management System using [Link], [Link], and MongoDB that allows users
to search, reserve, borrow, and return books, while enabling administrators to manage inventory.
PROCEDURE
1. Install [Link] and ensure it is working.
2. Install MongoDB and start the database server.
3. Create a project folder and open it in VS Code.
4. Initialize project:
npm init -y
5. Install required packages:
npm install express mongoose cors
6. Create a file named [Link].
7. Connect [Link] with MongoDB using Mongoose.
8. Create schema for books (title, author, status).
9. Implement API routes:
o Add book
o View books
o Borrow book
o Return book
10. Run the server using:
node [Link]
11. Test APIs using browser or Postman.
💻 CODE
📌 [Link]
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
[Link](cors());
[Link]([Link]());
// Connect MongoDB
[Link]("mongodb://[Link]:27017/libraryDB");
// Schema
const Book = [Link]("Book", {
title: String,
author: String,
status: { type: String, default: "Available" }
});
// ROUTES
// Add Book (Admin)
[Link]("/books", async (req, res) => {
const book = new Book([Link]);
await [Link]();
[Link](book);
});
// Get All Books
[Link]("/books", async (req, res) => {
const books = await [Link]();
[Link](books);
});
// Borrow Book
[Link]("/books/:id/borrow", async (req, res) => {
const book = await [Link]([Link]);
[Link] = "Borrowed";
await [Link]();
[Link](book);
});
// Return Book
[Link]("/books/:id/return", async (req, res) => {
const book = await [Link]([Link]);
[Link] = "Available";
await [Link]();
[Link](book);
});
// Delete Book
[Link]("/books/:id", async (req, res) => {
await [Link]([Link]);
[Link]({ message: "Deleted" });
});
[Link](5000, () => [Link]("Server running on port 5000"));
📸 OUTPUT
🧾 RESULT
Thus, the Library Management System was successfully developed using [Link], [Link], and
MongoDB. The system supports adding, viewing, borrowing, and returning books with proper
inventory tracking.
Ex no.8: Donation Platform ([Link])
🎯 AIM
To develop a Donation Platform using [Link] where users can create fundraising campaigns,
contribute donations, and track progress with donor details.
PROCEDURE
1. Install [Link] on your system.
2. Create a React application using:
npx create-react-app donation-app
3. Navigate to project folder:
cd donation-app
4. Start the React app:
npm start
5. Open src/[Link].
6. Design UI for:
o Creating campaigns
o Viewing campaigns
o Donating to campaigns
7. Use React state (useState) to manage data.
8. Implement functions:
o Add campaign
o Donate to campaign
o Track total donations
9. Save the file and view output in browser.
💻 CODE
📌 [Link]
import React, { useState } from "react";
function App() {
const [campaigns, setCampaigns] = useState([]);
const [title, setTitle] = useState("");
const [goal, setGoal] = useState("");
const addCampaign = () => {
if (title === "" || goal === "") return;
setCampaigns([
...campaigns,
{ id: [Link](), title, goal: Number(goal), raised: 0, donors: [] }
]);
setTitle("");
setGoal("");
};
const donate = (id, amount, name) => {
setCampaigns([Link](c =>
[Link] === id
?{
...c,
raised: [Link] + Number(amount),
donors: [...[Link], { name, amount }]
}
:c
));
};
return (
<div style={{ padding: "20px" }}>
<h1>Donation Platform</h1>
<h2>Create Campaign</h2>
<input
placeholder="Campaign Title"
value={title}
onChange={e => setTitle([Link])}
/>
<input
placeholder="Goal Amount"
value={goal}
onChange={e => setGoal([Link])}
/>
<button onClick={addCampaign}>Create</button>
<h2>Campaigns</h2>
{[Link](c => (
<div key={[Link]} style={{ border: "1px solid gray", margin: "10px", padding: "10px" }}>
<h3>{[Link]}</h3>
<p>Goal: ₹{[Link]}</p>
<p>Raised: ₹{[Link]}</p>
<p>Progress: {(([Link] / [Link]) * 100 || 0).toFixed(2)}%</p>
<input id={`name-${[Link]}`} placeholder="Your Name" />
<input id={`amt-${[Link]}`} placeholder="Amount" type="number" />
<button onClick={() => {
const name = [Link](`name-${[Link]}`).value;
const amt = [Link](`amt-${[Link]}`).value;
donate([Link], amt, name);
}}>
Donate
</button>
<h4>Donors:</h4>
<ul>
{[Link]((d, i) => (
<li key={i}>{[Link]} - ₹{[Link]}</li>
))}
</ul>
</div>
))}
</div>
);
}
export default App;
📸 OUTPUT
🧾 RESULT
Thus, the Donation Platform was successfully developed using [Link]. The system allows users to
create campaigns, donate funds, track progress, and view donor details dynamically.