A

Microproject Report

on
Daily Expense Tracker

Under Course : -

Client Side Scripting

Language(22519) Semester

:-V

Maharashtra State Board of Technical Education, Mumbai

Department of Information Technology Engineering

Matoshri Aasarabai Polytechnic, Eklahare, Nashik

Academic Year: 2024-2025
 Maharashtra State Board of Technical Education, Mumbai
Matoshri Aasarabai Polytechnic, Eklahare, Nashik

CERTIFICATE

This is to certify that following students of Fifth Semester Diploma Engineering

Program in IT Department have successfully completed the Micro-
Project "Daily Expense Tracker" under my supervision, in the partial fulfillmentof
Course Client Side Scripting Language (22519) for Academic Year 2024-2025 as per
prescribed in the MSBTE “ I-Scheme” curriculum.
Roll No Enrollment No. Exam Seat Number Name of Students

02 2211700273 Pranit Rajendra Adhangle

06 2211700277 Aaryan Rakesh Ahirrao
07 2211700278 Tushar dattu bhoj

Date:- Place:- Nashik.

Subject Teacher Head of Department Principal

(Prof.Mrs.Gaikwad) (Prof. M.P.Bhandakkar (Dr.A.S.Relkar)

 MATOSHRI AASARABAI POLYTECHNIC, EKLAHARE,
NASHIKDepartment of Information Technology Engineering

Academic Year-2024-2025
Index of Micro Project Report

Program:- Information technology Semester:- 5th

Course:- Client Side Course Code:-

Scripting Language
22519

Title of Micro Project :- Daily Expense Tracker

Sr.
Details Page No.
No.

1 Abstract 1

2 Introduction & Problem Of Statement 2-3

3 Objective and scope of the project 4

4 Actual Procedure Followed 5

5 Flowchart and DFD 6-7

6 Program and Output 8-13

7 Actual Resources Used 14

8 Conclusion and References 15-16

Signature of Student Signature of Faculty

 MATOSHRI AASARABAI POLYTECHNIC, EKLAHARE,
NASHIK

ANNEXURE I

Rubric for Evaluation of Micro Project of CSS(22519)

Title of Micro Project:- Daily Expense Tracker

Group Members:-

Sr.No. Roll Enrollment Seat No. Name of Candidates

No. No
1 02 2211700273 Pranit Rajendra Adhangle
2 06 2211700277 Aaryan Rakesh Ahirrao
3 07 2211700278 Tushar dattu bhoj
Marks Indicators for different level of Performance (Evaluation Scale 1 to 10)
Obtained
Sr Criteria
(Out of Poor (1-3) Average(4-7) Good(8-
No 10
) 10)
Relevance to Related to very few
1 Related to at least one CO Adressed at lease one CO
the course Los
Content of Not relevant and Relevant and sufficient for Relevant , sufficient for
2
project sufficient topic topic and well
organized
Language of Grammatically Grammatically appropriate Grammatically appropriate
3 Project inappropriate but ineffective and effective
Completed and Completed within due date Completed and submitted
Completion
4 submitted after due but took slightly more the complete project within
of project date. time to submit complete specified due date.
project.
Prepared an improper Prepared appropriate
Report Prepared the report with
5 report with format of the report with
Preparation unsatisfactory content satisfactory content sufficient content
details
Not included key Presented with the help of
Included key points but
points, missed details power point, Highlighted
6 Presentation and considerable lacks considerable key points, accurate and
information information considerable information
Not referred more Referred at –least 5
Resources/ Referred at-least 3 relevant
7 than two sources, relevant sources, 3 most
References sources, at least 2 latest
very old reference latest
Total:
Average
(Out of 10)

Name and Signature of Guide

 MATOSHRI AASARABAI POLYTECHNIC, EKLAHARE,
NASHIKDepartment of Information Technology Engineering

Log Book for Micro- Project

Semester:- V
Code:-IF5I
Course / Code :CSS(22519)
Topic of the Micro- Class:- Third Year
Project:- Daily Expense
Tracker

Sr. Name of Group Sign. Sr. Name of Group Sign.

No. Members. No. Members
1 Pranit R.Adhangle 3 Tushar Dattu Bhoj
2 Aaryan Rakesh Ahirrao

Teache
Week Members
Discussion & Details Teacher’s Comment r’s
No. Present Sign.
Discussion on the concept of Micro project Discussed micro-
1 02,06,07
with teacher project concept
Finalization of Group and Project topic
2 02,06,07 Finalized the group
with Project Proposal submission
Preliminary discussion with guide about
3 02,06,07 Discussed with guide
content of Micro project
Related Information Gathered by
4 02,06,07 Gathered information
t3333eam about project
Organized the
5 Organizing the information for project work 02,06,07
information
Discussing project related queries with
6 02,06,07 Discussed the queries
teacher if any
Prepared micro-
7 Preparation of Micro project model or content 02,06,07
project
8 Finalizing the project work by teacher 02,06,07 Finalize project work
Complete report
9 Report writing 02,06,07 writing
10 Presentation , Oral 02,06,07 Gave presentation

11 Submission of project and Project report 02,06,07 Submitted project

Sign Of Faculty
 ANNEXURE II
Evaluation Sheet for the Micro Project

Academic Year:-2024-2025 Name of Faculty:- Prof.Mrs.Gaikwad

Course :- Client Side Scripting Language Course Code :- 22519

Title of the Project :-
Daily Expense Tracker Semester:- 5th

COs addressed by the Micro Project : -

a) Improved financial awareness

b) Time efficiency

c) Enhanced user experience

d) Customizable reporting

Major Learning Outcomes achieved by students by doing the Projects:-

a) Practical Outcomes……………………………………………………………………………
…………………………………………………………………………………………………..
b) Unit Outcomes in Cognitive domain
……………………….……………………………………………………………………………
………….....................................................................................................................................
c) Outcomes in Affective Domain
……………………………………………………………………………………………………
…………………………………………………………………………………………………….

Comment /Suggestion about team work /Leadership/ Inter-personal communication (If any)
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
Marks out of 4 for
Marks out of 6
Roll performance in Total out
Student Name for performance oral
No. of 10
in / presentation
group activity
activity
1 Pranit Adhangle
2 Aaryan Rakesh Ahirrao
3 Tushar Dattu Bhoj

Faculty sign Prof.Mrs.Gaikwad

 ACKNOWLEDGEMENT

With deep sense of gratitude we would like to thanks all the people who have lit
our path with their kind guidance. We are very grateful to these intellectuals who
did their best to help during our project work.

It is our proud privilege to express deep sense of gratitude to, Dr. A. S. Relkar
Principal of Matoshri Aasarabai Polytechnic, Eklahare, Nashik, for his
comments and kind permission to complete this Micro Project.

We remain indebted to Prof. M.P.Bhandkakar, HOD guidance.

The special gratitude goes to our internal guide Prof.Mrs.Gaikwad, technical

staff members, and non-technical staff members, Humanities & Science
Department for their expensive, excellent and precious guidance in completion of
this work.

Name of Students:
1. Pranit
Rajendra
Adhangle
2. Aaryan Rakesh Ahirrao
3. Tushar Dattu Bhoj.
1. Abstract

Managing personal finances effectively is essential for maintaining financial health. The Daily Expense
Tracker is a software solution designed to assist users in tracking their daily expenditures, enabling better
financial management and decision-making. This application provides a simple, user-friendly interface that
allows users to record their income and categorize expenses such as food, transportation, utilities, and
entertainment. It offers features such as expense categorization, graphical representation of spending habits,
budget setting, and financial goal tracking.

The application’s core functionality includes real-time analysis of spending patterns, enabling users
to make informed decisions about their financial habits. Users can set budget limits for specific categories,
receive alerts when they exceed their limits, and generate monthly or weekly reports to monitor their
financial performance. The expense data is stored securely and can be accessed or updated at any time,
offering a comprehensive and continuous overview of personal finances. The Daily Expense Tracker aims to
enhance financial literacy by promoting regular tracking of expenses and ensuring that users remain within
their financial constraints, ultimately fostering healthier financial hab

1
2. Introduction

In today’s fast-paced world, managing personal finances is a crucial aspect of maintaining financial health.
However, many individuals struggle with keeping track of their daily expenses, which often leads to overspending
and difficulties in budgeting. Traditionally, people would record their expenses manually or rely on spreadsheets,
but this process is both time-consuming and prone to human error. It also fails to provide real-time insights into
spending patterns, making it harder to make informed financial decisions.

The Daily Expense Tracker System addresses these challenges by providing an automated solution that allows
users to efficiently track their daily expenditures and gain valuable insights into their spending habits. This web-
based application enables users to enter their expenses, categorize them, and visualize their data through dynamic
charts. By automating the expense-tracking process, the system helps users stay on top of their finances, set
budgeting goals, and identify areas where they can cut down on spending.

The project leverages modern web development technologies to create an intuitive and responsive user interface.
The frontend is built using HTML, CSS, and JavaScript, providing a clean and user-friendly platform for users
to interact with. For visualizing data, Chart.js is utilized to generate dynamic bar charts that represent the
distribution of expenses across various categories. These charts provide users with a clear and immediate
understanding of their spending patterns.

The Daily Expense Tracker System provides users with the flexibility to manage their expenses in a structured
and organized manner. It not only saves time but also improves accuracy in financial tracking. With features like
data visualization, real-time total calculation, and report generation, the system empowers users to make better
financial decisions and maintain control over their daily spending.

This project offers a reliable and scalable solution for anyone looking to manage their personal finances
effectively. By automating the expense tracking process, it minimizes the effort required to keep detailed financial
records, allowing users to focus on their long-term financial goals while staying within their daily budgets.

2
 3.Problem
Managing daily expenses is a common yet crucial aspect of personal finance. However, many individuals face
challenges when it comes to accurately tracking and organizing their spending. Traditional methods such as
manually recording expenses in notebooks or spreadsheets are often inefficient and prone to errors. These
manual processes lack real-time data visualization, making it difficult for users to understand their spending
habits or identify areas where they can make adjustments.

The absence of an automated system to efficiently manage expenses results in poor financial awareness, which
can lead to overspending, inability to meet budgeting goals, and lack of control over personal finances.
Furthermore, the inability to quickly calculate total expenses or generate comprehensive reports can make it
difficult for users to assess their financial health at a glance.

Therefore, there is a need for an automated and user-friendly solution that simplifies the process of tracking
daily expenses, provides real-time insights, and helps users stay on top of their financial situation. This
solution should allow for seamless entry and management of expenses, automatic calculation of total costs, and
the generation of visual reports to assist users in making informed financial decisions.

3
 4.Objective and scope of the

Objective:-
1. Simplify Expense Tracking:
To develop an intuitive and user-friendly interface that allows users to efficiently input and manage their daily
expenses without the need for manual calculations or complex systems.

2. Automate Total Expense Calculation:

To automatically calculate the total daily expenses based on the user’s inputs, providing real-time updates and
minimizing the risk of errors.

3. Visualize Spending Patterns:

To provide dynamic data visualization using bar charts to help users gain insights into their spending habits
and quickly identify categories where they may be overspending.

4. Generate Printable Reports:

To enable users to generate and print reports of their daily expenses, facilitating better record-keeping and
financial analysis over time.

5. Financial Discipline:
To assist users in gaining better control over their finances by offering a tool that tracks expenses,
visualizes data, and provides actionable insights to promote better budgeting and spending decisions.

Scope:-

1. Expense Input and Management:

Users can add, update, and remove daily expenses, with fields for the expense name and amount. Multiple
expenses can be entered dynamically without refreshing the page.

2. Real-Time Calculations:
The system will automatically calculate the total expenses in real time as users input their data,
ensuring immediate and accurate feedback.

3. Data Visualization:
The system will visualize the distribution of expenses using Chart.js, creating a bar chart that helps
users quickly understand which categories consume the largest portions of their daily budget.

4
5.Actual procedure

 Requirement Gathering:
Identified the key functionalities needed for the expense tracker, including expense input, total
calculation, chart visualization, and report generation.

 System Design:
Created wireframes and a layout for the user interface, ensuring a user-friendly experience. Defined the flow
of the application and the interactions between different components.

 Frontend Development:
Utilized HTML, CSS, and JavaScript to develop the user interface. Implemented dynamic forms for entering
expenses and integrated Chart.js to visualize the data.

 Functionality Implementation:
Programmed the core functionalities, such as adding new expense entries, calculating the total expense,
updating charts in real-time, and generating printable reports.

 Testing:
Conducted rigorous testing to identify and fix bugs. Validated input fields to ensure accurate data entry
and confirmed that calculations and visualizations were correct.

 Deployment:
Deployed the application on a local server for user testing. Gathered feedback for further improvements and
refinements.

 Documentation:
Prepared user documentation, including instructions for using the application and descriptions of features,
to assist users in navigating the system effectively.

5
6.Flowcha

6
DFD

7
 7. Program code

<script>
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Expense Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-
serif; background-color: #f4f4f9;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #4CAF50;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0,
0.1); max-width: 500px;
width: 100%;
}
.expense-row {
display: flex;
justify-content: space-between;
align-items: center;

8
 margin-bottom:
}

.expense-row input[type="text"] {
flex: 2;
padding: 8px;
margin-right: 10px;
border: 1px solid
#ccc; border-radius:
4px;
}
.expense-row input[type="number"] {
flex: 1;
padding: 8px;
border: 1px solid
#ccc; border-radius:
4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#expense-summary {
margin-top: 20px;
text-align:
center; font-size:
18px;
}
canvas {
margin-top: 30px;
max-width: 400px; /* Reduce chart width */
max-height: 300px; /* Reduce chart height */

9
 margin-bottom:
}
#add-more-btn {
background-color: #008CBA;

1
 margin-bottom:

#print-btn {
background-color: #FF5722;
margin-top: 20px;
}
</style>
</head>
<body>

<h1>Daily Expense Tracker</h1>

<form id="expense-form">
<div id="expense-rows">
<div class="expense-row">
<input type="text" placeholder="Expense Name" class="expense-name" required>
<input type="number" placeholder="Price" class="expense-price" required>
</div>
</div>

<button type="button" id="add-more-btn">Add More</button><br>

<button type="submit">Calculate Total</button>
</form>

<div id="expense-summary">
<h2>Total Expense: <span id="total-expense">0</span></h2>
</div>

<canvas id="expenseChart"></canvas>

<button id="print-btn">Print Report</button>

<script>
let expenses = [];
let totalExpense =
0; let
expenseChart;

document.getElementById('add-more-btn').addEventListener('click', function() {
const expenseRows = document.getElementById('expense-rows');

1
 margin-bottom:
const newRow = document.createElement('div');

1
 newRow.classList.add('expense-
newRow.innerHTML = `
<input type="text" placeholder="Expense Name" class="expense-name" required>
<input type="number" placeholder="Price" class="expense-price" required>
`;
expenseRows.appendChild(newRow);
});
document.getElementById('expense-form').addEventListener('submit', function(event) {
event.preventDefault();

let currentExpenses = [];

totalExpense = 0;
const expenseNames = document.querySelectorAll('.expense-
name'); const expensePrices =
document.querySelectorAll('.expense-price');

for (let i = 0; i < expenseNames.length; i++)

{ const name = expenseNames[i].value;
const price = parseFloat(expensePrices[i].value);

if (name && price) {

currentExpenses.push({ name, price });
totalExpense += price;
}
}
expenses = currentExpenses;
document.getElementById('total-expense').textContent = totalExpense.toFixed(2);

updateChart();
});
function updateChart() {
const labels = expenses.map(expense =>
expense.name); const data = expenses.map(expense =>
expense.price);

const ctx = document.getElementById('expenseChart').getContext('2d');

// Generate different colors for each expense

const backgroundColors = labels.map(() => getRandomColor());

1
 newRow.classList.add('expense-

// Destroy the previous chart instance if it exists

1
 if (expenseChart)
expenseChart.destroy();
}

expenseChart = new Chart(ctx, {

type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Expenses',
data: data,
backgroundColor: backgroundColors,
borderColor: '#388E3C',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
function getRandomColor() {
const letters =
'0123456789ABCDEF'; let color =
'#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

// Print the report

document.getElementById('print-btn').addEventListener('click', function() {
window.print();
});

1
 if (expenseChart)
</script></body> </html>

1
8. Output

Pdf Report:-

1
 9.Actual Resources

Resource Description
HTML Structure of the web app.
CSS Styling of the UI.
JavaScript Dynamic behavior of the app.
Chart.js Library for visualizing expenses.
Dev Tools For debugging and testing.
Code
For writing and editing code.
Editor
GitHub Version control platform.

Application of the Micro-Project

Application Description

Visual
Studio Code editor for development.
Code

Web
For testing and viewing the app.
Browser

Postman API testing and documentation.

1
 10.Conlusi

The Daily Expense Tracker System successfully addresses the challenges of manual expense tracking by
providing an automated, user-friendly platform for managing daily finances. Through the integration of real-
time calculations, dynamic data visualization, and printable reports, the system empowers users to take control
of their spending habits and make informed financial decisions.

By simplifying the process of recording expenses and offering clear insights into spending patterns, this
system helps users maintain financial discipline and achieve their budgeting goals. The automation of tasks not
only reduces the chances of human error but also saves time, allowing users to focus on more important aspects
of their financial planning.

This project demonstrates the practical application of web technologies like HTML, CSS, JavaScript, and
Chart.js to solve a real-world problem. It provides a scalable solution that can be adapted for personal or small
business use, offering a reliable and efficient method for tracking and analyzing expenses. The Daily Expense
Tracker System serves as a valuable tool for anyone looking to improve their financial awareness and maintain
better control over their daily expenses.

1
11. References/ Bibliography

 Chart.js Documentation

Official documentation for using Chart.js, a JavaScript library for creating charts and graphs.

 MDN Web Docs: JavaScript Guide

Comprehensive guide to JavaScript fundamentals and advanced concepts by Mozilla.

 W3Schools: HTML and CSS Tutorials

A beginner-friendly resource for learning web development languages like HTML, CSS,

and JavaScript.

 Stack Overflow

A popular developer forum for finding coding solutions and debugging issues.

 MDN Web Docs: CSS Flexbox

A detailed guide on using CSS Flexbox to create flexible and responsive web layouts.

 GitHub: Open-Source Expense Trackers

A platform for exploring open-source projects, including various implementations of expense trackers.