How I Solved the Dream Ledger Project

Let me walk you through a project I recently completed, which I call the Dream Ledger. It’s an interactive tool for tracking income, expenses, and savings in a beautifully styled web application. I’ll explain the process of designing the HTML structure, applying CSS styles, and writing JavaScript functionality to bring it all to life.

Designing the HTML Structure

The HTML serves as the backbone of the project, defining the layout and structure. Here’s what I included:

Features:

1. A container wrapping the entire app.
2. Month selector: A dropdown to pick a month.
3. Overview section: Displays total income, expenses, savings, and remaining budget dynamically.
4. Sections for Income, Expenses, and Savings with input fields for adding details.
5. A Details section to show all transactions (incomes, expenses, savings).

HTML code snippet:

code<div class="container">
    <h1 class="title">Dream Ledger</h1>
    <div class="grid-container">
        <!-- Month Selector -->
        <div class="month-selector">
            <label for="month">Month</label>
            <select id="month">
                <option>November</option>
                <option>December</option>
                <option>January</option>
            </select>
        </div>
        <!-- Overview -->
        <div class="overview">
            <h2>Overview</h2>
            <p>Total Income: <span id="total-income">$2400.00</span></p>
            <p>Total Expenses: <span id="total-expenses">$0.00</span></p>
            <p>Total Savings: <span id="total-savings">$0.00</span></p>
            <p>Remaining Budget: <span id="remaining-budget">$2400.00</span></p>
        </div>
        <!-- Inputs for Income -->
        <div class="income">
            <h2>Income</h2>
            <input type="text" id="income-source" placeholder="Description">
            <input type="number" id="income-amount" placeholder="$0.00">
            <button onclick="addIncome()">Add Income</button>
        </div>
        <!-- Inputs for Expenses -->
        <div class="expense">
            <h2>Expense</h2>
            <input type="text" id="expense-description" placeholder="Description">
            <input type="number" id="expense-amount" placeholder="$0.00">
            <button onclick="addExpense()">Add Expense</button>
        </div>
        <!-- Inputs for Savings -->
        <div class="savings">
            <h2>Savings</h2>
            <input type="text" id="savings-description" placeholder="Description">
            <input type="number" id="savings-amount" placeholder="$0.00">
            <button onclick="addSavings()">Add Savings</button>
        </div>
        <!-- Details Section -->
        <div class="details">
            <h2>Details</h2>
            <div id="details-list">
                <p>Incomes</p>
                <p>Expenses</p>
                <p>Savings</p>
            </div>
        </div>
    </div>
</div>

Styling with CSS

To make the Dream Ledger visually appealing, I used CSS. Here’s what I did:

• Applied a linear gradient background for a vibrant look.
• Styled the container with padding, rounded corners, and a shadow.
• Used grid layout to organize sections neatly.
• Enhanced buttons and inputs with hover effects and responsive designs.

codebody {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #4c144c, #f062c0);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background: #3a063a;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

.title {
    text-align: center;
    font-size: 2em;
    color: #f062c0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

button {
    background: #ff79c6;
    border: none;
    color: #fff;
    cursor: pointer;
}

Adding JavaScript for Dynamic Behavior

The interactivity comes alive with JavaScript. Users can:

• Add income, expenses, and savings.
• Automatically calculate and display totals.
• See remaining budget dynamically.

Key JavaScript Functions:

1. updateOverview(): Updates totals dynamically.
2. addIncome(): Adds income details, updates total income, and refreshes the overview.
3. addExpense(): Similar to addIncome() but for expenses.
4. addSavings(): Handles savings input and updates.

codelet totalIncome = 2400; 
let totalExpenses = 0; 
let totalSavings = 0;

function updateOverview() {
    const remainingBudget = totalIncome - totalExpenses - totalSavings;
    document.getElementById('total-income').textContent = `$${totalIncome.toFixed(2)}`;
    document.getElementById('total-expenses').textContent = `$${totalExpenses.toFixed(2)}`;
    document.getElementById('total-savings').textContent = `$${totalSavings.toFixed(2)}`;
    document.getElementById('remaining-budget').textContent = `$${remainingBudget.toFixed(2)}`;
}

function addIncome() {
    const source = document.getElementById('income-source').value;
    const amount = parseFloat(document.getElementById('income-amount').value);
    if (source && amount > 0) {
        totalIncome += amount;
        document.getElementById('details-list').innerHTML += `<p>Income: ${source} - $${amount.toFixed(2)}</p>`;
        updateOverview();
    }
}

Benefits and Use This

1. Personal finance management: Track income, expenses, and savings.
2. Budgeting: Visualize remaining budget and make informed financial decisions.
3. Front-end development practice: Experiment with HTML, CSS, and JavaScript.

Final Thoughts

This project was a rewarding experience in combining HTML, CSS, and JavaScript. The result is an intuitive, user-friendly financial tracker that is both functional and visually appealing. Whether you’re looking to manage your budget or experiment with front-end technologies, this project is a great start. Try it out, tweak it to your needs, and keep coding.