CSS MICROPROJECT

Computer Engineering (Vidyavardhini College of Engineering and

Technology)

Scan to open on Studocu

Downloaded by ARYAVARDHAN
Studocu is not sponsored or endorsed by any college or university

Downloaded by ARYAVARDHAN
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

VIDYAVARDHINI’S BHAUSAHEB VARTAK

POLYTECHNIC, VASAI ROAD WEST

MICRO PROJECT
Academic year: 2022-23

Title of Micro Project:

Expense Tracker Website

Program/Code: Computer Engineering (CO) Semester: FIFTH

Course/Code: CSS (22519)

Name: Dhruti Kamlesh Patil Roll No: 1841

Enrolment No.:2000930039

Name of Faculty: Prof. Parvez Vaghela

Downloaded by ARYAVARDHAN
 MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION

Certificate

This is to certify that Dhruti Kamlesh Patil

Roll No 1841 of FIFTH Semester of Diploma in of Computer Engineering (CO) Institute,
B.V. POLYTECHNIC (Code: 0093) has completed the Micro Project satisfactorily in
Subject – Client Side Scripting (22519) for the academic year 2022- 2023 as prescribed in
the curriculum.

Place: Vasai Enrolment No: 2000930039

Date: ……………………… Exam. Seat No: …………………………………….

Subject Teacher Head of the Department Principal

Seal of

Institution

Downloaded by ARYAVARDHAN
 Annexure - I

Part A: Micro Project Proposal

1.1 Aim/Benefits of the Micro-Project: Expense Tracker Website

2.1 Course Outcomes integrated:
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 validations.
f. Create Menus and navigations in web Pages.

3.1 Proposed Methodology:

1. Collect information through different sources
2. Analysis ofdata.
3. Compilationof collecteddata.

4.0 Action Plan

Sr. Planned Planned Name of

Details of the activity
No. Start date Finish date Members
1 Formation of Group & Topic Selection All members
2 Submission of Proposed Plan All members
3 Preparation of Report All members
4 Final valuation of a working Report All members
5 Presentation of Report All members
6 Submission of Final Report All members

5.0 Resource Required:

Sr.
No. Name of resources/Material Specifications Qty Remarks
Processor: i3
1. Computer 1
RAM: 4.00 GB
2. Microsoft Word Word -2016
3. Printer Hp Laser Jet 1
4. Book/ website name

Downloaded by ARYAVARDHAN
6.0 Name of Team Members with Roll No:

Process and Product Individual

Sr. Roll No Total
Name of Students Assessment Presentation
No. (06) (04) (10)

Krishna Patel
01 1840

02 1841 Dhruti Patil

03 1842 Anish Mhatre

Name & Signature of Faculty: Prof. Parvez Vaghela

Downloaded by ARYAVARDHAN
 Final Micro Project Report
Annexure- II

Title: Expense Tracker Website in JavaScript

1.0 Rationale: The aim is to help the student to attain the following industry identified competency
through various teaching learning experiences.

2.0 Course Outcomes Integrated:

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 validations.
f. Create Menus and navigations in web Pages.

3.0 Actual Procedure Followed.

1 Discussion about topic with guide and among group members
2 Information collection
3 Compilation of content
4 Editing and revising content
5 Report Preparation
4.0: Actual Resources Required:

Sr.
Name of resources/Material Specifications Qty Remarks
No.
Processor: i3
1. Computer 1
RAM: 4.00 GB
2. Microsoft Word Word -2016
3. Printer Hp Laser Jet 1
4. Book/Site name

7.0 Skill Developed/Learning outcomes of this Micro-Project

The following skills were developed:

1. Teamwork: Learned to work in a team and boost individual confidence.
2. Problem-Solving: Developed good problem-solving habits.
3. Technical Writing: Preparing the report of proposed plan and the final report.

Downloaded by ARYAVARDHAN
 Rubrics for Assessment of Micro-Project
Annexure - III

Title: Expense Tracker Website in JavaScript

Institute Code: 0093 Academic year: 2022-2023
Program: CO Course & Code: CSS (22519)
Name of Candidate: Dhruti Patil Roll No: 1841

Semester: FIFTH Name of Faculty: Prof. Parvez Waghela

Sr. Poor Average Good Excellent

Characteristic to be Assessed
No. (Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10)

1. Relevance to the Course

Literature Survey/Information
2.
Collection
3. Project Proposal
Completion of the Target as per
4.
Project Proposal
5. Analysis of Data and Representation
6. Quality of Prototype/Model
7. Report Preparation
8. Presentation
9. Viva

Downloaded by ARYAVARDHAN
 Annexure- IV

Micro-Project Evaluation Sheet

Title: Expense Tracker Website in JavaScript
Institute Code: 0093 Academic year: 2022-2023
Program: CO Course & Code: CSS (22519)
Name of Candidate: Dhruti Patil Roll No: 1841
Semester: FIFTH Name of Faculty: Prof.Parvez Vaghela

Evaluation as per Suggested Rubric for Assessment of Micro Project:

Sr. Characteristic to be Poor Average Good Marks Excellent Sub
No. assessed Marks Marks 4-5 6-8 Marks 9-10 Total
1-3
(A) Process and product assessment Out Of 6

1 Relevance to the course

2 Literature Survey .
Information Collection
3 Completion of the
Target as per project
proposal
4 Analysis of Data and
representation
5 Quality of
Prototype/Model/Conte
nt
6 Report Preparation
(B) Individual Presentation/Viva Out of 4
7 Presentation .
8 Viva

Name and designation of the Faculty Member: Mr. Parvez Vaghela

Downloaded by ARYAVARDHAN
Weekly Activity Sheet

Topic: Expense Tracker Website in JavaScript

Institute Code: 0093 Academic year: 2022-2023

Program: CO Course & Code: CSS (22519)

Name of Candidate: Dhruti Patil Roll No: 1841

Semester: FIFTH Name of Faculty: Prof. Parvez Vaghela

SR. NO WEEK ACTIVITY PERFORMED

1. 1st Week Discussion and Finalization of Topic

2. 2nd Week Literature Review
3. 3rd Week Submission of Proposed Plan
4 4th Week Information Collection
5. 5th Week Analysis of Data
6. 6th Week Compilation of content
7. 7th Week Editing and Revising the Content
8. 8th Week Report Preparation
9. 9th Week Report Preparation
10. 10th- 12th Week Presentation

Signature of Student Dated Signature of Faculty

Downloaded by ARYAVARDHAN
 ExpendiTur
e Tracker
WebsiTe
SubjecT: ClienT Side ScripTing
Downloaded by ARYAVARDHAN
(CSS) Name: DhruTi Kamlesh PaTil
Roll Number:1841

Downloaded by ARYAVARDHAN
 Table of Contents

I. Acknowledgements 1
II. Introduction 2
III. Languages used 4
IV. About our website 8
V. HTML Code 9
VI. CSS Code 10
IX. JS Code 13
X. Screenshots 16
XI. Conclusion 20
XII. References 21

Downloaded by ARYAVARDHAN
 ACKNOWLEDGEMENT

I feel very proud to say that due to keen knowledge of members of our group, it
was very easy for me to learn a lot of knowledge regarding
Expense Tracker Website in JavaScript
I am greatly thankful to our principal Mr. Nagnath Kavhale the Head of
Department / First Year Co-ordinator Prof. Parvez Vaghela. We express our
sincere thanks to Prof. Parvez Vaghela (Subject In-Charge) for his support and
guidance because of which we successfully completed our project. I have been
highly benefitted by this project and have gained a lot of knowledge about
Expense Tracker Website in JavaScript

Name:- Dhruti Patil

Roll number:- 1841

Downloaded by ARYAVARDHAN
 INTRODUCTION

Most people have a habit of writing down their expenses. The problem with
paper receipts is that it’s easy to lose and can even be affected by natural
calamitites. By immediately uploading these into an expense tracker app, you
save space and time instead of having to dig through a shoebox full of receipts
come tax time.

In this day and age, when expenses are going through the roof, it has become
crucial that you learn to make your money work for you so that you can create a
nest egg for the future.

An expense tracker allows you to monitor and categorize your expenses across
your daily expenses. This website offer calculating your expenses with the
reasons of expenses

Downloaded by ARYAVARDHAN
What are the benefits of tracking expenses?
 With a daily expense manager, you will be able to allocate money to
different priorities and this will also help you cut down on unnecessary
spending. As a result, you will be able to save and be able to keep worry
at bay. A daily money tracker helps you budget your money so that you
use it wisely.
 If you are not using an expense tracker, you are missing out on the ability
to manage your finances wisely and effortlessly. You will end up
spending money without even realising it, and your daily expenses will
go through the roof. On the other hand, if you use a money manager app,
you will be aware when and why you are spending money and how much
you spend.
 If you don’t check your spending and create a budget, you will have no
control whatsoever on your money. Instead, money will control you, and
you will either have perpetual lack of funds or you will end up steeped in
debt. A money manager app helps you decide between short-term and
long- term spending.

Reasons You Need an Expense Tracker

1. You have no control over your money
2. You are unaware what is happening with your money
3. You cannot make your money grow
4. You are constantly worried and stressed about your finances

Benefits of Expense Tracker

1. You Become Financially Aware and Improve Money Management
2. Ability to monitor costs incrementally
3. Improved decision-making
4. Organized expense information

Downloaded by ARYAVARDHAN
 LANGUAGES USED FOR
DEVELOPING EXPENSE TRACKER
WEBSITE
 HTML
 CSS
 JavaScript

HTML
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 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 TAGS USED IN WEBSITE

 <head>: The head tag is an element in HTML files that can contain
metadata (data about data) and script calls. The head tag is placed
between the opening <HTML> and <body> tags at the beginning of
the HTML file. The metadata in the head tag is not displayed, but the
information is used by browsers and by search engines

 <body>: The <body> tag defines the document's body. The <body>
element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc. Note:
There can only be one <body> element in an HTML document.

 <div>: The <div> tag defines a division or a section in an HTML

document. The <div> tag is used as a container for HTML elements -
which is then styled with CSS or manipulated with JavaScript. The
<div> tag is easily styled by using the class or id attribute.

Downloaded by ARYAVARDHAN
 Header tags: Header tags, also known as heading tags, are used to
separate headings and subheadings on a webpage. They rank in order
of importance, from H1 to H6, with H1s usually being the title.
Header tags improve the readability and SEO of a webpage.

 <p>: The <p> tag defines a paragraph. Browsers automatically add a

single blank line before and after each <p> element

 <form>: The form tag in HTML is used to create an interactive form

on a webpage. The form tag in HTML is used to collect data from the
user and send it to the server for further processing. The form
elements used in this website are:

 <label>: The HTML <label> for Attribute is used to specify

the type of form element a label is bound to

 <input>: The <input> tag specifies an input field where the

user can enter data. The <input> element is the most
important form element. The <input> element can be
displayed in several ways, depending on the type attribute

 <button>: The <button> tag in HTML is used to define the

clickable button. <button> tag is used to submit the content.
The images and text content can use inside <button> tag.
Different browsers use different default types for <button>

Downloaded by ARYAVARDHAN
CSS
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

CSS ELEMENTS USED IN OUR WEBSITE

 box-shadow: The box-shadow CSS property adds shadow effects
around an element's frame

 box sizing: The box-sizing CSS property sets how the total width and
height of an element is calculated

 background colour: The background-color CSS property sets the

background color of an element

 display: The display CSS property sets whether an element is treated

as a block or inline element and the layout used for its children, such
as flow layout, grid or flex.

 Font-family: The font-family CSS property specifies a prioritized list

of one or more font family names and/or generic family names for the
selected element.

 text-transform: The text-transform CSS property specifies how to

capitalize an element's text

 border: The border property is a shorthand syntax in CSS that accepts

multiple values for drawing a line around the element it is applied to.

 Opacity: The CSS opacity property is used to specify the

transparency of an element. In simple word, you can say that it
specifies the clarity of the image

Downloaded by ARYAVARDHAN
JavaScript
 JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
 It is a light-weighted and interpreted language.
 It is a case-sensitive language.
 JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
 It provides good control to the users over the web browsers.

JAVASCRIPT USED IN OUR WEBSITE

 getElementById(): The getElementById() is a JavaScript function
that lets you grab an HTML element, by its id , and perform an
action on it.

 getItem(): The getItem() method returns value of the specified

Storage Object item. The getItem() method belongs to the Storage
Object, which can be either a localStorage object or a
sessionStorage object.

 Function(): A function in JavaScript is similar to a procedure—a

set of statements that performs a task or calculates a value, but for a
procedure to qualify as a function, it should take some input and
return an output where there is some obvious relationship between
the input and the output.

 innerHTML(): The Element property innerHTML gets or sets the

HTML or XML markup contained within the element.

 addEventListener(): The JavaScript addEventListener() method

allows you to set up functions to be called when a specified event
happens, such as when a user clicks a button.

Downloaded by ARYAVARDHAN
 ABOUT OUR WEBSITE
This Simple Expense Tracker in JavaScript is a simple personal
account diary-like system. The whole programming is in HTML,
CSS, and JavaScript. This project will help the users to keep track of
their expenses and income properly. You can simply use any kind of
code editor for this project. This is a simple yet complete expense
manager web application.

About the system

This simple Expense Tracker in JavaScript keeps a track record of
expenditures. This is a simple lightweight program for personal
expense managers in the web version. To run this project, first, you
need to have a browser and a code editor of any kind. Then you have
to run the index file from the editor or directly from the folder. When
the screen loads, you can see the homepage. From there you can
manage your expense activities.

Downloaded by ARYAVARDHAN
 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>

Downloaded by ARYAVARDHAN
 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;
}

10

Downloaded by ARYAVARDHAN
.inc-exp-container { .btn {
background-color: #fff; cursor: pointer;
box-shadow: var(--box-shadow); background-color: #9c88ff;
padding: 20px; box-shadow: var(--box-shadow);
display: flex; color: #fff;
justify-content: space-between; border: 0;
margin: 20px 0; display: block;
} font-size: 16px;
margin: 10px 0 30px;
.inc-exp-container > div { padding: 10px;
flex: 1; width: 100%;
text-align: center; }
}
.btn:focus,
.inc-exp-container > div:first-of-type { .delete-btn:focus {
border-right: 1px solid #dedede; outline: 0;
} }

.money { .list {
font-size: 20px; list-style: none;
letter-spacing: 1px; padding: 0;
margin: 5px 0; margin-bottom: 40px;
} }

.money.plus { .list li {
color: #2ecc71; background-color: #fff;
} box-shadow: var(--box-shadow);
color: #333;
.money.minus { display: flex;
color: #2ecc71; justify-content: space-between;
} position: relative;
padding: 10px;
label { margin: 10px 0;
display: inline-block; }
margin: 10px 0;
} .list li.plus {
border-right: 5px solid #2ecc71;
input[type='text'], }
input[type='number']
{ .list li.minus {
border: 1px solid #dedede; border-right: 5px solid #c0392b;
border-radius: 2px; }
display: block;
font-size:
16px; padding:
10px; width:
100%;
}

11
Downloaded by ARYAVARDHAN
.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;
}

12

Downloaded by ARYAVARDHAN
 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);
}

13

Downloaded by ARYAVARDHAN
//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();
}

14

Downloaded by ARYAVARDHAN
//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);

15

Downloaded by ARYAVARDHAN
SCREENSHOTS OF OUR WEBSITE

16

Downloaded by ARYAVARDHAN
 17

Downloaded by ARYAVARDHAN
 18

Downloaded by ARYAVARDHAN
 19

Downloaded by ARYAVARDHAN
 CONCLUSION

After making this application we assure that this application will help it’s users
to manage the cost of their daily expenditure. It will guide them and make them
aware about their daily expenses. It will prove to be helpful for the people who
are frustrated with their daily budget management, irritated because of the
amount of expenses and wish 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

20

Downloaded by ARYAVARDHAN
 REFERNCES

 https://code-projects.org
 www.w3schools.com
 www.geeksforgeeks.com
 www.studocu.com

21

Downloaded by ARYAVARDHAN