DEV Community

Vinkal Prajapati
Vinkal Prajapati

Posted on

Expense Tracker web application using HTML, CSS, and JavaScript.

#codepen #expensetracker #vinkalprajapati #beginners

HTML 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Expense Tracker</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Expense Tracker</h1> <div class="form-group"> <input type="text" id="expenseDescription" placeholder="Enter expense description"> <input type="number" id="expenseAmount" placeholder="Enter amount"> <button id="addExpenseBtn">Add Expense</button> </div> <div class="expense-list"> <h2>Expense List</h2> <ul id="expenseList"> <!-- Expenses will be dynamically added here --> </ul> </div> <div class="total-expenses"> <h2>Total Expenses: <span id="totalExpensesAmount">0</span></h2> </div> </div> <script src="script.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

CSS 

body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } .form-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .form-group input { padding: 10px; flex: 1; margin-right: 10px; } .form-group button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } .expense-list { margin-bottom: 20px; } .expense-list h2 { margin: 0; } .expense-list ul { list-style: none; padding: 0; } .expense-list li { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #ccc; } .expense-list li:last-child { border-bottom: none; } .total-expenses h2 { margin: 0; text-align: right; } .total-expenses span { font-weight: bold; }
Enter fullscreen mode Exit fullscreen mode

Java Script 

document.addEventListener("DOMContentLoaded", () => { const expenseList = document.getElementById("expenseList"); const expenseDescriptionInput = document.getElementById("expenseDescription"); const expenseAmountInput = document.getElementById("expenseAmount"); const addExpenseBtn = document.getElementById("addExpenseBtn"); const totalExpensesAmount = document.getElementById("totalExpensesAmount"); // Retrieve expenses from local storage or set an empty array let expenses = JSON.parse(localStorage.getItem("expenses")) || []; // Function to update the total expenses amount function updateTotalExpenses() { const totalExpenses = expenses.reduce((total, expense) => total + expense.amount, 0); totalExpensesAmount.textContent = totalExpenses; } // Function to render the expense list function renderExpenses() { expenseList.innerHTML = ""; expenses.forEach((expense, index) => { const li = document.createElement("li"); li.innerHTML = ` <span>${expense.description}</span> <span>$${expense.amount}</span> <button class="delete-btn" data-index="${index}">Delete</button> `; expenseList.appendChild(li); }); updateTotalExpenses(); } // Function to add a new expense function addExpense() { const description = expenseDescriptionInput.value.trim(); const amount = parseFloat(expenseAmountInput.value); if (description === "" || isNaN(amount) || amount <= 0) { return; } const newExpense = { description, amount }; expenses.push(newExpense); localStorage.setItem("expenses", JSON.stringify(expenses)); renderExpenses(); // Clear input fields expenseDescriptionInput.value = ""; expenseAmountInput.value = ""; } // Function to delete an expense function deleteExpense(index) { expenses.splice(index, 1); localStorage.setItem("expenses", JSON.stringify(expenses)); renderExpenses(); } // Event listener for adding an expense addExpenseBtn.addEventListener("click", addExpense); // Event delegation for deleting an expense expenseList.addEventListener("click", (event) => { if (event.target.classList.contains("delete-btn")) { const index = event.target.dataset.index; deleteExpense(index); } }); // Initial rendering of expenses renderExpenses(); });
Enter fullscreen mode Exit fullscreen mode

** I can provide you with a simple Expense Tracker web application using HTML, CSS, and JavaScript. This application will allow users to add and manage their expenses. The data will be stored in the browser's local storage for simplicity.**

Top comments (0)