A

Micro Project Report

on
Expense Tracker System using Js

Submitted by
Arpita Kailas Lengare
Snehal Aambadas Zurde

Under the Guidance of

Prof. V.B. Ohol

In the Partial Fulfilment of Fifth Semester of Diploma in

Computer Engineering

Department of Computer Engineering

Sandip Polytechnic
Mahiravani, Nashik - 422213

Affiliated to

Maharashtra State
Board of Technical Education

Academic Year -24

 Maharashtra State
Board of Technical Education

Certificate

This is to certify that Mr./Ms. Tanishka Pramod Patil with Roll No-57 has successfully completed Micro-project in
course 22519 - Client Side Scripting Language for the academic year -24 as prescribed in the 'Assessment
Manual'during his/her tenure of completing Fifth Semester of Diploma Programme in Computer Engineering
from institute, Sandip Polytechnic with institute code 1167.

Place:Nashik Enrollment No:2111670150

Date: / / Exam Seat No:

Course Teacher Head of the Department Head of the Institute

 Maharashtra State
Board of Technical Education

Certificate

This is to certify that Mr./Ms. Pranjal Bhimrao Salve with Roll No-62 has successfully completed Micro-project
in course 22519 - Client Side Scripting Language for the academic year -24 as prescribed in the 'Assessment
Manual'during his/her tenure of completing Fifth Semester of Diploma Programme in Computer Engineering
from institute, Sandip Polytechnic with institute code 1167.

Place:Nashik Enrollment No:2111670135

Date: / / Exam Seat No:

Course Teacher Head of the Department Head of the Institute

 Annexure – I

Micro Project Proposal

Expense tracker system
1.0 Aims/Benefits of the Micro-Project:
To design and create web page of an Expense Tracker System using js

2.0 Course Outcomes Addressed:

a) Create interactive web pages using program flow control structure.
b) Implement Arrays and functions in JavaScript.
c) Create event based web forms using JavaScript.
d) Use JavaScript for handling cookies.
e) Creative interactive webpage using regular expression for validations.
f) Create Menus and navigations in web pages.

3.0 Proposed Methodology:

1.Collect information through different sources

2. Analysis of data.

3. Compilation of collected data.

4.0 Action Plan:

Planned Planned Name of Responsible Team

SrNo Details of Activity
Start Date Finish Date Members
1 Topic Discussion & Selection 24/07/2023 28/07/2023

2 Review of Literature 24/07/2023 28/07/2023

3 Aim/Benefits& Importance 31/07/2023 04/08/2023

4 Resources Required 31/07/2023 04/08/2023

5 Analysis of Collected Data 07/08/2023 011/08/2023

1. Arpita Kailas Lengare
6 Design of System 21/08/2023 25/08/2023 2. Snehal Aamabadas Zurde

7 Coding & Testing of Modules 28/08/2023 02/09/2023

8 Coding & Testing of Modules 04/09/2023 09/09/2023

9 Coding & Testing of Modules 11/09/2023 16/09/2023

10 Integration of System Modules 18/09/2023 23/09/2023

 11 Testing of System 25/09/2023 20/09/2023

12 Compilation of Report 03/10/2023 07/10/2023

13 Compilation of Presentation 10/07/2023 14/10/2023

14 Presentation of Seminar 17/07/2023 21/10/2023

15 Final Submission 25/07/2023 28/10/2023

5.0 Resources Required:

SrNo Name of Resource/Material Specification Qty. Remarks
1 Hardware Resource Laptop 2 GB Ram 1
2 Software Resource Notepad 1
3 Any Other Resource - -
Name of Team Members with Roll Nos:

Roll No Name of Team Members

59 Arpita Kailas Lengare

63 Snehal Aamabadas Zurde

Name & Signature of Course Teacher

(Prof. V.B.Ohol)
 Annexure – II

Micro Project Report

1.0 Aims/Benefits of the Micro-Project:
To design and create web page of an expense tracker system using js The aim is to help the student to
attain the following industry identified competency through various teaching learning experiences
2.0 Course Outcomes Achieved:
a. Create interactive web pages using program flow control structure.
b. Implement Arrays and functions in JavaScript.
c. Create event based web forms using JavaScript.
d. Use JavaScript for handling cookies.
e. Creative interactive webpage using regular expression for validations.
f. Create Menus and navigations in web pages.

3.0 Literature Review:

Discussion about topic with guide and among group members Information collection Compilation of content
Editing and revising content Report Preparation
4.0 Actual Methodology Followed:
CODE :-
HTML CODE
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="expense.css">
<script src="expense.js"></script>
<title>Expense Tracker</title>
</head>
<body>
<h2>Expense Tracker</h2>

<div class="container">
<h4>Your Balance</h4>
<h1 id="balance">₹0.00</h1>

<div class="inc-exp-container">
<div>
<h4>Income</h4>
<p id="money-plus" class="money plus">+₹0.00</p>
</div>
<div>
<h4>Expense</h4>
<p id="money-minus" class="money minus">-₹0.00</p>
</div>
</div>
 <h3>History</h3>
<ul id="list" class="list">
</ul>

<h3>Add new transaction</h3>

<form id="form">
<div class="form-control">
<label for="text">Text</label>
<input type="text" id="text" placeholder="Enter text..." /> </div>
<div class="form-control">
<label for="amount">Amount <br />
(negative - expense, positive - income)</label>
<input type="number" id="amount" placeholder="Enter amount..." />
</div>
<button class="btn">Add transaction</button>
</form>
</div>
</body>
</html>
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 {
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;
}

.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: #2ecc71;

}

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; 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: 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;
}
.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;

}
JS 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') const text =
document.getElementById('text')
const amount = document.getElementById('amount')

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 = ''
}
}

//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);

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);
5.0 Actual Resources Used:
Sr
Name of Resource/Material Specification Qty. Remarks
No
1 Hardware Resource Laptop 2GB Ram 1
2 Software Resource Notepad 1
3 Any Other Resource - -

Name & Signature of CourseTeacher

(Prof. V. B. Ohol)
 Annexure – IV

Micro Project Evaluation Sheet

Name of Student: Arpita Kailas Lengare Enrollment No:2111670138
Name of Programme: Computer Engineering Semester :V
Course Title: Client Side Scripting Language Course Code : 22519
Title of Micro Project: Expense Tracker System.
Learning Outcomes Achieved:
a. Create interactive web pages using program flow control structure.
b. Implement Arrays and functions in JavaScript.
c. Create event based web forms using JavaScript.
d. Use JavaScript for handling cookies.
e. Creative interactive webpage using regular expression for validations.
f. Create Menus and navigations in web pages.

Poor Average Good Excellent

Sr Sub
Characteristic to be Assessed Marks Marks Marks Marks
No Total
(1-3) (4-5) (6-8) (9-10)
(A) Process and Product Assessment (6 Marks)
1 Relevance to the Course
2 Literature Review/Information Collection
3 Completion of the Targetas per Project Proposal
4 Analysis of Data & Representation
5 Quality of Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva (4Marks)
7 Presentation
8 Viva

(A) (B)
Total Marks
Process and Product Assessment Individual Presentation/Viva
(10 Marks)
(6 Marks) (4 Marks)

Comments/Suggestions about Teamwork/Leadership/Inter-personal Communication(if any)

…………………………………..……………………………………………………………………………
Name &Designation of Course Teacher: Prof. V.B.Ohol, Lecturer

Dated Signature:
 Annexure – IV

Micro Project Evaluation Sheet

Name of Student: Snehal Aambadas Zurde Enrollment No:2111670161
Name of Programme: Computer Engineering Semester :V
Course Title: Client Side Scripting Language Course Code : 22519
Title of Micro Project: Expense Tracker System
Learning Outcomes Achieved:
a. Create interactive web pages using program flow control structure.
b. Implement Arrays and functions in JavaScript.
c. Create event based web forms using JavaScript.
d. Use JavaScript for handling cookies.
e. Creative interactive webpage using regular expression for validations.
f. Create Menus and navigations in web pages.

Poor Average Good Excellent

Sr Sub
Characteristic to be Assessed Marks Marks Marks Marks
No Total
(1-3) (4-5) (6-8) (9-10)
(A) Process and Product Assessment (6 Marks)
1 Relevance to the Course
2 Literature Review/Information Collection
3 Completion of the Targetas per Project Proposal
4 Analysis of Data & Representation
5 Quality of Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva (4Marks)
7 Presentation
8 Viva

(A) (B)
Total Marks
Process and Product Assessment Individual Presentation/Viva
(10 Marks)
(6 Marks) (4 Marks)

Comments/Suggestions about Teamwork/Leadership/Inter-personal Communication(if any)

…………………………………..……………………………………………………………………………
Name &Designation of Course Teacher: Prof. V.B.Ohol, Lecturer

Dated Signature: