File size: 2,186 Bytes
a529921 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
document.addEventListener('DOMContentLoaded', function() {
// Theme toggle functionality
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
// Check for saved theme preference or use preferred color scheme
const savedTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
html.classList.add(savedTheme);
themeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
const theme = html.classList.contains('dark') ? 'dark' : 'light';
localStorage.setItem('theme', theme);
feather.replace();
});
// Expense modal functionality
const addExpenseBtn = document.getElementById('add-expense-btn');
const expenseModal = document.getElementById('expense-modal');
const closeModal = document.getElementById('close-modal');
const expenseForm = document.getElementById('expense-form');
addExpenseBtn.addEventListener('click', () => {
expenseModal.classList.remove('hidden');
});
closeModal.addEventListener('click', () => {
expenseModal.classList.add('hidden');
});
expenseModal.addEventListener('click', (e) => {
if (e.target === expenseModal) {
expenseModal.classList.add('hidden');
}
});
expenseForm.addEventListener('submit', (e) => {
e.preventDefault();
// In a real app, you would send this data to your backend
const description = document.getElementById('description').value;
const amount = document.getElementById('amount').value;
const paidBy = document.getElementById('paid-by').value;
console.log('New expense:', { description, amount, paidBy });
// Reset form and close modal
expenseForm.reset();
expenseModal.classList.add('hidden');
// Show success message (in a real app, you would update the UI properly)
alert('Expense added successfully!');
});
// Initialize feather icons
feather.replace();
}); |