<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker | Learn with Arshyan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--income: #2ecc71;
--expense: #e74c3c;
--light: #f8f9fa;
--dark: #212529;
--card-bg: rgba(255, 255, 255, 0.95);
--shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
--transition: all 0.3s ease;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
color: var(--dark);
display: flex;
justify-content: center;
align-items: center;
}
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
/* Header Styles */
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding: 20px;
background: var(--card-bg);
border-radius: 20px;
box-shadow: var(--shadow);
}
.brand {
display: flex;
align-items: center;
gap: 15px;
}
.logo {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
font-weight: bold;
}
.brand-text h1 {
font-size: 28px;
color: var(--secondary);
font-weight: 700;
letter-spacing: 0.5px;
}
.brand-text p {
font-size: 14px;
color: #666;
font-weight: 500;
}
/* Dashboard */
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 30px;
}
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
}
}
.card {
background: var(--card-bg);
border-radius: 20px;
padding: 30px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(31, 38, 135, 0.2);
}
.card h2 {
font-size: 24px;
margin-bottom: 20px;
color: var(--secondary);
display: flex;
align-items: center;
gap: 10px;
}
.card h2 i {
color: var(--primary);
}
/* Balance Summary */
.balance-summary {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.balance-item {
text-align: center;
padding: 20px;
border-radius: 15px;
background: rgba(67, 97, 238, 0.05);
flex: 1;
margin: 0 10px;
}
.balance-item:first-child {
margin-left: 0;
}
.balance-item:last-child {
margin-right: 0;
}
.balance-item h3 {
font-size: 16px;
margin-bottom: 10px;
color: #666;
}
.balance-value {
font-size: 28px;
font-weight: 700;
}
#balance {
color: var(--primary);
}
#income {
color: var(--income);
}
#expense {
color: var(--expense);
}
/* Form */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #555;
}
.form-control {
width: 100%;
padding: 14px;
border-radius: 10px;
border: 1px solid #ddd;
font-size: 16px;
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
}
.btn {
background: linear-gradient(to right, var(--primary), var(--secondary));
color: white;
border: none;
padding: 14px 30px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
width: 100%;
margin-top: 10px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
}
.radio-group {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.radio-option {
flex: 1;
text-align: center;
padding: 15px;
border: 2px solid #eee;
border-radius: 10px;
cursor: pointer;
transition: var(--transition);
}
.radio-option.selected {
border-color: var(--primary);
background: rgba(67, 97, 238, 0.05);
}
.radio-option i {
font-size: 24px;
margin-bottom: 10px;
}
.income-option.selected i {
color: var(--income);
}
.expense-option.selected i {
color: var(--expense);
}
/* Transaction List */
.transactions {
max-height: 400px;
overflow-y: auto;
padding-right: 10px;
}
.transaction-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin-bottom: 15px;
border-radius: 10px;
background: white;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
transition: var(--transition);
}
.transaction-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.transaction-info {
display: flex;
align-items: center;
gap: 15px;
}
.transaction-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.income .transaction-icon {
background: var(--income);
}
.expense .transaction-icon {
background: var(--expense);
}
.transaction-details h3 {
font-size: 16px;
margin-bottom: 5px;
}
.transaction-details p {
font-size: 14px;
color: #777;
}
.transaction-amount {
font-weight: 700;
font-size: 18px;
}
.income .transaction-amount {
color: var(--income);
}
.expense .transaction-amount {
color: var(--expense);
}
.delete-btn {
background: none;
border: none;
color: #e74c3c;
cursor: pointer;
font-size: 18px;
opacity: 0.7;
transition: var(--transition);
}
.delete-btn:hover {
opacity: 1;
transform: scale(1.1);
}
/* Chart Container */
.chart-container {
height: 300px;
margin-top: 20px;
}
/* Footer */
footer {
text-align: center;
padding: 20px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
margin-top: 30px;
}
footer a {
color: white;
text-decoration: none;
font-weight: 600;
}
footer a:hover {
text-decoration: underline;
}
/* Responsive Adjustments */
@media (max-width: 576px) {
.balance-summary {
flex-direction: column;
gap: 15px;
}
.balance-item {
margin: 0;
}
.radio-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="brand">
<div class="logo">LwA</div>
<div class="brand-text">
<h1>Learn with Arshyan</h1>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>Project 4: Expense Tracker</p>
</div>
</div>
<div class="actions">
<button class="btn" id="reset-btn">
<i class="fas fa-redo"></i> Reset Data
</button>
</div>
</header>
<div class="dashboard">
<div class="card">
<h2><i class="fas fa-chart-line"></i> Financial Summary</h2>
<div class="balance-summary">
<div class="balance-item">
<h3>Total Balance</h3>
<div class="balance-value" id="balance">$0.00</div>
</div>
<div class="balance-item">
<h3>Total Income</h3>
<div class="balance-value" id="income">$0.00</div>
</div>
<div class="balance-item">
<h3>Total Expenses</h3>
<div class="balance-value" id="expense">$0.00</div>
</div>
</div>
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
<div class="card">
<h2><i class="fas fa-plus-circle"></i> Add Transaction</h2>
<form id="transaction-form">
<div class="form-group">
<label for="title">Transaction Title</label>
<input type="text" id="title" class="form-control" placeholder="e.g. Groceries, Salary" required>
</div>
<div class="form-group">
<label for="amount">Amount ($)</label>
<input type="number" id="amount" class="form-control" placeholder="e.g. 100" min="0" step="0.01" required>
</div>
<div class="radio-group">
<div class="radio-option income-option" data-type="income">
<i class="fas fa-arrow-down"></i>
<div>Income</div>
</div>
<div class="radio-option expense-option" data-type="expense">
<i class="fas fa-arrow-up"></i>
<div>Expense</div>
</div>
</div>
<div class="form-group">
<label for="category">Category</label>
<select id="category" class="form-control" required>
<option value="">Select a category</option>
<option value="salary">Salary</option>
<option value="freelance">Freelance</option>
<option value="investment">Investment</option>
<option value="food">Food & Dining</option>
<option value="shopping">Shopping</option>
<option value="transport">Transportation</option>
<option value="entertainment">Entertainment</option>
<option value="utilities">Utilities</option>
<option value="health">Health & Fitness</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" id="date" class="form-control" required>
</div>
<button type="submit" class="btn">
<i class="fas fa-plus"></i> Add Transaction
</button>
</form>
</div>
</div>
<div class="card">
<h2><i class="fas fa-history"></i> Recent Transactions</h2>
<div class="transactions" id="transactions-list">
<!-- Transactions will be added here dynamically -->
</div>
</div>
<footer>
<p>Created by <a href="#">Learn with Arshyan</a> | Expense Tracker Project | Source Code: learnwitharshyan.com/code | © 2025</p>
</footer>
</div>
<script>
// DOM Elements
const balanceElement = document.getElementById('balance');
const incomeElement = document.getElementById('income');
const expenseElement = document.getElementById('expense');
const transactionsList = document.getElementById('transactions-list');
const transactionForm = document.getElementById('transaction-form');
const resetBtn = document.getElementById('reset-btn');
const chartCanvas = document.getElementById('chart');
// Initialize transactions array
let transactions = JSON.parse(localStorage.getItem('transactions')) || [];
// Set current date as default
document.getElementById('date').valueAsDate = new Date();
// Initialize chart
const chart = new Chart(chartCanvas, {
type: 'doughnut',
data: {
labels: ['Income', 'Expenses'],
datasets: [{
data: [0, 0],
backgroundColor: ['#2ecc71', '#e74c3c'],
borderWidth: 0,
hoverOffset: 10
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
font: {
size: 14
},
padding: 20
}
},
tooltip: {
callbacks: {
label: function(context) {
return `$${context.parsed.toFixed(2)}`;
}
}
}
},
cutout: '70%'
}
});
// Format currency
function formatCurrency(amount) {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
}).format(amount);
}
// Update balance, income, and expense
function updateSummary() {
const amounts = transactions.map(transaction =>
transaction.type === 'income' ? transaction.amount : -transaction.amount
);
const balance = amounts.reduce((acc, item) => (acc += item), 0);
const income = amounts
.filter(item => item > 0)
.reduce((acc, item) => (acc += item), 0);
const expense = amounts
.filter(item => item < 0)
.reduce((acc, item) => (acc += item), 0) * -1;
balanceElement.textContent = formatCurrency(balance);
incomeElement.textContent = formatCurrency(income);
expenseElement.textContent = formatCurrency(expense);
// Update chart
chart.data.datasets[0].data = [income, expense];
chart.update();
}
// Add transaction to DOM
function addTransactionDOM(transaction) {
const sign = transaction.type === 'income' ? '+' : '-';
const item = document.createElement('div');
item.classList.add('transaction-item', transaction.type);
const categoryIcons = {
salary: 'fa-money-bill',
freelance: 'fa-laptop',
investment: 'fa-chart-line',
food: 'fa-utensils',
shopping: 'fa-shopping-bag',
transport: 'fa-car',
entertainment: 'fa-film',
utilities: 'fa-bolt',
health: 'fa-heartbeat',
other: 'fa-question-circle'
};
item.innerHTML = `
<div class="transaction-info">
<div class="transaction-icon">
<i class="fas ${categoryIcons[transaction.category] || 'fa-question-circle'}"></i>
</div>
<div class="transaction-details">
<h3>${transaction.title}</h3>
<p>${transaction.date} • ${transaction.category}</p>
</div>
</div>
<div class="transaction-amount">
${sign}${formatCurrency(transaction.amount)}
</div>
<button class="delete-btn" data-id="${transaction.id}">
<i class="fas fa-trash-alt"></i>
</button>
`;
transactionsList.insertBefore(item, transactionsList.firstChild);
}
// Update transactions list
function updateTransactionsList() {
// Clear list
transactionsList.innerHTML = '';
// Add transactions
transactions.slice().reverse().forEach(addTransactionDOM);
// Update summary
updateSummary();
}
// Generate random ID
function generateID() {
return Math.floor(Math.random() * 1000000000);
}
// Add new transaction
function addTransaction(e) {
e.preventDefault();
const title = document.getElementById('title').value;
const amount = parseFloat(document.getElementById('amount').value);
const type = document.querySelector('.radio-option.selected').dataset.type;
const category = document.getElementById('category').value;
const date = document.getElementById('date').value;
if (!title || !amount || !type || !category || !date) {
alert('Please fill all fields');
return;
}
const transaction = {
id: generateID(),
title,
amount,
type,
category,
date: new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})
};
transactions.push(transaction);
localStorage.setItem('transactions', JSON.stringify(transactions));
// Add to DOM
addTransactionDOM(transaction);
// Update summary
updateSummary();
// Reset form
transactionForm.reset();
document.getElementById('date').valueAsDate = new Date();
// Reset radio buttons
document.querySelectorAll('.radio-option').forEach(option => {
option.classList.remove('selected');
});
}
// Delete transaction
function deleteTransaction(id) {
transactions = transactions.filter(transaction => transaction.id !== id);
localStorage.setItem('transactions', JSON.stringify(transactions));
updateTransactionsList();
}
// Reset data
function resetData() {
if (confirm('Are you sure you want to reset all data?')) {
transactions = [];
localStorage.removeItem('transactions');
updateTransactionsList();
}
}
// Event listeners
transactionForm.addEventListener('submit', addTransaction);
resetBtn.addEventListener('click', resetData);
// Radio button selection
document.querySelectorAll('.radio-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.radio-option').forEach(opt => {
opt.classList.remove('selected');
});
this.classList.add('selected');
});
});
// Delete transaction event delegation
transactionsList.addEventListener('click', e => {
if (e.target.closest('.delete-btn')) {
const id = parseInt(e.target.closest('.delete-btn').dataset.id);
deleteTransaction(id);
}
});
// Initialize the app
function init() {
updateTransactionsList();
}
// Initialize on load
init();
</script>
</body>
</html>]]>
