JavaScript ProjectsSoftware Projects

Create A Budget Tracker in HTML CSS & JavaScript

Creating a budget tracker with HTML, CSS, and JavaScript involves building a simple interface where users can add income and expenses and view their budget status. Below is a step-by-step guide on how to create a basic budget tracker.

HTML Structure

Create an HTML file with the necessary structure for the budget tracker.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Tracker</title>
    <link rel="stylesheet" href="styles.css">
    <div class="container">
        <h1>Budget Tracker</h1>
        <div class="budget-display">
            <div id="income">
                <p>$<span id="income-amount">0.00</span></p>
            <div id="expenses">
                <p>$<span id="expenses-amount">0.00</span></p>
            <div id="balance">
                <p>$<span id="balance-amount">0.00</span></p>
        <div class="transaction-form">
            <h2>Add Transaction</h2>
            <form id="transaction-form">
                <label for="type">Type:</label>
                <select id="type" required>
                    <option value="income">Income</option>
                    <option value="expense">Expense</option>
                <label for="description">Description:</label>
                <input type="text" id="description" required>
                <label for="amount">Amount:</label>
                <input type="number" id="amount" step="0.01" required>
                <button type="submit">Add Transaction</button>
        <div class="transaction-list">
            <h2>Transaction History</h2>
            <ul id="transaction-history"></ul>
    <script src="scripts.js"></script>

CSS Styling

Create a CSS file (styles.css) to style the budget tracker.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;

.container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;

h1 {
    margin-bottom: 1rem;

.budget-display {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;

.budget-display div {
    width: 30%;
    background-color: #f0f0f0;
    padding: 1rem;
    border-radius: 8px;

.transaction-form, .transaction-list {
    margin-bottom: 2rem;

form label, form input, form select, form button {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.5rem;

form button {
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;

form button:hover {
    background-color: #555;

.transaction-list ul {
    list-style: none;
    padding: 0;

.transaction-list li {
    display: flex;
    justify-content: space-between;
    background-color: #f0f0f0;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;

.transaction-list li.income {
    border-left: 5px solid green;

.transaction-list li.expense {
    border-left: 5px solid red;

JavaScript Functionality

Create a JavaScript file (scripts.js) to add the functionality to the budget tracker.

document.addEventListener("DOMContentLoaded", function() {
    const transactionForm = document.getElementById('transaction-form');
    const transactionHistory = document.getElementById('transaction-history');
    const incomeAmount = document.getElementById('income-amount');
    const expensesAmount = document.getElementById('expenses-amount');
    const balanceAmount = document.getElementById('balance-amount');

    let income = 0;
    let expenses = 0;

    transactionForm.addEventListener('submit', function(event) {

        const type = document.getElementById('type').value;
        const description = document.getElementById('description').value;
        const amount = parseFloat(document.getElementById('amount').value);

        if (type === 'income') {
            income += amount;
        } else {
            expenses += amount;

        addTransactionToHistory(type, description, amount);

    function updateBudgetDisplay() {
        incomeAmount.textContent = income.toFixed(2);
        expensesAmount.textContent = expenses.toFixed(2);
        balanceAmount.textContent = (income - expenses).toFixed(2);

    function addTransactionToHistory(type, description, amount) {
        const transactionItem = document.createElement('li');
        transactionItem.innerHTML = `

This example demonstrates how to create a simple budget tracker using HTML, CSS, and JavaScript. The application includes:

  • HTML: Structure for the tracker, including forms for adding transactions and displaying budget information.
  • CSS: Styling for a clean and user-friendly interface.
  • JavaScript: Functionality to handle adding transactions, updating the display, and maintaining a transaction history.

This basic setup can be further enhanced by adding features such as persistent storage using localStorage, more detailed budget categories, and data visualization for better budget tracking.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button