Skip to content

Commit 3296b74

Browse files
Kanavpreet-Singhsumn2u
Kanavpreet-Singh
authored and
sumn2u
committed
added codes in 'examples' folder
1 parent 03a4a63 commit 3296b74

4 files changed

Lines changed: 324 additions & 0 deletions

File tree

‎examples/Expense-Tracker/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# 💰 Expense Tracker
2+
3+
A simple and interactive **Expense Tracker** built using **HTML, CSS, and modern JavaScript (ES Modules)**.
4+
It helps users manage their daily income and expenses, view summaries, and store data locally — all without a backend.
5+
6+
## Features
7+
8+
- ➕ **Add new transactions** — income or expense.
9+
- ✏️ **Edit transactions** — update existing entries easily.
10+
- ❌ **Delete transactions** you no longer need.
11+
- 💵 **Live balance summary** showing total, income, and expenses.
12+
- 💾 **Data persistence** using `localStorage` (no backend required).
13+
- 📱 **Clean and responsive UI** — works on both desktop and mobile.
14+
15+
## Files
16+
17+
- `index.html` — main structure and layout of the app.
18+
- `styles.css` — styling, layout, and responsive design.
19+
- `index.mjs` — handles core functionality like adding, editing, deleting, and storing transactions.
20+
21+
## How to Use
22+
23+
1. Open `index.html` in your browser (Chrome, Edge, or Firefox recommended).
24+
2. Enter a **description** and **amount**.
25+
- Use positive numbers for income (e.g., `+5000`).
26+
- Use negative numbers for expenses (e.g., `-1200`).
27+
3. Click **Add Transaction** to save it.
28+
4. View your total **balance**, **income**, and **expense** at a glance.
29+
5. Edit or delete transactions anytime — all changes are saved automatically.
30+
31+
## Notes
32+
33+
- Data is stored locally in the browser using **localStorage**.
34+
- The app automatically loads your saved data on refresh.
35+
- Built entirely with **vanilla JS, HTML, and CSS** — no external libraries used.
36+
- Great for beginners learning **DOM manipulation, events, and localStorage**.
37+
38+
---
39+
40+
✨ **Easily track where your money goes with the Expense Tracker!**

‎examples/Expense-Tracker/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Expense Tracker</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Expense Tracker</h1>
12+
13+
<div class="balance">
14+
<h2>Your Balance</h2>
15+
<h3 id="balance">₹0</h3>
16+
</div>
17+
18+
<div class="summary">
19+
<div class="income">
20+
<h4>Income</h4>
21+
<p id="income">₹0</p>
22+
</div>
23+
<div class="expense">
24+
<h4>Expense</h4>
25+
<p id="expense">₹0</p>
26+
</div>
27+
</div>
28+
29+
<h3>Add New Transaction</h3>
30+
<form id="transaction-form">
31+
<input type="text" id="text" placeholder="Enter description" required />
32+
<input
33+
type="number"
34+
id="amount"
35+
placeholder="Enter amount (+ for income, - for expense)"
36+
required
37+
/>
38+
<button type="submit">Add Transaction</button>
39+
</form>
40+
41+
<h3>Transaction History</h3>
42+
<ul id="transaction-list" class="list"></ul>
43+
</div>
44+
45+
<script type="module" src="index.mjs"></script>
46+
</body>
47+
</html>

‎examples/Expense-Tracker/index.mjs‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// Select elements
2+
const balanceEl = document.getElementById("balance");
3+
const incomeEl = document.getElementById("income");
4+
const expenseEl = document.getElementById("expense");
5+
const listEl = document.getElementById("transaction-list");
6+
const form = document.getElementById("transaction-form");
7+
const textInput = document.getElementById("text");
8+
const amountInput = document.getElementById("amount");
9+
10+
// Load transactions from localStorage
11+
let transactions = JSON.parse(localStorage.getItem("transactions")) || [];
12+
13+
// Add transaction
14+
function addTransaction(e) {
15+
e.preventDefault();
16+
17+
const text = textInput.value.trim();
18+
const amount = +amountInput.value;
19+
20+
if (text === "" || amount === 0 || isNaN(amount)) {
21+
alert("Please enter valid description and amount.");
22+
return;
23+
}
24+
25+
const transaction = {
26+
id: Date.now(),
27+
text,
28+
amount,
29+
};
30+
31+
transactions.push(transaction);
32+
updateLocalStorage();
33+
renderTransactions();
34+
35+
textInput.value = "";
36+
amountInput.value = "";
37+
}
38+
39+
// Delete transaction
40+
function deleteTransaction(id) {
41+
transactions = transactions.filter((t) => t.id !== id);
42+
updateLocalStorage();
43+
renderTransactions();
44+
}
45+
46+
// Edit transaction
47+
function editTransaction(id) {
48+
const t = transactions.find((t) => t.id === id);
49+
if (!t) return;
50+
51+
const newText = prompt("Edit description:", t.text);
52+
const newAmount = parseFloat(prompt("Edit amount:", t.amount));
53+
54+
if (newText && !isNaN(newAmount)) {
55+
t.text = newText;
56+
t.amount = newAmount;
57+
updateLocalStorage();
58+
renderTransactions();
59+
}
60+
}
61+
62+
// Update totals
63+
function updateSummary() {
64+
const amounts = transactions.map((t) => t.amount);
65+
const total = amounts.reduce((a, b) => a + b, 0).toFixed(2);
66+
const income = amounts
67+
.filter((a) => a > 0)
68+
.reduce((a, b) => a + b, 0)
69+
.toFixed(2);
70+
const expense = (
71+
amounts.filter((a) => a < 0).reduce((a, b) => a + b, 0) * -1
72+
).toFixed(2);
73+
74+
balanceEl.textContent = `₹${total}`;
75+
incomeEl.textContent = `₹${income}`;
76+
expenseEl.textContent = `₹${expense}`;
77+
}
78+
79+
// Render transactions
80+
function renderTransactions() {
81+
listEl.innerHTML = "";
82+
83+
transactions.forEach((t) => {
84+
const li = document.createElement("li");
85+
li.classList.add(t.amount < 0 ? "expense" : "income");
86+
87+
li.innerHTML = `
88+
${t.text} <span>₹${t.amount}</span>
89+
<div>
90+
<button onclick="editTransaction(${t.id})">✏️</button>
91+
<button onclick="deleteTransaction(${t.id})">❌</button>
92+
</div>
93+
`;
94+
95+
listEl.appendChild(li);
96+
});
97+
98+
updateSummary();
99+
}
100+
101+
// Save to localStorage
102+
function updateLocalStorage() {
103+
localStorage.setItem("transactions", JSON.stringify(transactions));
104+
}
105+
106+
// Initialize
107+
renderTransactions();
108+
form.addEventListener("submit", addTransaction);
109+
110+
// Expose functions globally (for inline onclick)
111+
window.editTransaction = editTransaction;
112+
window.deleteTransaction = deleteTransaction;

‎examples/Expense-Tracker/styles.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: "Poppins", sans-serif;
6+
}
7+
8+
body {
9+
background: #f4f4f9;
10+
color: #333;
11+
display: flex;
12+
justify-content: center;
13+
align-items: flex-start;
14+
min-height: 100vh;
15+
padding: 20px;
16+
}
17+
18+
.container {
19+
background: #fff;
20+
border-radius: 16px;
21+
padding: 30px;
22+
width: 100%;
23+
max-width: 400px;
24+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
25+
}
26+
27+
h1 {
28+
text-align: center;
29+
margin-bottom: 20px;
30+
color: #2d3436;
31+
}
32+
33+
.balance {
34+
text-align: center;
35+
margin-bottom: 20px;
36+
}
37+
38+
#balance {
39+
font-size: 2rem;
40+
color: #2d3436;
41+
margin-top: 10px;
42+
}
43+
44+
.summary {
45+
display: flex;
46+
justify-content: space-between;
47+
background: #fafafa;
48+
border-radius: 8px;
49+
padding: 10px 20px;
50+
margin-bottom: 30px;
51+
border: 1px solid #ddd;
52+
}
53+
54+
.summary div {
55+
text-align: center;
56+
}
57+
58+
.income p {
59+
color: #27ae60;
60+
font-weight: bold;
61+
}
62+
63+
.expense p {
64+
color: #c0392b;
65+
font-weight: bold;
66+
}
67+
68+
form {
69+
display: flex;
70+
flex-direction: column;
71+
gap: 10px;
72+
margin-bottom: 30px;
73+
}
74+
75+
form input {
76+
padding: 10px;
77+
border-radius: 8px;
78+
border: 1px solid #ccc;
79+
}
80+
81+
form button {
82+
padding: 10px;
83+
border: none;
84+
border-radius: 8px;
85+
background-color: #0984e3;
86+
color: #fff;
87+
cursor: pointer;
88+
transition: background 0.3s ease;
89+
}
90+
91+
form button:hover {
92+
background-color: #74b9ff;
93+
}
94+
95+
.list {
96+
list-style-type: none;
97+
margin-top: 10px;
98+
}
99+
100+
.list li {
101+
background: #f9f9f9;
102+
border-left: 5px solid #2ecc71;
103+
margin-bottom: 10px;
104+
padding: 10px;
105+
border-radius: 8px;
106+
display: flex;
107+
justify-content: space-between;
108+
align-items: center;
109+
}
110+
111+
.list li.expense {
112+
border-left-color: #e74c3c;
113+
}
114+
115+
.list button {
116+
border: none;
117+
background: transparent;
118+
color: #e74c3c;
119+
font-weight: bold;
120+
cursor: pointer;
121+
}
122+
123+
.list button:hover {
124+
color: #c0392b;
125+
}

0 commit comments

Comments
 (0)