Skip to content

Commit 15100c6

Browse files
nirajxdevnirajxdev
committed
updated designing and logic
1 parent 641b6a2 commit 15100c6

File tree

2 files changed

+165
-40
lines changed

2 files changed

+165
-40
lines changed

‎02_budget-tracker/index.html‎

Lines changed: 78 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,90 @@
66
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
77
<title>Budget Tracker</title>
88
</head>
9-
<body class="">
10-
<div class="flex flex-col justify-center text-center mt-50 gap-4 ">
11-
<form action="">
12-
<div>
13-
<label for="description">Transaction Description </label>
14-
<input type="text" id="transaction-description" placeholder="Transaction Description" required class="">
15-
</div>
9+
<body class="bg-white text-black font-sans antialiased">
1610

17-
<div>
18-
<label for="amount">Transaction Amount </label>
19-
<input type="number" id="transaction-amount" placeholder="Transaction Amount" required class="">
20-
</div>
21-
22-
<div>
23-
<input type="radio" name="type" value="income" id="income-option">
24-
<label for="income-option" required >Income</label>
11+
<div class="container mx-auto max-w-4xl px-6 py-16">
12+
13+
<header class="mb-16 flex justify-between items-end border-b border-black pb-4">
14+
<h1 class="text-3xl font-bold tracking-tighter uppercase">
15+
Budget<span class="font-light"> Tracker</span>
16+
</h1>
17+
18+
</header>
19+
20+
<div class="grid grid-cols-1 md:grid-cols-12 gap-12">
21+
22+
<div class="md:col-span-5 flex flex-col gap-12">
23+
24+
<div>
25+
<p class="text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Current Balance</p>
26+
<p id="balance" class="text-6xl font-medium tracking-tighter">$0.00</p>
27+
</div>
28+
29+
<div class="grid grid-cols-2 gap-4">
30+
<div class="border-l-2 border-black pl-4">
31+
<span class="block text-xs font-bold uppercase text-gray-500">Income</span>
32+
<p id="income" class="text-xl font-mono mt-1">+$0.00</p>
33+
</div>
34+
<div class="border-l-2 border-gray-200 pl-4">
35+
<span class="block text-xs font-bold uppercase text-gray-500">Expense</span>
36+
<p id="expense" class="text-xl font-mono mt-1">-$0.00</p>
37+
</div>
38+
</div>
2539

26-
<input type="radio" id="expense-option" name="type" value="expense">
27-
<label for="expense-option" required>Expense</label>
40+
<form id="form" class="flex flex-col gap-8 mt-4">
41+
42+
<div class="space-y-6">
43+
<div class="relative">
44+
<input type="text" id="transaction-description" placeholder=" "
45+
class="peer block w-full border-b border-gray-300 bg-transparent py-2 text-lg focus:border-black focus:outline-none" />
46+
<label class="absolute -top-2 left-0 text-xs text-gray-500 transition-all peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-xs peer-focus:text-black uppercase font-bold tracking-wider">
47+
Description
48+
</label>
49+
</div>
50+
51+
<div class="relative">
52+
<input type="number" id="transaction-amount" placeholder=" " min="0.01" step="0.01"
53+
class="peer block w-full border-b border-gray-300 bg-transparent py-2 text-lg focus:border-black focus:outline-none font-mono" />
54+
<label class="absolute -top-2 left-0 text-xs text-gray-500 transition-all peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-xs peer-focus:text-black uppercase font-bold tracking-wider">
55+
Amount
56+
</label>
57+
</div>
58+
</div>
59+
60+
<div class="flex gap-8">
61+
<label class="cursor-pointer flex items-center gap-3 group">
62+
<input type="radio" name="type" value="income" id="income-option" checked class="peer sr-only">
63+
<div class="w-4 h-4 border border-black peer-checked:bg-black transition-all"></div>
64+
<span class="text-sm uppercase font-bold tracking-wide text-gray-400 peer-checked:text-black">Income</span>
65+
</label>
66+
<label class="cursor-pointer flex items-center gap-3 group">
67+
<input type="radio" name="type" value="expense" id="expense-option" class="peer sr-only">
68+
<div class="w-4 h-4 border border-black peer-checked:bg-black transition-all"></div>
69+
<span class="text-sm uppercase font-bold tracking-wide text-gray-400 peer-checked:text-black">Expense</span>
70+
</label>
71+
</div>
72+
73+
<button type="submit" id="submit-button"
74+
class="bg-black text-white py-4 text-sm font-bold uppercase tracking-widest hover:bg-white hover:text-black hover:ring-2 hover:ring-inset hover:ring-black transition-all">
75+
Add Entry
76+
</button>
77+
</form>
2878
</div>
29-
30-
<button type="submit" id="submit-button">Submit</button>
31-
</form>
3279

33-
<div id="transactions-list">
80+
<div class="md:col-span-7">
81+
<div class="flex items-center justify-between mb-8 border-b border-gray-200 pb-2">
82+
<h3 class="text-xs font-bold uppercase tracking-widest text-gray-500">Transaction Log</h3>
83+
<span class="text-xs font-mono text-gray-400">RECENT</span>
84+
</div>
85+
86+
<ul id="transactions-list" class="flex flex-col">
87+
</ul>
88+
</div>
3489

3590
</div>
36-
37-
3891
</div>
39-
40-
41-
<script src="script.js"></script>
4292

93+
<script src="script.js"></script>
4394
</body>
44-
</html>
95+
</html>

‎02_budget-tracker/script.js‎

Lines changed: 87 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,93 @@
1-
const description = document.getElementById("transaction-description");
2-
const amount = document.getElementById("transaction-amount");
3-
const income = document.getElementById("income-option");
4-
const expense = document.getElementById("expense-option");
5-
const submit = document.getElementById("submit-button");
1+
const balanceEl = document.getElementById('balance');
2+
const incomeEl = document.getElementById('income');
3+
const expenseEl = document.getElementById('expense');
4+
const transactionListEl = document.getElementById('transactions-list');
5+
const form = document.getElementById('form');
6+
const descriptionInput = document.getElementById('transaction-description');
7+
const amountInput = document.getElementById('transaction-amount');
8+
const incomeOption = document.getElementById('income-option');
9+
const expenseOption = document.getElementById('expense-option');
610

11+
let transactions = [];
712

8-
let transaction = []
13+
function updateBalanceAndSummary() {
14+
let totalIncome = 0;
15+
let totalExpense = 0;
916

10-
submit.addEventListener('click', function () {
17+
transactions.forEach(tx => {
18+
if (tx.type === 'income') {
19+
totalIncome += tx.amount;
20+
} else if (tx.type === 'expense') {
21+
totalExpense += tx.amount;
22+
}
23+
});
1124

12-
const obj1 = {
13-
descriptionValue : description.value,
14-
amountvalue: amount.value,
15-
type: income,expense
25+
const totalBalance = totalIncome - totalExpense;
26+
27+
balanceEl.innerText = `$${totalBalance.toFixed(2)}`;
28+
incomeEl.innerText = `+$${totalIncome.toFixed(2)}`;
29+
expenseEl.innerText = `-$${totalExpense.toFixed(2)}`;
30+
}
31+
32+
function displayTransactions() {
33+
transactionListEl.innerHTML = '';
34+
35+
transactions.forEach(tx => {
36+
const li = document.createElement('li');
37+
li.className = `p-3 bg-gray-50 shadow-sm rounded-md flex justify-between border-r-4 ${tx.type === 'expense' ? 'border-red-500' : 'border-green-500'}`;
38+
39+
li.innerHTML = `
40+
<span>${tx.description}</span>
41+
<span class="${tx.type === 'expense' ? 'text-red-600' : 'text-green-600'} font-bold">
42+
${tx.type === 'expense' ? '-' : '+'}$${Math.abs(tx.amount)}
43+
</span>
44+
`;
45+
46+
transactionListEl.appendChild(li);
47+
});
48+
}
49+
50+
function handleFormSubmit(e) {
51+
e.preventDefault();
52+
53+
if (descriptionInput.value.trim() === '' || amountInput.value.trim() === '') {
54+
alert('Please enter a description and amount.');
55+
return;
56+
}
57+
58+
const amountValue = +amountInput.value;
59+
60+
if (amountValue <= 0) {
61+
alert('Amount must be greater than 0');
62+
return;
63+
}
64+
65+
const newTransaction = {
66+
id: generateID(),
67+
description: descriptionInput.value,
68+
amount: amountValue,
69+
type: incomeOption.checked ? 'income' : 'expense'
1670
};
17-
1871

19-
});
72+
transactions.push(newTransaction);
73+
updateDOM();
74+
descriptionInput.value = '';
75+
amountInput.value = '';
76+
}
77+
78+
function generateID() {
79+
return Math.floor(Math.random() * 1000000);
80+
}
81+
82+
83+
function updateDOM() {
84+
updateBalanceAndSummary();
85+
displayTransactions();
86+
}
87+
88+
function init() {
89+
updateDOM();
90+
form.addEventListener('submit', handleFormSubmit);
91+
}
92+
93+
init();

0 commit comments

Comments
 (0)