EXPENSE TRACKER REPORT (GRP 32)

REPORT
OF THE PROJECT ENTITLED
EXPENSE TRACKER
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE
SECOND YEAR ENGINEERING

As prescribed by
SAVITRIBAI PHULE PUNE UNIVERSITY

By
Pereira Moses Joseph COSB31
Honrao Shivam Sanjay COSB71
Pinto Aaryan Dennis COSB35
Kudale Sourabh Anil COSA71
Under the Guidance of
Prof. Deepika Falak (mam)
Submitted to:
Department of SECOND YEAR ENGINEERING

STES’S SINGAD ACADEMY OF ENGINEERING, PUNE-
411048 2021-2022
CERTIFICATE
This is to certify that the seminar report
entitled
EXPENSE TRACKER
Submitted By
Pereira Moses Joseph COSB31
Honrao Shivam Sanjay C0SB71
Pinto Aaryan Dennis COSB35
Kudale Sourabh Anil COSA71
Of Class Second Year Computer Engineering (2021-22) have successfully completed

project on “EXPENSE TRACKER” under the guidance of “Mrs. Deepika Phalak” in parallel
Fulfilment of the requirement for the award of PBL in Computer Engineering from
Sinhgad Academy Of Engineering,Pune
Mrs. Deepika Phalak Mr. S.N.Shelke Dr.Kishor P.Patil

(Project Guide) (H.O.D) (Principal)
ACKNOWLEDGEMENT
E-411048
2021-2022
We cannot express enough thanks to our respected HOD, for providing us with a highly
conducive environment and encouraging the growth and creativity of each and every student.
We would also like to offer our sincere gratitude to our Mini Project Coordinators Mr S.N.
Shelke for the numerous learning opportunities that have been provided. We would like to take
this opportunity to express our gratitude to our Project Guide, Prof. Deepika Phalak (mam) for
continuously supporting and guiding us in our every endeavor as well for taking a keen and
active interest in the progress of every phase of The Expense Tracker Project. Thank you for
providing us with the necessary inputs and suggestions for advancing with our Project work.
We deeply appreciate the wise guidance that sir has provided. Finally, we would like to extend
our sincere thanks to all the faculty members, staff from SE Department.
ABSTRACT
In today’s busy and expensive life we are in a great rush to make money. But at the end of
the month we broke off. As we are unknowingly spending money on little and unwanted
things. So, we have come over with the idea to track our earnings. Expense Tracker (ET)
aims to help everyone who are planning to know their expenses and save from it. ET is an
website which users can execute in their mobile phones and update their daily expenses
so that they are well known to their expenses. Here user can define their own categories
for expense type like food, clothing, rent and bills where they have to enter the money
that has been spent and also can add some information in additional information to
specify the expense. User can also define expense categories. User will be able to see
percentage of expense and income used. Although this website is focused on new job
holders, interns and teenagers, everyone who wants to track their expense can use this
app.
Table Of Contents
ACKNOWLEDGEMENT
ABSTRACT
Table OF Contents
Chapter 1 INTRODUCTION
1. Introduction
2. Project Summary
3. Purpose
4. Existing System
5. Proposed System
6. Features
Chapter 2 Project Management
1. Project Planning and scheduling
2. Project Development Approach
3. Project Plan
Chapter 3 System Requirements Study
1. User Characteristics
2. Hardware and Software

Requirements 3. Constraints
Chapter 4 About The Project
1. Implementation Details
2. Program
3. About The Project Website
Chapter 6 Applications
Chapter 7 Conclusion
Chapter 8 Bibliography
CHAPTER 1 Introduction
Expense Tracker is a refined system which allows user to efficiently manage his/her
expenses with ease. Tracking expenses daily can really help us to save a lot of money.
Once we start of by tracking our expenses each day, we will be able to get a better idea
about where you are spending your money, so you stay in control and achieve your goal.
It will generate our expense and from that we can calculate savings ourselves. It will let
you add the savings amount, which you had saved for some particular Festivals or days
like Birthday or Anniversary. Try to explore the app and see what you will do to properly
manage your daily expenses.
1.2 Project Summary
The Expense Tracker is created in a HTML web browser that uses CSS and
JavaScript to give user a great interactive experience when using it. The app can be
used through any web browser that only contains buttons and textboxes. The user can
enter any amount of expenses in order to calculate the total amount of expense. The
user can either input a (positive number will be treated as a saving, negative number
will be treated as expense). Try to explore the app and see what you will do to properly
manage your daily expenses. The Expense Tracker was built by using basic JavaScript
coding structure that can be easily understand by beginners to improve their coding
techniques.
1.3 Purpose
The purpose of integration testing is to verify functional, performance, and

reliability requirements placed on major design items. These “design items”, i.e.,
assemblages (or groups of units), are exercised through their interfaces using black-box
testing, success and error cases being simulated via appropriate parameter and data
inputs. Simulated usage of shared data areas and inter-process communication is tested
and individual subsystems are exercised through their input interface. Test cases are
constructed to test whether all the components within assemblages interact correctly, for
example across procedure calls or process activations, and this is done after testing
individual modules, i.e., unit testing. The overall idea is a “building block” approach, in
which verified assemblages are added to a verified base which is then used to support the
integration testing of further assemblages. Software integration testing is performed
according to the software development life cycle (SDLC) after module and functional
tests. The cross-dependencies for software integration testing are: schedule for
integration testing, strategy and selection of the tools used for integration, define the
cyclomatic complexity of the software and software architecture, reusability of modules
and life-cycle and versioning management. Some different types of integration testing are
big-bang, top-down, and bottom-up, mixed (sandwich) and risky-hardest. Other
Integration Patterns [2] are: collaboration integration, backbone integration, layer
integration, client-server integration, distributed services integration and high-frequency
integration.
1.4 Existing System
In existing, we need to maintain the Excel sheets, CSV etc. files for the user daily and
monthly expenses. In existing, there is no as such complete solution to keep a track of its
daily expenditure easily. To do so a person as to keep a log in a diary or in a computer,
also all the calculations needs to be done by the user which may sometimes results in
errors leading to losses.
1.5 Proposed System
To reduce manual calculations, we propose an application which is developed by

Android. This application allows users to maintain a digital automated diary. Each user
will be required to register on the system at registration time, the user will be provided
id, which will be used to maintain the record of each unique user. Expense Tracker
application which will keep a track of Income-Expense of a user on a day-to-day basis.
This application takes Income from user and divides in daily expense allowed. If u
exceed that day’s expense it will cut if from your income and give new daily expense
allowed amount, and if that day’s expense is less, it will add it in savings. Expense
tracking application will generate report at the end of month to show Income-Expense
via multiple graphs. It will let you add the savings amount which you had saved for some
particular Festivals or day like Birthday or Anniversary.
1.6 Features
 Basic GUI
 The project contains basic UI such as buttons and textboxes.
 Auto Calculations
 This project uses an automatic feature that automatically calculate your inputted
number.
 User-friendly Interface
 This project is designed in a simple user-friendly interface web application so
that your easily modified .
CHAPTER 2. 0 Project management
In this chapter we will discuss about project planning and scheduling. Our goal is to establish
a pragmatic strategy for controlling, tracking, and monitoring a complex technical project.
In project management following things must be done.
1.5.1 Project Planning and Scheduling

1.5.2 Risk Management
1.5.3 Estimation
In Project planning and scheduling, planning of the project is done. In scheduling different
task are schedule according to the deadline of the project.
1. Project Planning and scheduling
Project planning must deal with the following things.
 Project Complexity: - Project complexity has a strong effect but is heavily influenced by
past practitioner experience.
 Project Size: - As size increases the interdependency of elements also grow. Watch
out for scope creep.
 The degree of structural uncertainty: - the degree to which requirements are solidified
and the ease of functional decomposition. The purpose of project planning is to ensure
that the end result is completed on time, within budget, and exhibits quality!
2.2 Project development approach
The waterfall model was selected as the model due to the following reasons:
 Requirements were very well documented, clear and fixed.
 Technology was adequately understood.
 Simple and easy to understand and use.
 There were no ambiguous requirements.
 Easy to manage due to the rigidity of the model. Each phase has specific deliverables and a review
process.
 Clearly defined stages.

 Well understood milestones. Easy to arrange tasks.
2.3 Project Plan
Stages of Software Lifecycle
 Software Requirement Analysis
This is the first stage of the project, which involves interaction with the customer to understand
his/her needs, requirements, information, required functions, performance and interfacing in
MLM software. For this purpose requirement analyst will arrange a meeting for gathering
information and additional details for software development. After completing requirement
gathering tasks developer team will take a look for understand how requirements can be
computerized. The requirement is documented in the form of a Software Requirement
Specification (SRS) which is then presented to the customer for review.
 Design
Beginning once software requirements have been analyzed and specified, software design is the
first of three technical activities – design, code generation, and test – that are required to build
and verify the software.
Design is multi-level process which defines following details:
 Data Design
 Architecture Design
 Interface Design
 Component level Design
 Development
The design must be translated into a machine-readable form. The coding step performs this task.
In this stage, the developers will actually code the programs. The specifications arrived at the
design stage for each and every function will be converted to code using tools that are finalized
for the implementation of the Software. At this stage the testing methodology to be adopted will
be finalized. For each program test cases will be prepared and for each of these test cases, test
data will also be prepared. The actual developers will do a first cur checking at this stage to see
that the programs written by them are error free.
 Testing
In these stages the test group of the development team, using the cases and the test data already
prepared will test the programs. Only after all the functions are tested singularly, an integrated
testing will be performed to see that inter- function dependability is satisfied. Separate test
cases and test data will be worked out for the integrated testing.
 Acceptance Test
This round of testing will be performed by the test group formed by the users of MLM software.
This test group has to ensure that the developed software is working as per their requirements. If
some problems are found then it should be immediately communicated Development group so
that the problem can be looked into and hence rectified.
 Data Creation
For software, data is most important part. Data is information which is handled by software. So
before coding software, all master table data will have to be created.
 Implementation
Now the implementation of software is to be done by programmers. All the requirements and
information gathered by the analyst is now take actual image in form of software. After
making software it is uploaded in to the system so users, for whom software is developed,
can use the software.
CHAPTER 3.0 System Requirements Study
3.1 User Characteristics
There are 4 types of users dealing with the system.
User A? Administrator
Administrator: Admin is having all the rights on the application.
User B? Employee
Employee: Employee of the company is one of the 4 users of this project
User C? Anonymous User
Anonymous User: Anyone who visits website. And any person applying for the posted job on
the website.
User D? Client
Client: This is the registered user. Who come to know about his/her project’s progress?
3.2 Hardware and Software Requirement:
Hardware Specification:
Processor : Intel Dual based
system Processor Speed : 1GHz to 2 GHz
RAM : 256MB to 512 MB
Hard Disk : 4 GB to 30 GB
Keyboard : 104 keys

Software Specification:
Language : Python 3.7
Database : Microsoft SQL Server
5.7.24.0 Operating System: Windows 7/8/8.1/10
RAM : 512 MB
3.3 Constraints:
General Constraints
1) This system will not take care of any virus problem that might occur on the computer with
which it is installed. Avoiding the use of pirated/illegal software and ensuring that floppies and
other removable media are scanned for viruses before use could minimize the possibility of viral
infection.
2) Recovery of data after a system crash will be possible only if backups are taken at
regular intervals.
3) Manual interfaces cannot be fully avoided. Documented proofs like dates etc. will have to
be verified by the concerned staff before entering it into the computerized system
Hardware Constraints
The performance of the system will be dependent on the machine conditions. The primary
memory (RAM) and the secondary memory (Hard Disk Space) requirement of the system will
be the same as that required by the normal application and the operating system. And the space
required storing the data. The space required to store the data would increase as more and more
records are added to the system.
Assumptions and Dependencies
a. It is assumed that the user is familiar with the basic computer fundamentals.
b. Timely backup of data should be taken to avoid data loss in case of system crash.
c. Floppies and other removable media should be scanned for viruses before use.
d.It is assumed that the maintenance of the database will be assigned to the authorized
person only.
e. Only authorized persons will be allowed inside the system

CHAPTER 5.0 ABOUT THE PROJECT
5.1 Implementation Details
HTML
Hypertext Markup Language (HTML) is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as
Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers
receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like HTML.CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript.CSS is designed to
enable the separation of presentation and content, including layout, colours, and fonts. This
separation can improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .CSS file, and reduce complexity and repetition in the
structural content.
One of the goals of CSS is to allow users greater control over presentation. Someone who finds
red italic headings difficult to read may apply a different style sheet. Depending on the browser
and the web site, a user may choose from various style sheets provided by the designers, or may
remove all added styles and view the site using the browser's default styling, or may override
just the red italic heading style without altering other attributes.
JavaScript
JavaScript s a high-level, interpreted scripting language that conforms to the

ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing,
prototype-based object-orientation, and first-class functions. Alongside HTML and CSS,
JavaScript is one of the core technologies of the World Wide Web. JavaScript enables
interactive web pages and is an essential part of web applications. The vast majority of
websites use it, and major web browsers have a dedicated JavaScript engine to execute it.
As a multi-paradigm language, JavaScript supports event-driven, functional, and
imperative (including object-oriented and prototype-based) programming styles. It has
APIs for working with text, arrays, dates, regular expressions, and the DOM, but the
language itself does not include any I/O, such as networking, storage, or graphics
facilities. It relies upon the host environment in which it is embedded to provide these
features.
5.2 PROGRAM
Create a folder called expense-tracker as the project workspace and we will create all the project
files inside this folder.
1. index.html
Let's create index.html and add the following code to it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>

<link rel="stylesheet" href="animate.css" />
<link rel="stylesheet" href="./magic-master/dist/magic.min.css" />

<link rel="stylesheet" href="./style.css" />
<title>EXPENSE TRACKER</title>
</head>
<body>
<div class="main-container">


<div class="get-data">
<div class="get-data-flex">
<select class="get-data-element select-box" name="" id="">
<option value="inc" selected>+</option>
<option value="exp">-</option>
</select>
<input class="get-data-element des-box" type="text"

placeholder="Description" />
<input class="get-data-element value-box" type="number"

placeholder="Amount" />
<button class="get-data-element add-btn">

<i class="fa fa-plus-circle" style="padding: 2px;"></i>Add
</button>
</div>
</div>


<div class="income-box log">
<h1 class="all-income-h1" style="color: #26ae60;">
<center>All INCOMES</center>
</h1>
<div class="ie-flex income-container">

</div>
</div>


<div class="show-data">
<i class="fa fa-calendar"></i>
<h4 class="date">April 1, 2020</h4>
<div class="cd calculated-income magictime swap">

<h2>INCOME <i class="fa fa-smile-o"></i></h2>
<h3 class="total-income">0</h3>
</div>
<div class="cd amount-left magictime slideDownReturn">

<i class="fa fa-money fa-2x"></i>
<h2>MONEY LEFT</i>
<h2 class="money-left">0</h2>
</div>
<div class="cd calculated-expense magictime swap">

<h2>EXPENSE <i class="fa fa-frown-o"></i></h2>
<h3 class="total-expense">0<h3>
<span class="small-percentage-show-a total-exp-per">0</span>
</div>
</div>


<div class="expense-box log">
<h1 class="all-expense-h1" style="color: #BA2F16;">
<center>All EXPENSES</center>
</h1>
<div class="ie-flex expense-container">

</div>
</div>
</div>

<script src="./script.js"></script>
</body>
</html>
2. script.js
Let's create a JavaScript file named script.js and add the following JavaScript code to it
//control the budget
var budgetController = (function () {
/*make constructors to create instances of

all income and expense as objects*/
//expenses constructor
function Expenses(id, description, value) {
this.id = id;
this.desc = description;
this.val = value;
this.percentage = -1;
}
Expenses.prototype.calcPercentage = function (totalIncome) {

if (totalIncome > 0) {
this.percentage = Math.round((this.val / totalIncome) * 100);
} else {
this.percentage = -1;
}
}
Expenses.prototype.getPercentage = function () {
return this.percentage;
}
//ncomes constructor
function Incomes(id, description, value) {
this.id = id;
this.desc = description;
this.val = value;
}
//create a data structure to hold all data

var data = {
allIncExp: {
inc: [],
exp: []
},
totals: {
inc: 0,
exp: 0
},
budget: 0,
percentage: -1
};
function calculateTotal(type) {
var sum = 0
data.allIncExp[type].forEach(function (val) {
sum += val.val;
});
data.totals[type] = sum;
}
return {
generateItem: function (type, desc, val) {
var addItem, ID; //id would be last element + 1
if (data.allIncExp[type].length > 0) {
ID = data.allIncExp[type][data.allIncExp[type].length - 1].id + 1;
} else {
ID = 0;
}
if (type === 'inc') {

addItem = new Incomes(ID, desc, val)
} else if (type === 'exp') {

addItem = new Expenses(ID, desc, val);
}
data.allIncExp[type].push(addItem);
return addItem;
},
//to delete an item from the data structure

deleteItem: function (type, id) {
//get the id no. of the item want to dete then find its place in data structure,
then delete it
var index;
var ids = data.allIncExp[type].map(function (curr) {
return curr.id;
});
index = ids.indexOf(id);
if (index != -1) {
data.allIncExp[type].splice(index, 1);
}
},
calculatePercentages: function () {
data.allIncExp.exp.forEach(function (curr) {
curr.calcPercentage(data.totals.inc);
});
},
getPercentages: function () {
var allPerc = data.allIncExp.exp.map(function (curr) {
return curr.getPercentage();
});
return allPerc;
},
calculateBudget: function () {
// calculate total income and total expense
calculateTotal('inc');
calculateTotal('exp');
// calculate the actual budget, income - expense

data.budget = data.totals.inc - data.totals.exp;
// calculate the percentage, of income that we spent in form of expenses

if (data.totals.inc > 0) {
data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100);
} else {
data.percentage = -1
}
},
//Return the values of our data structure for our update budget function
getBudget: function () {
return {
actualBudget: data.budget,
totalIncome: data.totals.inc,
totalExpense: data.totals.exp,
percentage: data.percentage
}
},
// test: function () {
// return data;
// }
}
})();
//control the UI
var UIController = (function () {
var getDataClasses = {
type: ".select-box",
description: ".des-box",
value: ".value-box",
addBtn: ".add-btn",
incomeContainer: '.income-container',
expenseContainer: '.expense-container',
moneyLeft: '.money-left',
totalIncome: '.total-income',
totalExpense: '.total-expense',
totalExpPer: '.total-exp-per',
mainContainer: '.main-container',
smallPerShow: '.small-percentage-show',
date: '.date'
};
return {
//getting data of all fields in object properties
inputData: function () {
return {
type: document.querySelector(getDataClasses.type).value,
description: document.querySelector(getDataClasses.description).value,
value: parseFloat(document.querySelector(getDataClasses.value).value)
}; //make public methods to use in other modules
},
dataClasses: function () {
return getDataClasses;
},
addListItems: function (obj, type) {
var html, htmlElement;

if (type === 'inc') {
htmlElement = getDataClasses.incomeContainer;
html =
`<div class="ie-bar magictime boingInUp" id = "inc-${obj.id}">
<span class="ie-sno">${obj.id + 1}.</span>
<h3 class="ie-bar-des">${obj.desc}</h3>
<h4 class="ie-value">${obj.val}</h4>
<span class="ie-cross-btn"><i class="fa fa-times-circle" style="padding:
2px;"></i></span>
</div>`;
} else if (type === 'exp') {

htmlElement = getDataClasses.expenseContainer;
html =
`<div class="ie-bar magictime boingInUp expense-only" id ="exp-${obj.id}">
<span class="ie-sno">${obj.id + 1}.</span>
<h3 class="ie-bar-des">${obj.desc}</h3>
<span class="small-percentage-show">20%</span>
<h4 class="ie-value">${obj.val}</h4>
<span class="ie-cross-btn"><i class="fa fa-times-circle" style="padding:
2px;"></i></span>
</div>`;
}
document.querySelector(htmlElement).insertAdjacentHTML('beforeend', html);
//clear the input fields:

var fieldData = document.querySelectorAll(`${getDataClasses.description},$
{getDataClasses.value}`);
fieldData.forEach(element => {
element.value = '';
});
fieldData[0].focus();
},
displayBudget: function (obj) {

document.querySelector(getDataClasses.moneyLeft).textContent = obj.actualBudget;
document.querySelector(getDataClasses.totalIncome).textContent = "+ " +
obj.totalIncome;
document.querySelector(getDataClasses.totalExpense).textContent = "- " +
obj.totalExpense;
if (obj.percentage > 0) {
document.querySelector(getDataClasses.totalExpPer).textContent = obj.percentage +
" %";
} else {
document.querySelector(getDataClasses.totalExpPer).textContent = "--";
}
},
displayPercentages: function (percArr) { //array of individual percentages
var perTags = document.querySelectorAll(getDataClasses.smallPerShow);

var nodeForEach = function (list, callback) {
for (var i = 0; i < list.length; i++) {
callback(list[i], i);
}
}
nodeForEach(perTags, function (current, index) {

// console.log(percArr[index]);
if (percArr[index] > 0) {
current.innerHTML = percArr[index] + " %";
} else {
current.innerHTML = "---";
}
});
},
delListItem: function (selectorID) {
var el = document.getElementById(selectorID);
el.parentNode.removeChild(el);
},
displayDate: function () {
var dateElement = document.querySelector(getDataClasses.date);
var allMonths = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];
var date = new Date();
var month = date.getMonth();
month = allMonths[month];
var year = date.getFullYear();
dateElement.textContent = `${month}, ${year}`;
}
};
})();
//trigger all actions

var trigger = (function (budgetCtrl, UICtrl) {
var eventHandler = function () {

//store the passed data of class names of UI elements
var dataCl = UICtrl.dataClasses();
document.querySelector(dataCl.addBtn)
.addEventListener("click", triggerCtrl);
document.addEventListener("keypress", function (e) {

if (e.keyCode === 13 || e.which === 13) {
triggerCtrl();
}
});
document.querySelector(dataCl.mainContainer).addEventListener('click',
ctrlDeleteItem)
};
function updateBudget() {
// 1. Calculate the budget.
budgetCtrl.calculateBudget();
// 2. Return the budget

var budget = budgetCtrl.getBudget();
// 3. Update the budget in UI

UICtrl.displayBudget(budget);
}
function updatePercentages() {
// calculate percentages
budgetCtrl.calculatePercentages();
//read the percentages from the budget controller

var percArr = budgetCtrl.getPercentages();
//update the percentages on UI

UICtrl.displayPercentages(percArr);
}
function ctrlDeleteItem(event) {
var getElemetID = event.target.parentNode.parentNode.id;
var splittedID = getElemetID.split('-');
var type = splittedID[0];
var ID = parseInt(splittedID[1]);
//delete item from data structure

budgetCtrl.deleteItem(type, ID);
//delete item from the UI

UICtrl.delListItem(getElemetID);
//show the updated budget
updateBudget();
// update percentages of all expenses after deleting any income
updatePercentages();
}
var triggerCtrl = function () {
// 1. Get the data from the input field.

var inputValues = UICtrl.inputData();
//check either the fields are empty or have data

if (inputValues.description != "" && !isNaN(inputValues.value) && inputValues.value >
0) {
// 2. Add data to the budget controller.
var newItem = budgetCtrl.
generateItem(inputValues.type, inputValues.description, inputValues.value);
// 3. Add new item to the UI.
UICtrl.addListItems(newItem, inputValues.type);
//4. Update the budget
updateBudget();
//5. show updated percentages
updatePercentages();
}
};
return {
init: function () {
UICtrl.displayDate();
eventHandler();
}
}
})(budgetController, UIController);
//to initialize our application.

trigger.init();
3 style.css
Let's create a CSS file named style.css and add the following CSS code to it
/* Montserrat And Lato */

@import url("https://fonts.googleapis.com/css2?
family=Lato&family=Montserrat&display=swap");
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Lato', sans-serif; */
/* some universal properties */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
.main-container {
width: 80%;
height: 80vh;
border-radius: 6px;
box-shadow: 0px 2px 11px -1px rgb(97, 108, 111);
display: grid;
grid-template-rows: 15% 85%;
grid-template-columns: 35% 30% 35%;
padding: 1%;
}
/* [start] All CSS of container of getting input from user */
.get-data {
height: 80px;
grid-column: 1/-1;
}
.get-data-flex {
height: inherit;
display: flex;
}
.get-data-element {
padding: 1%;
border: none;
}
.des-box {
width: 40%;
background-color: #dae0e2;
border: 1px solid #dae0e2;
outline: none;
}
.des-box::placeholder,
.value-box::placeholder {
font-size: 0.8em;
}
.add-btn {
width: 10%;
border-radius: 0px 10px 0px;
background: rgb(97, 108, 111);
background: linear-gradient(90deg,
rgba(97, 108, 111, 1) 0%,
rgba(44, 51, 53, 1) 39%);
color: whitesmoke;
font-size: 0.8em;
font-weight: 600;
outline: none;
cursor: pointer;
}
.value-box {
width: 10%;
background-color: rgb(230, 234, 235);
border: 1px solid rgb(230, 234, 235);
outline: none;
}
.select-box {
border-radius: 10px 0px 0px 10px;
rgba(44, 51, 53, 1) 37%,
rgba(97, 108, 111, 1) 100%);
color: whitesmoke;
outline: none;
cursor: pointer;
}
option {
color: black;
}
/* [End] All CSS of container of getting input from user */
/* these styles are just to visible layout */

/* .show-data {

}
.income-box {
.expense-box {

} */
/* --------------------------------------- */
/* [START] All CSS for showing calculated data */

.show-data {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.show-data * {
/* border: 1px solid black; */
text-align: center;
border: none;
}
.cd {
padding: 10%;
width: 80%;
/* border: 1px solid grey; */
border-radius: 6px;
}
.calculated-income {
color: white;
text-shadow: 0px 2px 3px #616c6f;
font-family: "Lato", sans-serif;
font-size: 0.8em;
}
.calculated-expense {
color: white;
font-size: 0.8em;
}
.small-percentage-show {
font-size: 0.5em;
font-weight: 600;
border-radius: 4px;
opacity: 0.5;
color: black;
}
.small-percentage-show-a {
font-size: 0.5em;
font-weight: 600;
border-radius: 4px;
opacity: 0.5;
color: black;
}
.amount-left {
color: white;
}
.date {
}
/* [END] All CSS for showing calculated data */
/* [START] All CSS for income list and expense list */

.ie-flex {
display: flex;
width: 100%;
/* height: 85%; */
/* margin: 2%;
padding: 50px; */
/* overflow: scroll; */
}
.log {
overflow: scroll;
}
/* .income-box * {
} */
.ie-bar {
margin: 1%;
display: flex;
width: 100%;
justify-content: space-between;
padding: 4%;
border-radius: 6px;
box-shadow: 0px 2px 3px #616c6f;
rgba(2, 108, 47, 1) 8%,
rgba(46, 204, 114, 1) 62%);
color: white;
}
.ie-bar-des {
flex-grow: 2;
max-width: inherit;
overflow: hidden;
font-size: 0.8em;
}
.ie-value,
.ie-sno {
font-size: 0.8em;
}
.ie-cross-btn {
cursor: pointer;
}
.expense-only {
rgba(186, 47, 22, 1) 32%,
rgba(228, 66, 54, 1) 53%);
}
.developer {
font-family: "Montserrat", sans-serif;
text-align: center;
margin-top: 5px;
color: #616c6f;
font-size: 0.6em;
/* Media Queries */
@media (max-width: 768px) {
.all-income-h1,
.all-expense-h1 {
font-size: 0.9em;
}
.calculated-income,
.calculated-expense {
font-size: 0.6em;
}
}
@media (max-width: 425px) {

.main-container {
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 1fr;
/* overflow: scroll; */
}
.show-data {
grid-row: 2/3;
}
.get-data-flex {
padding: 15%;
}
.get-data-element {
width: 85%;
border-radius: 4px;
text-align: center;
margin: 2px;
}
.show-data {
margin-top: 38px;
}
.amount-left {
font-size: 0.8em;
}
.ie-bar {
margin: 2%;
}
.main-container {
width: 100%;
height: 100vh;
border: none;
box-shadow: none;
}
.log {
height: 30vh;
overflow: scroll;
margin-top: 5%;
}
.cd {
padding: 4%;
}
/* Media query for Landscape mode of all devices is not included */

}
5.3 About The Project Website
Open index.html in browser

Let's open the index.html file in the browser and you will be able to see the following screen:
This project is simple user-friendly interface web application. Now

to start with, we have a description box at the top of our web page.
The left side of the box contains a ‘+’ sign and an arrow pointing
down . If we are adding a description while the ‘+’ sign being there,
the description will be considered as a part of income and will get
added into the “All INCOMES” Box present on the left part of our
page. Now if we click on the arrow pointing downwards we also see a
‘-‘ sign which indicates expenses. Similarly, if we are adding a
description while the ‘-’ sign being there, the description will be
considered as a part of expense and will get added into the “All
EXPENSES” Box present on the right part of our page.
The middle part of our website contains a column consisting three
boxes comprising of INCOME (blue color box) where our total income is
seen, MONEY LEFT (yellow color box) where the total money left after all
the expenditure is seen and EXPENSE (pink color box) where total
money spent till date can be seen. The percentage of expenses out of
total income is also given below the amount of expenses. All the income
descriptions are present in the All INCOMES column highlighted in
green and all the expenses are present in the All EXPENSES column
highlighted in red. The percentage the expense took out of total income
is also given.
Below is a practical implementation of the project.
CHAPTER 6.0 APPLICATIONS
 Tracking remodelling expenses. For example, a kitchen remodel project (see reference
below).
 Track improvement and maintenance costs on your house or properties.
 Track your small business expenses, and stay within your budget.
 Track project expenses for small to medium-scale projects that also require budget
tracking
 This system helps house wives to reduce their expenses.
 Easy to use
 You’ll have better insight into your spending habits
 provides a better overview and comprehensive analysis

CHAPTER 7.0 Conclusion
After making this application we assure that this application will help its users to manage
the cost of their daily expenditure. It will guide them and aware them about their daily
expenses. It will prove to be helpful for the people who are frustrated with their daily
budget management, irritated because of amount of expenses and wishes to manage
money and to preserve the record of their daily cost which may be useful to change their
way of spending money. In short, this application will help its users to overcome the
wastage of money.
CHAPTER 8.0 BIBLIOGRAPHY
 https://www.tutorialspoint.com/index.html
 https://www.javatpoint.com
 https://www.w3schools.com
 https://html.com

EXPENSE TRACKER REPORT (GRP 32)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EXPENSE TRACKER REPORT (GRP 32)

Uploaded by

Copyright:

Available Formats

REPORT

OF THE PROJECT ENTITLED

SECOND YEAR ENGINEERING

SAVITRIBAI PHULE PUNE UNIVERSITY

Pereira Moses Joseph COSB31

Honrao Shivam Sanjay COSB71

Pinto Aaryan Dennis COSB35

Kudale Sourabh Anil COSA71

Under the Guidance of

Prof. Deepika Falak (mam)

Department of SECOND YEAR ENGINEERING

This is to certify that the seminar report

Pereira Moses Joseph COSB31

Honrao Shivam Sanjay C0SB71

Pinto Aaryan Dennis COSB35

Kudale Sourabh Anil COSA71

Of Class Second Year Computer Engineering (2021-22) have successfully completed

Mrs. Deepika Phalak Mr. S.N.Shelke Dr.Kishor P.Patil

Chapter 2 Project Management

1. Project Planning and scheduling

2. Project Development Approach

Chapter 3 System Requirements Study

2. Hardware and Software

The purpose of integration testing is to verify functional, performance, and

1.5 Proposed System

To reduce manual calculations, we propose an application which is developed by

In project management following things must be done.

1.5.1 Project Planning and Scheduling

1. Project Planning and scheduling

Project planning must deal with the following things.

 Requirements were very well documented, clear and fixed.

 Technology was adequately understood.

 Simple and easy to understand and use.

 There were no ambiguous requirements.

 Clearly defined stages.

 Software Requirement Analysis

Design is multi-level process which defines following details:

3.1 User Characteristics

There are 4 types of users dealing with the system.

Employee: Employee of the company is one of the 4 users of this project

User C? Anonymous User

3.2 Hardware and Software Requirement:

Processor : Intel Dual based

system Processor Speed : 1GHz to 2 GHz

RAM : 256MB to 512 MB

Keyboard : 104 keys

Language : Python 3.7

Database : Microsoft SQL Server

5.7.24.0 Operating System: Windows 7/8/8.1/10

e. Only authorized persons will be allowed inside the system

5.1 Implementation Details

JavaScript s a high-level, interpreted scripting language that conforms to the

<input class="get-data-element des-box" type="text"

<input class="get-data-element value-box" type="number"

<button class="get-data-element add-btn">

<div class="ie-flex income-container">

<!-- <div class="ie-bar">

<div class="cd calculated-income magictime swap">

<div class="cd amount-left magictime slideDownReturn">