Profit

Virtual Money Tracker

Balance: 0

https://cdn.jsdelivr.net/npm/chart.js

let transactions = JSON.parse(localStorage.getItem(‘transactions’)) || [];
let balance = 0;
transactions.forEach(t => balance += t.income – t.expense);
updateBalance();
drawChart();

function addTransaction() {
const income = Number(document.getElementById(“income”).value) || 0;
const expense = Number(document.getElementById(“expense”).value) || 0;
transactions.push({income, expense});
localStorage.setItem(‘transactions’, JSON.stringify(transactions));
balance += income – expense;
updateBalance();
drawChart();
document.getElementById(“income”).value = ”;
document.getElementById(“expense”).value = ”;
}

function clearTransactions() {
transactions = [];
balance = 0;
localStorage.removeItem(‘transactions’);
updateBalance();
drawChart();
}

function updateBalance() {
document.getElementById(“balance”).innerText = “Balance: ” + balance;
}

function drawChart() {
const ctx = document.getElementById(‘financeChart’).getContext(‘2d’);
const labels = transactions.map((_, i) => “T” + (i+1));
const incomes = transactions.map(t => t.income);
const expenses = transactions.map(t => t.expense);
if(window.financeChartInstance) window.financeChartInstance.destroy();
window.financeChartInstance = new Chart(ctx, {
type: ‘bar’,
data: {
labels: labels,
datasets: [
{ label: ‘Income’, data: incomes, backgroundColor: ‘green’ },
{ label: ‘Expense’, data: expenses, backgroundColor: ‘red’ }
]
},
options: { responsive:true, plugins:{legend:{position:’top’}, title:{display:true, text:’Virtual Money Tracker’}}}
});
}