Scribd
Upload
39 views

Webreport 1

The document provides an introduction, problem statement, and objectives for an expense tracker application. It summarizes that the application aims to digitally track daily expenses and incomes to replace traditional paper methods. This allows users to easily retrieve records, view expenses graphically, and make financial decisions. The application's objectives are to minimize manual data entry, provide secure access to transaction data, and help users plan future expenses.

Uploaded by

Tejashree Sathya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

Webreport 1

The document provides an introduction, problem statement, and objectives for an expense tracker application. It summarizes that the application aims to digitally track daily expenses and incomes to replace traditional paper methods. This allows users to easily retrieve records, view expenses graphically, and make financial decisions. The application's objectives are to minimize manual data entry, provide secure access to transaction data, and help users plan future expenses.

Uploaded by

Tejashree Sathya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Expense Tracker

CHAPTER 1
INTRODUCTION
1.1. DEF:
In life cycle of human after birth the need of materials and belongings is obvious. In
order to fulfill our needs and desire we buy goods. The rule of earth is that you must have
money in order to buy desired good. So in this way the process of earning and spending goes
on in our life.
People in order to track their expenses use traditional paper system to keep the record of their
income and expenditures. This type of traditional system is burdensome and takes more time.
So there must be a management system which must help us to manage our daily earnings and
expenses easily, and also helps us to analyze records efficiently. So we figured out a way to
eliminate the traditional system with digital, portable, easier and simple way to record these
data in just few clicks with our Android application called “Expense Tracker (ET)”.
1.2. PROBLEM STATEMENT:
Many organizations have their own system to record their income and expenses, which they
feel is the main key point of their business progress.It is good habit for a person to record
daily expenses and earning but due to unawareness and lack of proper applications to suit
their privacy, lacking decision making capacity people are using traditional note keeping
methods to do so. Due to lack of a complete tracking system, there is a constant overload to
rely on the daily entry of the expenditure and total estimation till the end of the month.

1.3. OBJECTIVES:
The aim and objective of the project is to fully manage and keep tracking the daily
expenditure. The following is the benefits that come with the Expense Tracker (ET):
 Minimize manual effort with daily record of expenditures and incomes.
 Immediate and easy retrieval of report.
 Secured and transparent data.
 Graphical overview of tranctions.
 Help in decision making with related results.
 Help in preparing wish list for pre planning your expenses.

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 1


Expense Tracker

CHAPTER 2
PROJECT DESIGN
2.1. REQUIRED TOOLS:
During the development of the system, we required various tools essential for the project. Our
projected could not have been completed without these tools. Here are some list of tools used
in the project.
HTML
 HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications
 HTML describes the structure of a Web page.. HTML consists of a series of elements
 HTML elements tell the browser how to display the content.. HTML , elements label
pieces of content such as “this is a heading”. “this is a paragraph” , “this is a link” , etc.
CSS
 CSS stands for Cascading Style Sheets ..CSS describes how HTML elements are to be
displayed on screen , paper ,or in other media ..
 CSS is used to define styles for our web pages , including the design , layout and
variations in display for different devices and screen sizes..
The word cascading means that a style applied to a parent element will also apply to all
children elements within the parent . So , if we set the color of the body text to “blue” , all
headings , paragraphs , and text elements within the body will also get the same color (unless
we specify something else)
CSS can be added to HTML , documents in 3 ways :.
 Inline – by using the style attribute inside HTML , elements. .
 Internal – by using a <style> element in the <head> section. .
 External – by using a <link> element to link to an external css file.
JavaScriptis
Java Sriptis a scripting language that enables you to create dynamically updating
content, control multimedia, animate images, and pretty much everything else. (Okay, not
everything, but it is amazing what you can achieve with a few lines of JavaScript code..
What is JavaScript doing on your page ?
Here we'll actually start looking at some code, and while doing so, explore what actually
happens when you run some JavaScript in your page.. Let's briefly recap the story of what
happens when you load a web page in a browser

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 2


Expense Tracker

When you load a web page in your browser, you are running your code (the HTML,CSS, and
JavaScript) inside an execution environment (the browser tab).This is like a factory that takes
in raw materials (the code) and outputs a product (the web page).

Fig.2.1:Block Diagram
Upon using this application user are provided with three options for data entry namely –
Income, Expense and wish list. If he/she selects income or expense he/she would be provided
with its types and sub types. For wish list only items can be inserted. These data would be
saved onto database according to their respective category.
The saved data can later be altered if the user wants to do so. Altering heremeans adding
description, changing wish list updating data etc. User canalso view the result. They can also
filter result to see the required content only.

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 3


Expense Tracker

CHAPTER 3
IMPLEMENTATION
3.1. DEF:
Understanding our spending habit is a challenging work unless we keep the proper
record of each and every transaction we perform. Expense Tracker (PET) is a way to analyze
our spending habit on certain time interval.ET is the easiest and most user friendly personal
finance Android application. The system attempts to free the user with as much as possible
the burden of manual calculation and to keep the track of the expenditure.Instead of keeping a
dairy or a log of the expenses on the smartphones or laptops, this system enables the user to
not just keep the track on the expenses but also to plan ahead keeping the past budget in mind.
The simple fact is, by tracking our expenses we will be able to stick to a budget and therefore
save money.
HTML CODE

JSS CODE
const balance = document.getElementById('balance');
const money_plus = document.getElementById('money-plus');
const money_minus = document.getElementById('money-minus');
const list = document.getElementById('list');
const form = document.getElementById('form');

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 4


Expense Tracker

const text = document.getElementById('text');


const amount = document.getElementById('amount');

// const dummyTransactions = [
// { id: 1, text: 'Flower', amount: -20 },
// { id: 2, text: 'Salary', amount: 300 },
// { id: 3, text: 'Book', amount: -10 },
// { id: 4, text: 'Camera', amount: 150 }
// ];
const localStorageTransactions = JSON.parse(
localStorage.getItem('transactions')
);
let transactions =
localStorage.getItem('transactions') !== null ? localStorageTransactions : [];

// Add transaction
function addTransaction(e) {
e.preventDefault();

if (text.value.trim() === '' || amount.value.trim() === '') {


alert('Please add a text and amount');
} else {
const transaction = {
id: generateID(),
text: text.value,
amount: +amount.value
};

transactions.push(transaction);
addTransactionDOM(transaction);
updateValues();
updateLocalStorage();
text.value = '';
amount.value = '';

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 5


Expense Tracker

}
}
// Generate random ID
function generateID() {
return Math.floor(Math.random() * 100000000);
}
// Add transactions to DOM list
function addTransactionDOM(transaction) {
// Get sign
const sign = transaction.amount < 0 ? '-' : '+';
const item = document.createElement('li');
// Add class based on value
item.classList.add(transaction.amount < 0 ? 'minus' : 'plus');
item.innerHTML = `
${transaction.text} <span>${sign}${Math.abs(
transaction.amount
)}</span> <button class="delete-btn" onclick="removeTransaction(${
transaction.id
})">x</button>
list.appendChild(item);
}
// Update the balance, income and expense
function updateValues() {
const amounts = transactions.map(transaction => transaction.amount);
const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
const income = amounts
.filter(item => item > 0)
.reduce((acc, item) => (acc += item), 0)
.toFixed(2);
const expense = (
amounts.filter(item => item < 0).reduce((acc, item) => (acc += item), 0) *
-1
).toFixed(2);

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 6


Expense Tracker

balance.innerText = `${total}`;
money_plus.innerText = `${income}`;
money_minus.innerText = `${expense}`;
}
// Remove transaction by ID
function removeTransaction(id) {
transactions = transactions.filter(transaction => transaction.id !== id);
updateLocalStorage();
init();
}
// Update local storage transactions
function updateLocalStorage() {
localStorage.setItem('transactions', JSON.stringify(transactions));
}
// Init app
function init() {
list.innerHTML = '';
transactions.forEach(addTransactionDOM);
updateValues();
}
init();
form.addEventListener('submit', addTransaction);
CSS CODE
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

:root {
--box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

*{
box-sizing: border-box;
}

body {

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 7


Expense Tracker

background-color: #f7f7f7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: 'Lato', sans-serif;
}
.container {
margin: 30px auto;
width: 350px;
}
h1 {
letter-spacing: 1px;
margin: 0;
}
h3 {
border-bottom: 1px solid #bbb;
padding-bottom: 10px;
margin: 40px 0 10px;
}
h4 {
margin: 0;
text-transform: uppercase;
}
.inc-exp-container {
background-color: #fff;
box-shadow: var(--box-shadow);
padding: 20px;
display: flex;
justify-content: space-between;
margin: 20px 0;
}

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 8


Expense Tracker

.inc-exp-container > div {


flex: 1;
text-align: center;
}
.inc-exp-container > div:first-of-type {
border-right: 1px solid #dedede;
}
.money {
font-size: 20px;
letter-spacing: 1px;
margin: 5px 0;
}
.money.plus {
color: #2ecc71;
}
.money.minus {
color: #c0392b;
}
label {
display: inline-block;
margin: 10px 0;
}
input[type='text'],
input[type='number'] {
border: 1px solid #dedede;
border-radius: 2px;
display: block;
font-size: 16px;
padding: 10px;
width: 100%;
}
.btn {
cursor: pointer;
background-color: #9c88ff;

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 9


Expense Tracker

box-shadow: var(--box-shadow);
color: #fff;
border: 0;
display: block;
font-size: 16px;
margin: 10px 0 30px;
padding: 10px;
width: 100%;
}
.btn:focus,
.delete-btn:focus {
outline: 0;
}
.list {
list-style-type: none;
padding: 0;
margin-bottom: 40px;
}
.list li {
background-color: #fff;
box-shadow: var(--box-shadow);
color: #333;
display: flex;
justify-content: space-between;
position: relative;
padding: 10px;
margin: 10px 0;
}
.list li.plus {
border-right: 5px solid #2ecc71;
}
.list li.minus {
border-right: 5px solid #c0392b;
}

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 10


Expense Tracker

.delete-btn {
cursor: pointer;
background-color: #e74c3c;
border: 0;
color: #fff;
font-size: 20px;
line-height: 20px;
padding: 2px 5px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.list li:hover .delete-btn {
opacity: 1;
}

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 11


Expense Tracker

CHAPTER 4
RESULTS AND DISCUSSION
4.1. RESULTS
First of all, we gained additional skills in the Java programming language.We also learned
about css and jss language and how it works. We also learned XML, a language we
didn't know at all earlier. Finally, this project allowed us to use SQLite skills acquired during
our studies. We have been able to complete our project according to our plan in the given
timeline.

4.2. LIMITATIONS
The project assists well to record the income and expenses in general.However, this project
has some limitations:
 The website is unable to maintain the backup of data.
 This website does not provide higher decision capability.

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 12


Expense Tracker

CHAPTER 5
CONCLUSION & FUTURE SCOPE
5.1. CONCLUSION
From this project, we are able to manage and keep tracking the daily expenses as
well as income. While making this project, we gained a lot of experience of working as a team.
We discovered various predicted and un predicted problems and we enjoyed a lot solving
them as a team. We adopted things like video tutorials, text tutorials, internet and learning
materials to make our project complete. Furthermore,now we know much more about the
Android platform, java language and the SQLite query.

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 13


Expense Tracker

Department of IS&E, SKIT, Bengaluru, [AY-(2022-23)] Page 14

You might also like