Skip to content

Commit 1637a3e

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request swapnilsparsh#708 from iamrahulmahato/et
Expense Tracker
2 parents bfbb078 + 0afe1cf commit 1637a3e

6 files changed

Lines changed: 340 additions & 0 deletions

File tree

‎Expense Tracker/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<p align="center">
2+
<img alt="" height="80" src="./img/add-readme.png">
3+
</a>
4+
</p>
5+
<h1 align="center"> Expense Tracker </h1>
6+
7+
<div align="center">
8+
Expense Tracker made through HTML,CSS and JAVASCRIPT
9+
</div>
10+
11+
<br />
12+
13+
<div align="center">
14+
<!-- Standard -->
15+
<a href="https://standardjs.com">
16+
<img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"
17+
alt="Standard" />
18+
</a>
19+
</div>
20+
21+
## ⚡️ Introduction
22+
Keep track of income and expenses. Add and remove items and save to local storage
23+
24+
25+
## 📷 Screenshots
26+
27+
![ss1](./img/expenseSS.png)
28+
29+

‎Expense Tracker/css/style.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
2+
:root {
3+
--box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
4+
}
5+
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
background-color: #f1f5f9;
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: center;
16+
min-height: 100vh;
17+
margin: 0;
18+
font-family: 'Lato', sans-serif;
19+
}
20+
21+
.container {
22+
margin: 30px auto;
23+
width: 350px;
24+
}
25+
26+
h1 {
27+
letter-spacing: 1px;
28+
margin: 0;
29+
}
30+
31+
h3 {
32+
border-bottom: 1px solid #bbb;
33+
padding-bottom: 10px;
34+
margin: 40px 0 10px;
35+
}
36+
37+
h4 {
38+
margin: 0;
39+
text-transform: uppercase;
40+
}
41+
42+
.inc-exp-container {
43+
background-color: #fff;
44+
box-shadow: var(--box-shadow);
45+
padding: 20px;
46+
display: flex;
47+
justify-content: space-between;
48+
margin: 20px 0;
49+
}
50+
51+
.inc-exp-container>div {
52+
flex: 1;
53+
text-align: center;
54+
}
55+
56+
.inc-exp-container>div:first-of-type {
57+
border-right: 1px solid #dedede;
58+
}
59+
60+
.money {
61+
font-size: 20px;
62+
letter-spacing: 1px;
63+
margin: 5px 0;
64+
}
65+
66+
.money.plus {
67+
color: #2ecc71;
68+
}
69+
70+
.money.minus {
71+
color: #c0392b;
72+
}
73+
74+
label {
75+
display: inline-block;
76+
margin: 10px 0;
77+
}
78+
79+
input[type='text'],
80+
input[type='number'] {
81+
border: 1px solid #dedede;
82+
border-radius: 2px;
83+
display: block;
84+
font-size: 16px;
85+
padding: 10px;
86+
width: 100%;
87+
}
88+
89+
.btn {
90+
cursor: pointer;
91+
background-color: #3b82f6;
92+
box-shadow: var(--box-shadow);
93+
color: #fff;
94+
border: 0;
95+
display: block;
96+
font-size: 16px;
97+
margin: 10px 0 30px;
98+
padding: 10px;
99+
width: 100%;
100+
}
101+
102+
.btn:focus,
103+
.delete-btn:focus {
104+
outline: 0;
105+
}
106+
107+
.list {
108+
list-style-type: none;
109+
padding: 0;
110+
margin-bottom: 40px;
111+
}
112+
113+
.list li {
114+
background-color: #fff;
115+
box-shadow: var(--box-shadow);
116+
color: #333;
117+
display: flex;
118+
justify-content: space-between;
119+
position: relative;
120+
padding: 10px;
121+
margin: 10px 0;
122+
}
123+
124+
.list li.plus {
125+
border-right: 5px solid #2ecc71;
126+
}
127+
128+
.list li.minus {
129+
border-right: 5px solid #c0392b;
130+
}
131+
132+
.delete-btn {
133+
cursor: pointer;
134+
background-color: #e74c3c;
135+
border: 0;
136+
color: #fff;
137+
font-size: 20px;
138+
line-height: 20px;
139+
padding: 2px 5px;
140+
position: absolute;
141+
top: 50%;
142+
left: 0;
143+
transform: translate(-100%, -50%);
144+
opacity: 0;
145+
transition: opacity 0.3s ease;
146+
}
147+
148+
.list li:hover .delete-btn {
149+
opacity: 1;
150+
}

‎Expense Tracker/img/add-readme.png‎

1.83 KB
Loading

‎Expense Tracker/img/expenseSS.png‎

41.1 KB
Loading

‎Expense Tracker/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<link rel="stylesheet" href="./css/style.css">
9+
<title>Expense Tracker</title>
10+
</head>
11+
12+
<body>
13+
<h2>Expense Tracker</h2>
14+
15+
<div class="container">
16+
<h4>Your Balance</h4>
17+
<h1 id="balance">0.00</h1>
18+
<div class="inc-exp-container">
19+
<div>
20+
<h4>Income</h4>
21+
<p id="money-plus" class="money plus">0.00</p>
22+
</div>
23+
<div>
24+
<h4>Expense</h4>
25+
<p id="money-minus" class="money minus">0.00</p>
26+
</div>
27+
</div>
28+
<h3>History</h3>
29+
<ul id="list" class="list">
30+
</ul>
31+
<h3>Add new transaction</h3>
32+
<form id="form">
33+
<div class="form-control">
34+
<label for="text">Text</label>
35+
<input type="text" id="text" placeholder="Enter text..." />
36+
</div>
37+
<div class="form-control">
38+
<label for="amount">Amount <br />
39+
(negative - expense, positive - income)</label
40+
>
41+
<input type="number" id="amount" placeholder="Enter amount..." />
42+
</div>
43+
<button class="btn">Add transaction</button>
44+
</form>
45+
</div>
46+
47+
<script src="./js/script.js"></script>
48+
49+
</body>
50+
51+
</html>

‎Expense Tracker/js/script.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
const balance = document.getElementById('balance');
2+
const money_plus = document.getElementById('money-plus');
3+
const money_minus = document.getElementById('money-minus');
4+
const list = document.getElementById('list');
5+
const form = document.getElementById('form');
6+
const text = document.getElementById('text');
7+
const amount = document.getElementById('amount');
8+
9+
const localStorageTransactions = JSON.parse(
10+
localStorage.getItem('transactions')
11+
);
12+
13+
let transactions =
14+
localStorage.getItem('transactions') !== null ? localStorageTransactions : [];
15+
16+
//Add transaction
17+
18+
function addTransaction(e) {
19+
e.preventDefault();
20+
21+
if (text.value.trim() === '' || amount.value.trim() === '') {
22+
alert('Please add a text and amount');
23+
} else {
24+
const transaction = {
25+
id: generateID(),
26+
text: text.value,
27+
amount: +amount.value
28+
};
29+
30+
transactions.push(transaction);
31+
32+
addTransactionDOM(transaction);
33+
34+
updateValues();
35+
36+
updateLocalStorage();
37+
38+
text.value = '';
39+
amount.value = '';
40+
}
41+
}
42+
// Generate random ID
43+
function generateID() {
44+
return Math.floor(Math.random() * 100000000);
45+
}
46+
47+
// Add transactions to DOM list
48+
function addTransactionDOM(transaction) {
49+
50+
const sign = transaction.amount < 0 ? '-' : '+';
51+
52+
const item = document.createElement('li');
53+
54+
55+
item.classList.add(transaction.amount < 0 ? 'minus' : 'plus');
56+
57+
item.innerHTML = `
58+
${transaction.text} <span>${sign}${Math.abs(
59+
transaction.amount
60+
)}</span> <button class="delete-btn" onclick="removeTransaction(${
61+
transaction.id
62+
})">x</button>
63+
`;
64+
65+
list.appendChild(item);
66+
}
67+
// Update the balance, income and expense
68+
function updateValues() {
69+
const amounts = transactions.map(transaction => transaction.amount);
70+
71+
const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
72+
73+
const income = amounts
74+
.filter(item => item > 0)
75+
.reduce((acc, item) => (acc += item), 0)
76+
.toFixed(2);
77+
78+
const expense = (
79+
amounts.filter(item => item < 0).reduce((acc, item) => (acc += item), 0) *
80+
-1
81+
).toFixed(2);
82+
83+
balance.innerText = `${total}`;
84+
money_plus.innerText = `${income}`;
85+
money_minus.innerText = `${expense}`;
86+
}
87+
// Remove transaction by ID
88+
function removeTransaction(id) {
89+
transactions = transactions.filter(transaction => transaction.id !== id);
90+
91+
updateLocalStorage();
92+
93+
init();
94+
}
95+
// Update local storage transactions
96+
function updateLocalStorage() {
97+
localStorage.setItem('transactions', JSON.stringify(transactions));
98+
}
99+
//Init app
100+
101+
function init() {
102+
list.innerHTML = '';
103+
104+
transactions.forEach(addTransactionDOM);
105+
updateValues();
106+
}
107+
108+
init();
109+
110+
form.addEventListener('submit', addTransaction);

0 commit comments

Comments
 (0)