Expense Tracker
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="number"],
input[type="date"],
select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 15px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
}
button:hover {
background-color: #218838;
}
.dashboard {
margin-top: 20px;
text-align: left;
}
.summary {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
canvas {
width: 100% !important;
max-width: 400px;
}
.expense-list {
margin-top: 20px;
text-align: left;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
background-color: #f8f9fa;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
document.getElementById('addExpenseBtn').addEventListener('click', addExpense);
const expenseList = [];
let totalExpenses = 0;
function addExpense() {
const amount = parseFloat(document.getElementById('amount').value);
const category = document.getElementById('category').value;
const date = document.getElementById('date').value;
if (amount && category && date) {
const expense = { amount, category, date };
expenseList.push(expense);
totalExpenses += amount;
document.getElementById('totalExpenses').innerText = totalExpenses.toFixed(2);
updateExpenseList();
updateChart();
document.getElementById('amount').value = '';
document.getElementById('date').value = '';
}
}
function updateExpenseList() {
const expenseListElement = document.getElementById('expenseList');
expenseListElement.innerHTML = '';
expenseList.forEach(expense => {
const listItem = document.createElement('li');
listItem.innerHTML = `${expense.category}: $${expense.amount.toFixed(2)}
${expense.date}`;
expenseListElement.appendChild(listItem);
});
}
function updateChart() {
const categories = [...new Set(expenseList.map(expense => expense.category))];
const categoryTotals = categories.map(category => {
return expenseList
.filter(expense => expense.category === category)
.reduce((sum, expense) => sum + expense.amount, 0);
});
const ctx = document.getElementById('expenseChart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: categories,
datasets: [{
data: categoryTotals,
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom'
}
}
});
}
Comments
Post a Comment