A

Micro Project On

“Expense Tracker”

Submitted By

50. Janhavi Shinde

Under Guidance of

Mrs. J. C. Joshi

Diploma Course in Information Technology

(As per directives of I Scheme, MSBTE)

Sinhgad Institutes
Sinhgad Technical Education Society’s
SOU. VENUTAI CHAVAN POLYTECHNIC, PUNE - 411041
ACADEMIC YEAR 2024 -2025
Maharashtra State Board of technical
Education Certificate
This is to certify that Ms. Janhavi Amit Shinde with Roll No. 50
of Fifth Semester of Diploma in Information Technology of
Institute Sou. Venutai Chavan Polytechnic (Code:0040) has
successfully completed the Micro-Project in Client Side
Scripting Language (22519) for the academic year 2024- 2025.

Place: SVCP, Pune Enrollment No:2200400201

Date: Exam Seat No:

Mrs. J. C. Joshi Mr. U. S. Shirshetti Dr. M.S. Jadhav

Course Teacher Head of Department Principal
 Annexure – I
Part A-Micro project proposal

A. BRIEF INTRODUCTION:
This project is a basic Expense Tracker web application that enables users to add, edit, delete, and filter
their daily expenses. It includes a form to input expense details (name, amount, category, and date) with
built-in validation to ensure correct data. Submitted expenses are displayed in a table, and users can filter
expenses by category or view the total amount spent. The app uses JavaScript to handle form submission,
data manipulation, and user interactions, providing a simple yet functional tool for managing expenses.

B. AIM OF THE PROJECT:

The aim of this project is to create a simple web-based expense tracker for managing, categorizing, and
calculating daily expenses.

C. INTENTED COURSE OUTCOME:

a) Create interactive web pages using program flow control structure.

b) Implement Arrays and functions in Java script.
c) Create event based web forms using Java script.
d) Use JavaScript for handling cookies.
e) Create interactive webpage using regular expressions for validation.
f) Create Menus and navigation in web Pages.

D. RESOURCES REQUIRED:

Name of Resource
Sr . No. Specification
Required
1 Laptop Intel (R) Core i5- 8GB RAM
2 Operating system Windows 11
3 Software Notepad
ACTION PLAN:

SR.NO. DETAIL OF ACTIVITY WEEK

1 Discussion and finalization of topic 08-08-24

2 Preparation and submission of Abstract 22-08-24

3 Literature Review 12-09-24

4 Collection of Data 19-09-24

5 Discussion and outline of Content 03-10-24

6 Editing and proof Reading of Content 17-10-24

7 Compilation of Report and Presentation 24-10-24

8 Final submission of Micro Project 07-11-24

GROUP MEMBERS:

Roll. No. Name of group members

50 Janhavi Shinde
 Annexure II
Part B- Micro-Project
1. Rationale
The Expense Tracker project addresses the need for effective personal finance management. With rising
living costs, users require a simple tool to track and categorize their expenses, helping them understand
their spending habits. This application streamlines expense logging, provides validation, and allows for
easy editing and filtering, promoting financial responsibility and better planning.

2. Course Outcome Addressed

a) Create interactive web pages using program flow control structure .
b) Implement Arrays and functions in Java script.
c) Create event based web forms using Java script..
f) Create Menus and navigation in web Pages.

3. Actual Method Followed

The process for this micro project is to make a “Expense Tracker.”

We collect information and organize by following points:
1. Collect the information on how to develop a report.
2. Show the information to faculty.
3. Learn about Client Side Scripting.
4. First make a raw report and then correct it.
5. After all the corrections make a proposal.
6. Then prepare a project on “Expense Tracker.”
7. Make pdf of report and print it.
8. We learn more about Client Side Scripting.
 ANNEXURE III
Evaluation Sheet for the Micro Project
Academic Year: 2024-2025 Name of the Faculty: Mrs. J. C. Joshi

Course: Client Side Scripting Language Course Code:22519 Semester: Fifth

Title of the project: “Expense Tracker”

COs addressed by Micro Project:

S. No Course Outcomes

a) Create interactive web pages using program flow control structure ..

b) Implement Arrays and functions in Java script

c) Create event based web forms using Java Script.

f) Create Menus and navigation in web pages

Major learning outcomes achieved by students by doing the project

(a) Practical outcome:

2. Develop JavaScript to use decision making and looping statements.
3. Develop a JavaScript to implement Array functionalities.
4. Develop JavaScript to implement functions.
4. Develop JavaScript to implement strings.
6. Create a webpage using Form Elements.
7. Create a webpage to implement Form Elements Part-I.
8. Create a webpage to implement Form Elements Part-II.

(b) Unit outcomes in Cognitive domain:

1c. Develop JavaScript to implement loop for solving the given iterative problem
1e. Develop program using basic features o JavaScript to solve the given problem.
2a. Create array to solve the given problem.
2c. Develop JavaScript to implement given function.
3a. Write JavaScript to design a form ro accept input values for the given problem.
3b. Develop JavaScript to implement form events to solve the given problem.
6d. Develop JavaScript to create the given Menu.

Comments/suggestions about teamwork /leadership/inter-personal communication (if

any)
…………………………………………………………………………………………………
Marks out of 6 for Marks out of 4 for
Roll performance in performance in
No Name of the Student group activity (D5 oral/ presentation Total Marks out
Col.8) (D5 Col.9) of 10
50 Janhavi Shinde

(Name & Signature)

 INTRODUCTION
The Expense Tracker is a web application designed to help users manage their personal finances effectively. It
allows users to easily log, categorize, and track their daily expenses. With features like input validation, dynamic
expense listing, and filtering options, the app provides a user-friendly interface for monitoring spending habits. Built
using HTML, CSS, and JavaScript, this project aims to promote financial awareness and facilitate better budgeting
and decision-making.

CODE:

document.addEventListener("DOMContentLoaded", () => {
const expenseForm = document.getElementById("expense-form"),
expenseList = document.getElementById("expense-list"),
totalAmount = document.getElementById("total-amount"),
filterCategory = document.getElementById("filter-category");
let expenses = [];
expenseForm.addEventListener("submit", (e) => {
e.preventDefault();
const name = document.getElementById("expense-name").value,
amount = parseFloat(document.getElementById("expense-amount").value),
category = document.getElementById("expense-category").value,
date = document.getElementById("expense-date").value;
// Validation
const currentDate = new Date(),
enteredDate = new Date(date);
if (!name) return alert("Please enter an expense name.");
if (isNaN(amount) || amount <= 0) return alert("Please enter a valid amount greater than 0.");
if (!category) return alert("Please select a category.");
if (!date || enteredDate > currentDate) return alert("Please select a valid date (up to today's date).");
const expense = { id: Date.now(), name, amount, category, date };
expenses.push(expense);
displayExpenses(expenses);
updateTotalAmount(expenses);
expenseForm.reset();
});
filterCategory.addEventListener("change", (e) => {
const category = e.target.value;
const filteredExpenses = category === "All" ? expenses : expenses.filter(expense =>
expense.category === category);
displayExpenses(filteredExpenses);
updateTotalAmount(filteredExpenses);
});
function displayExpenses(expenses) {
expenseList.innerHTML = "";
expenses.forEach(expense => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${expense.name}</td>
<td>₹${expense.amount.toFixed(2)}</td>
<td>${expense.category}</td>
<td>${expense.date}</td>
<td>
 <button class="edit-btn" data-id="${expense.id}" style="color: #ffd700;"> Edit</button>
<button class="delete-btn" data-id="${expense.id}" style="color: #e74c3c;"> Delete</button>
</td>
`;
expenseList.appendChild(row);

// Add event listener for delete button

row.querySelector('.delete-btn').addEventListener('click', () => {
expenses = expenses.filter(exp => exp.id !== expense.id);
displayExpenses(expenses);
updateTotalAmount(expenses);
});

// Add event listener for edit button

row.querySelector('.edit-btn').addEventListener('click', () => {
document.getElementById("expense-name").value = expense.name;
document.getElementById("expense-amount").value = expense.amount;
document.getElementById("expense-category").value = expense.category;
document.getElementById("expense-date").value = expense.date;

expenses = expenses.filter(exp => exp.id !== expense.id);

displayExpenses(expenses);
updateTotalAmount(expenses);
});
});
}

function updateTotalAmount(expenses) {
const total = expenses.reduce((sum, expense) => sum + expense.amount, 0);
totalAmount.textContent = total.toFixed(2);
}
});
OUTPUT:

Original Website:

After Adding Expenses:

Filtered By Category:

Validation if any field is left empty:

Validation if user fills in invalid date
Conclusion:

The Expense Tracker project successfully demonstrates the integration of JavaScript for interactive web
functionality, enabling users to efficiently manage and monitor their expenses. Through the
implementation of features such as real-time data entry, category filtering, and validation, the application
enhances user experience by providing an intuitive interface. The use of arrays and event-driven
programming ensures that expenses are tracked effectively, while functions simplify data manipulation.
This project not only showcases practical programming skills but also emphasizes the importance of
financial management in daily life, encouraging users to be more mindful of their spending habits.
References:

1. https://www.w3schools.com/js/
2. https://exploringjs.com/
3. https://www.geeksforgeeks.org/javascript/