Skip to content

Commit 64c66fa

Browse files
Pankaj-StrPankaj-Str
authored
Create index.html
1 parent bb9421c commit 64c66fa

File tree

1 file changed

+240
-0
lines changed
  • Other_Example/Assignment Exercises/Personal Finance Tracker

1 file changed

+240
-0
lines changed

‎Other_Example/Assignment Exercises/Personal Finance Tracker/index.html‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Codes With Pankaj Personal Finance Tracker</title>
6+
<style>
7+
body {
8+
font-family: Arial, sans-serif;
9+
max-width: 800px;
10+
margin: 0 auto;
11+
padding: 20px;
12+
background-color: #f4f4f4;
13+
}
14+
.container {
15+
background-color: white;
16+
border-radius: 10px;
17+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
18+
padding: 30px;
19+
}
20+
.input-section {
21+
display: flex;
22+
gap: 10px;
23+
margin-bottom: 20px;
24+
}
25+
input, select, button {
26+
padding: 10px;
27+
margin-bottom: 10px;
28+
}
29+
table {
30+
width: 100%;
31+
border-collapse: collapse;
32+
margin-bottom: 20px;
33+
}
34+
th, td {
35+
border: 1px solid #ddd;
36+
padding: 8px;
37+
text-align: left;
38+
}
39+
.summary {
40+
background-color: #f9f9f9;
41+
padding: 20px;
42+
border-radius: 5px;
43+
}
44+
.btn {
45+
background-color: #007bff;
46+
color: white;
47+
border: none;
48+
padding: 10px 15px;
49+
border-radius: 5px;
50+
cursor: pointer;
51+
margin-right: 10px;
52+
}
53+
.btn-danger {
54+
background-color: #dc3545;
55+
}
56+
.advice {
57+
margin-top: 20px;
58+
padding: 15px;
59+
border-radius: 5px;
60+
font-weight: bold;
61+
}
62+
.positive-advice {
63+
background-color: #d4edda;
64+
color: #155724;
65+
}
66+
.warning-advice {
67+
background-color: #fff3cd;
68+
color: #856404;
69+
}
70+
.critical-advice {
71+
background-color: #f8d7da;
72+
color: #721c24;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<div class="container">
78+
<h1>Personal Finance Tracker</h1>
79+
<p>@codeswithpankaj.com</p>
80+
81+
<div class="input-section">
82+
<select id="transactionType">
83+
<option value="income">Income</option>
84+
<option value="expense">Expense</option>
85+
</select>
86+
<input type="text" id="transactionName" placeholder="Transaction Name">
87+
<input type="number" id="transactionAmount" placeholder="Amount" min="0" step="0.01">
88+
<button class="btn" onclick="addTransaction()">Add Transaction</button>
89+
</div>
90+
91+
<div class="summary">
92+
<h2>Monthly Financial Summary</h2>
93+
<p>Total Income: $<span id="totalIncome">0.00</span></p>
94+
<p>Total Expenses: $<span id="totalExpenses">0.00</span></p>
95+
<p>Savings: $<span id="savings">0.00</span></p>
96+
<p>Savings Percentage: <span id="savingsPercentage">0.00</span>%</p>
97+
</div>
98+
99+
<div class="advice" id="financialAdvice"></div>
100+
101+
<table>
102+
<thead>
103+
<tr>
104+
<th>Type</th>
105+
<th>Name</th>
106+
<th>Amount</th>
107+
<th>Actions</th>
108+
</tr>
109+
</thead>
110+
<tbody id="transactionList"></tbody>
111+
</table>
112+
</div>
113+
114+
<script>
115+
class FinanceTracker {
116+
constructor() {
117+
this.transactions = [];
118+
}
119+
120+
addTransaction(type, name, amount) {
121+
// Validate inputs
122+
if (!name || amount <= 0) {
123+
alert('Please enter valid transaction details');
124+
return false;
125+
}
126+
127+
this.transactions.push({ type, name, amount });
128+
this.updateFinancials();
129+
return true;
130+
}
131+
132+
removeTransaction(index) {
133+
this.transactions.splice(index, 1);
134+
this.updateFinancials();
135+
}
136+
137+
calculateTotalIncome() {
138+
return this.transactions
139+
.filter(t => t.type === 'income')
140+
.reduce((total, t) => total + t.amount, 0);
141+
}
142+
143+
calculateTotalExpenses() {
144+
return this.transactions
145+
.filter(t => t.type === 'expense')
146+
.reduce((total, t) => total + t.amount, 0);
147+
}
148+
149+
calculateSavings() {
150+
const income = this.calculateTotalIncome();
151+
const expenses = this.calculateTotalExpenses();
152+
return income - expenses;
153+
}
154+
155+
calculateSavingsPercentage() {
156+
const income = this.calculateTotalIncome();
157+
const savings = this.calculateSavings();
158+
159+
return income > 0
160+
? ((savings / income) * 100).toFixed(2)
161+
: 0;
162+
}
163+
164+
generateFinancialAdvice() {
165+
const savingsPercentage = parseFloat(this.calculateSavingsPercentage());
166+
const advice = document.getElementById('financialAdvice');
167+
168+
if (savingsPercentage >= 20) {
169+
advice.textContent = "Excellent! You're saving a significant portion of your income.";
170+
advice.className = 'advice positive-advice';
171+
} else if (savingsPercentage >= 10) {
172+
advice.textContent = "Good job! Try to increase your savings rate if possible.";
173+
advice.className = 'advice warning-advice';
174+
} else {
175+
advice.textContent = "Warning: Your savings rate is low. Review your expenses and look for ways to cut costs.";
176+
advice.className = 'advice critical-advice';
177+
}
178+
}
179+
180+
updateFinancials() {
181+
const transactionList = document.getElementById('transactionList');
182+
const totalIncomeSpan = document.getElementById('totalIncome');
183+
const totalExpensesSpan = document.getElementById('totalExpenses');
184+
const savingsSpan = document.getElementById('savings');
185+
const savingsPercentageSpan = document.getElementById('savingsPercentage');
186+
187+
// Clear existing transactions
188+
transactionList.innerHTML = '';
189+
190+
// Populate transaction list
191+
this.transactions.forEach((transaction, index) => {
192+
const row = transactionList.insertRow();
193+
row.innerHTML = `
194+
<td>${transaction.type.toUpperCase()}</td>
195+
<td>${transaction.name}</td>
196+
<td>$${transaction.amount.toFixed(2)}</td>
197+
<td>
198+
<button class="btn btn-danger" onclick="financeTracker.removeTransaction(${index})">Remove</button>
199+
</td>
200+
`;
201+
});
202+
203+
// Update financial summary
204+
const totalIncome = this.calculateTotalIncome();
205+
const totalExpenses = this.calculateTotalExpenses();
206+
const savings = this.calculateSavings();
207+
const savingsPercentage = this.calculateSavingsPercentage();
208+
209+
totalIncomeSpan.textContent = totalIncome.toFixed(2);
210+
totalExpensesSpan.textContent = totalExpenses.toFixed(2);
211+
savingsSpan.textContent = savings.toFixed(2);
212+
savingsPercentageSpan.textContent = savingsPercentage;
213+
214+
// Generate financial advice
215+
this.generateFinancialAdvice();
216+
}
217+
}
218+
219+
// Initialize finance tracker
220+
const financeTracker = new FinanceTracker();
221+
222+
// Add Transaction Function
223+
function addTransaction() {
224+
const typeInput = document.getElementById('transactionType');
225+
const nameInput = document.getElementById('transactionName');
226+
const amountInput = document.getElementById('transactionAmount');
227+
228+
const type = typeInput.value;
229+
const name = nameInput.value.trim();
230+
const amount = parseFloat(amountInput.value);
231+
232+
if (financeTracker.addTransaction(type, name, amount)) {
233+
// Clear inputs after successful addition
234+
nameInput.value = '';
235+
amountInput.value = '';
236+
}
237+
}
238+
</script>
239+
</body>
240+
</html>

0 commit comments

Comments
 (0)