Budget Tracker App

Prompt

Using javascript create budget tracking app dashboard.

A system prompt was added to support web rendering

Alibaba

Qwen3 Coder 480B A35B Instruct

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Tracking Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e0e6ed;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 28px;
        }
        
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
        }
        
        .stat-card i {
            font-size: 24px;
            margin-bottom: 15px;
        }
        
        .income i { color: #27ae60; }
        .expense i { color: #e74c3c; }
        .balance i { color: #3498db; }
        .budget i { color: #f39c12; }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .stat-title {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }
        
        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .chart-container {
            height: 300px;
            position: relative;
        }
        
        .transactions {
            grid-column: span 2;
        }
        
        @media (max-width: 768px) {
            .transactions {
                grid-column: span 1;
            }
        }
        
        .transaction-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .btn {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            color: #7f8c8d;
            font-weight: 600;
            font-size: 14px;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .income-row {
            color: #27ae60;
        }
        
        .expense-row {
            color: #e74c3c;
        }
        
        .delete-btn {
            background: none;
            border: none;
            color: #e74c3c;
            cursor: pointer;
            font-size: 16px;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #7f8c8d;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-wallet"></i> Budget Tracker</h1>
            <div class="user-info">
                <i class="fas fa-user-circle"></i> User Dashboard
            </div>
        </header>
        
        <div class="dashboard-stats">
            <div class="stat-card income">
                <i class="fas fa-arrow-down"></i>
                <div class="stat-value" id="total-income">$0.00</div>
                <div class="stat-title">Total Income</div>
            </div>
            
            <div class="stat-card expense">
                <i class="fas fa-arrow-up"></i>
                <div class="stat-value" id="total-expense">$0.00</div>
                <div class="stat-title">Total Expenses</div>
            </div>
            
            <div class="stat-card balance">
                <i class="fas fa-balance-scale"></i>
                <div class="stat-value" id="balance">$0.00</div>
                <div class="stat-title">Current Balance</div>
            </div>
            
            <div class="stat-card budget">
                <i class="fas fa-bullseye"></i>
                <div class="stat-value" id="budget">$2,500.00</div>
                <div class="stat-title">Monthly Budget</div>
            </div>
        </div>
        
        <div class="main-content">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Income vs Expense</div>
                </div>
                <div class="chart-container">
                    <canvas id="incomeExpenseChart"></canvas>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Expense Breakdown</div>
                </div>
                <div class="chart-container">
                    <canvas id="expenseChart"></canvas>
                </div>
            </div>
            
            <div class="card transactions">
                <div class="card-header">
                    <div class="card-title">Recent Transactions</div>
                </div>
                
                <div class="transaction-form">
                    <div class="form-group">
                        <label for="description">Description</label>
                        <input type="text" id="description" placeholder="Enter description">
                    </div>
                    
                    <div class="form-group">
                        <label for="amount">Amount ($)</label>
                        <input type="number" id="amount" placeholder="Enter amount" step="0.01">
                    </div>
                    
                    <div class="form-group">
                        <label for="type">Type</label>
                        <select id="type">
                            <option value="income">Income</option>
                            <option value="expense">Expense</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="category">Category</label>
                        <select id="category">
                            <option value="salary">Salary</option>
                            <option value="freelance">Freelance</option>
                            <option value="investment">Investment</option>
                            <option value="food">Food</option>
                            <option value="transport">Transport</option>
                            <option value="shopping">Shopping</option>
                            <option value="entertainment">Entertainment</option>
                            <option value="utilities">Utilities</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                </div>
                
                <button id="add-transaction" class="btn btn-primary">Add Transaction</button>
                
                <div class="transactions-list">
                    <table id="transactions-table">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Category</th>
                                <th>Amount</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="transactions-body">
                            <!-- Transactions will be added here by JavaScript -->
                        </tbody>
                    </table>
                    <div id="empty-transaction" class="empty-state">
                        <i class="fas fa-file-invoice-dollar"></i>
                        <h3>No Transactions Yet</h3>
                        <p>Add your first transaction to get started</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Sample initial data
        let transactions = [
            { id: 1, description: "Salary", category: "salary", amount: 3500, type: "income", date: "2023-06-01" },
            { id: 2, description: "Grocery Shopping", category: "food", amount: 125.75, type: "expense", date: "2023-06-03" },
            { id: 3, description: "Electricity Bill", category: "utilities", amount: 85.50, type: "expense", date: "2023-06-05" },
            { id: 4, description: "Freelance Project", category: "freelance", amount: 1200, type: "income", date: "2023-06-10" },
            { id: 5, description: "Gas", category: "transport", amount: 50, type: "expense", date: "2023-06-12" }
        ];
        
        // DOM Elements
        const totalIncomeEl = document.getElementById('total-income');
        const totalExpenseEl = document.getElementById('total-expense');
        const balanceEl = document.getElementById('balance');
        const transactionsBody = document.getElementById('transactions-body');
        const emptyTransactionEl = document.getElementById('empty-transaction');
        const addTransactionBtn = document.getElementById('add-transaction');
        
        // Chart instances
        let incomeExpenseChart;
        let expenseChart;
        
        // Initialize the dashboard
        function initDashboard() {
            updateSummary();
            renderTransactions();
            initCharts();
        }
        
        // Update summary cards
        function updateSummary() {
            const income = transactions
                .filter(t => t.type === 'income')
                .reduce((sum, t) => sum + t.amount, 0);
                
            const expense = transactions
                .filter(t => t.type === 'expense')
                .reduce((sum, t) => sum + t.amount, 0);
                
            const balance = income - expense;
            
            totalIncomeEl.textContent = `$${income.toFixed(2)}`;
            totalExpenseEl.textContent = `$${expense.toFixed(2)}`;
            balanceEl.textContent = `$${balance.toFixed(2)}`;
            
            // Update balance color
            if (balance < 0) {
                balanceEl.style.color = '#e74c3c';
            } else {
                balanceEl.style.color = '#27ae60';
            }
        }
        
        // Render transactions table
        function renderTransactions() {
            transactionsBody.innerHTML = '';
            
            if (transactions.length === 0) {
                emptyTransactionEl.style.display = 'block';
                return;
            }
            
            emptyTransactionEl.style.display = 'none';
            
            // Sort transactions by date (newest first)
            const sortedTransactions = [...transactions].sort((a, b) => 
                new Date(b.date) - new Date(a.date)
            );
            
            sortedTransactions.forEach(transaction => {
                const row = document.createElement('tr');
                row.className = transaction.type === 'income' ? 'income-row' : 'expense-row';
                
                row.innerHTML = `
                    <td>${transaction.description}</td>
                    <td>${transaction.category.charAt(0).toUpperCase() + transaction.category.slice(1)}</td>
                    <td>$${transaction.amount.toFixed(2)}</td>
                    <td>${new Date(transaction.date).toLocaleDateString()}</td>
                    <td>
                        <button class="delete-btn" data-id="${transaction.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                `;
                
                transactionsBody.appendChild(row);
            });
            
            // Add event listeners to delete buttons
            document.querySelectorAll('.delete-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const id = parseInt(this.getAttribute('data-id'));
                    deleteTransaction(id);
                });
            });
        }
        
        // Delete a transaction
        function deleteTransaction(id) {
            transactions = transactions.filter(t => t.id !== id);
            updateSummary();
            renderTransactions();
            updateCharts();
        }
        
        // Add new transaction
        function addTransaction() {
            const description = document.getElementById('description').value;
            const amount = parseFloat(document.getElementById('amount').value);
            const type = document.getElementById('type').value;
            const category = document.getElementById('category').value;
            
            if (!description || isNaN(amount) || amount <= 0) {
                alert('Please enter valid transaction details');
                return;
            }
            
            const newTransaction = {
                id: Date.now(), // Simple ID generation
                description,
                amount,
                type,
                category,
                date: new Date().toISOString().split('T')[0]
            };
            
            transactions.push(newTransaction);
            
            // Clear form
            document.getElementById('description').value = '';
            document.getElementById('amount').value = '';
            document.getElementById('type').value = 'income';
            document.getElementById('category').value = 'salary';
            
            updateSummary();
            renderTransactions();
            updateCharts();
        }
        
        // Initialize charts
        function initCharts() {
            const incomeExpenseCtx = document.getElementById('incomeExpenseChart').getContext('2d');
            const expenseCtx = document.getElementById('expenseChart').getContext('2d');
            
            // Income vs Expense Chart
            incomeExpenseChart = new Chart(incomeExpenseCtx, {
                type: 'bar',
                data: {
                    labels: ['Income', 'Expenses'],
                    datasets: [{
                        label: 'Amount ($)',
                        data: [
                            transactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0),
                            transactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0)
                        ],
                        backgroundColor: [
                            '#27ae60',
                            '#e74c3c'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '$' + value;
                                }
                            }
                        }
                    }
                }
            });
            
            // Expense Breakdown Chart
            const expenseCategories = {};
            transactions
                .filter(t => t.type === 'expense')
                .forEach(t => {
                    expenseCategories[t.category] = (expenseCategories[t.category] || 0) + t.amount;
                });
            
            const categories = Object.keys(expenseCategories);
            const amounts = Object.values(expenseCategories);
            
            expenseChart = new Chart(expenseCtx, {
                type: 'pie',
                data: {
                    labels: categories.map(c => c.charAt(0).toUpperCase() + c.slice(1)),
                    datasets: [{
                        data: amounts,
                        backgroundColor: [
                            '#3498db', '#9b59b6', '#f1c40f', '#e67e22',
                            '#1abc9c', '#2ecc71', '#e74c3c', '#34495e'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
        }
        
        // Update charts with new data
        function updateCharts() {
            // Update Income vs Expense Chart
            incomeExpenseChart.data.datasets[0].data = [
                transactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0),
                transactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0)
            ];
            incomeExpenseChart.update();
            
            // Update Expense Breakdown Chart
            const expenseCategories = {};
            transactions
                .filter(t => t.type === 'expense')
                .forEach(t => {
                    expenseCategories[t.category] = (expenseCategories[t.category] || 0) + t.amount;
                });
            
            const categories = Object.keys(expenseCategories);
            const amounts = Object.values(expenseCategories);
            
            expenseChart.data.labels = categories.map(c => c.charAt(0).toUpperCase() + c.slice(1));
            expenseChart.data.datasets[0].data = amounts;
            expenseChart.update();
        }
        
        // Event Listeners
        addTransactionBtn.addEventListener('click', addTransaction);
        
        // Initialize the dashboard when the page loads
        document.addEventListener('DOMContentLoaded', initDashboard);
    </script>
</body>
</html>
```

Drag to resize

OpenAI

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Budget Tracking Dashboard</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap-icons (loaded again in JS for browsers that block preload, but adding here speeds up first paint) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    body{background:#f5f8fb;}
    .card{margin-bottom:1rem;}
    .transaction-list{max-height:300px;overflow-y:auto;}
    .cursor-pointer{cursor:pointer;}
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="text-center mb-4">Budget Tracking Dashboard</h2>

    <div class="row">
      <!-- LEFT COLUMN -------------------------------------------------------->
      <div class="col-md-4">
        <!-- Balance summary -->
        <div class="card text-white bg-primary">
          <div class="card-body">
            <h5 class="card-title m-0">Balance</h5>
            <h2 id="balance" class="m-0">$0.00</h2>
          </div>
        </div>

        <!-- Income & expense totals -->
        <div class="card bg-light">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <span>Total Income</span>
              <span id="income" class="text-success">$0.00</span>
            </div>
            <div class="d-flex justify-content-between">
              <span>Total Expense</span>
              <span id="expense" class="text-danger">$0.00</span>
            </div>
          </div>
        </div>

        <!-- Add transaction form -->
        <div class="card">
          <div class="card-header">Add Transaction</div>
          <div class="card-body">
            <form id="txn-form">
              <div class="mb-2">
                <input id="desc" class="form-control" placeholder="Description" required>
              </div>
              <div class="mb-2">
                <input id="amount" type="number" step="0.01" class="form-control" placeholder="Amount" required>
              </div>
              <div class="mb-3">
                <select id="category" class="form-select" required>
                  <option value="" disabled selected>Category</option>
                  <option value="Income">Income</option>
                  <option value="Housing">Housing</option>
                  <option value="Food">Food</option>
                  <option value="Transportation">Transportation</option>
                  <option value="Utilities">Utilities</option>
                  <option value="Entertainment">Entertainment</option>
                  <option value="Other">Other</option>
                </select>
              </div>
              <button class="btn btn-primary w-100" type="submit">Add</button>
            </form>
          </div>
        </div>
      </div>

      <!-- RIGHT COLUMN ------------------------------------------------------->
      <div class="col-md-8">
        <!-- Transaction list -->
        <div class="card">
          <div class="card-header">Transactions</div>
          <ul id="txn-list" class="list-group list-group-flush transaction-list"></ul>
        </div>

        <!-- Expense-by-category chart -->
        <div class="card mt-3">
          <div class="card-header">Expenses by Category</div>
          <div class="card-body">
            <canvas id="expenseChart" height="140"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

  <script>
  /**********************
   *  Budget Tracker JS *
   **********************/
  const form        = document.getElementById('txn-form');
  const descInput   = document.getElementById('desc');
  const amountInput = document.getElementById('amount');
  const catInput    = document.getElementById('category');
  const listEl      = document.getElementById('txn-list');
  const balanceEl   = document.getElementById('balance');
  const incomeEl    = document.getElementById('income');
  const expenseEl   = document.getElementById('expense');

  // Read / write transactions to localStorage
  let transactions = JSON.parse(localStorage.getItem('transactions') || '[]');

  function save() {
    localStorage.setItem('transactions', JSON.stringify(transactions));
  }

  /********* ADD OR DELETE TRANSACTIONS *********/
  function handleAdd(e){
    e.preventDefault();
    const desc = descInput.value.trim();
    const raw  = parseFloat(amountInput.value);
    const cat  = catInput.value;

    if(!desc || isNaN(raw) || !cat) return;

    // Ensure sign: positive for income, negative for expenses
    const amt = cat === 'Income' ?  Math.abs(raw) : -Math.abs(raw);

    transactions.push({
      id: Date.now(),
      desc,
      amount: amt,
      category: cat
    });

    save();
    form.reset();
    render();
  }

  function handleDelete(id){
    transactions = transactions.filter(t => t.id !== id);
    save();
    render();
  }

  /************ RENDERING FUNCTIONS *************/
  function totals(){
    const income  = transactions.filter(t=>t.amount>0).reduce((s,t)=>s+t.amount,0);
    const expense = Math.abs(transactions.filter(t=>t.amount<0).reduce((s,t)=>s+t.amount,0));
    return {income,expense,balance:income-expense};
  }

  function renderSummary(){
    const {income,expense,balance}=totals();
    balanceEl.textContent = '$'+balance.toFixed(2);
    incomeEl.textContent  = '$'+income.toFixed(2);
    expenseEl.textContent = '$'+expense.toFixed(2);
  }

  function renderList(){
    listEl.innerHTML='';
    if(!transactions.length){
      listEl.innerHTML='<li class="list-group-item text-center text-muted">No transactions yet</li>';
      return;
    }
    // newest first
    transactions.slice().sort((a,b)=>b.id-a.id).forEach(t=>{
      const li=document.createElement('li');
      li.className='list-group-item d-flex justify-content-between align-items-center';
      li.innerHTML=`
         <div class="d-flex flex-column">
           <span>${t.desc}</span>
           <small class="text-muted">${t.category}</small>
         </div>
         <div class="d-flex align-items-center gap-2">
           <span class="${t.amount>=0?'text-success':'text-danger'}">
             ${t.amount>=0?'+':'-'}$${Math.abs(t.amount).toFixed(2)}
           </span>
           <i class="bi bi-trash cursor-pointer text-danger" data-id="${t.id}"></i>
         </div>`;
      listEl.appendChild(li);
    });
  }

  let chart;
  function renderChart(){
    const dataByCat={};
    transactions.filter(t=>t.amount<0).forEach(t=>{
      const c=t.category||'Other';
      dataByCat[c]=(dataByCat[c]||0)+Math.abs(t.amount);
    });
    const labels=Object.keys(dataByCat);
    const data  =Object.values(dataByCat);

    if(chart)chart.destroy();
    chart=new Chart(document.getElementById('expenseChart'),{
      type:'doughnut',
      data:{
        labels,
        datasets:[{
          data,
          backgroundColor:[
            '#dc3545','#ffc107','#0d6efd',
            '#20c997','#6f42c1','#fd7e14','#198754'
          ]
        }]
      },
      options:{
        plugins:{legend:{position:'bottom'}},
        responsive:true,
        maintainAspectRatio:false
      }
    });
  }

  function render(){
    renderList();
    renderSummary();
    renderChart();
  }

  /***************** EVENT LISTENERS *****************/
  form.addEventListener('submit',handleAdd);
  listEl.addEventListener('click',e=>{
    if(e.target.matches('.bi-trash')){
      handleDelete(Number(e.target.dataset.id));
    }
  });

  // Some browsers block preloaded icon fonts when inserted with JS, so add fallback:
  (function ensureIcons(){
    if(!document.querySelector('link[href*="bootstrap-icons"]')){
      const l=document.createElement('link');
      l.rel='stylesheet';
      l.href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css';
      document.head.appendChild(l);
    }
  })();

  render();
  </script>
</body>
</html>
```

Drag to resize

Google

Gemini 2.5 Pro

Of course! Here is a complete, self-contained budget tracking dashboard. It includes HTML for the structure, CSS for styling, and JavaScript for all the interactive functionality, including dynamic charts.

Just copy and paste the code below into an HTML file and open it in a web browser.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Tracker Dashboard</title>
    <!-- Include Chart.js library for data visualization -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-bg: #f4f7fa;
            --card-bg: #ffffff;
            --text-color: #333;
            --text-light: #666;
            --border-color: #e0e0e0;
            --shadow-color: rgba(0, 0, 0, 0.05);
            --income-color: #2ecc71;
            --expense-color: #e74c3c;
            --balance-color: #3498db;
            --accent-color: #3498db;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--primary-bg);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        .dashboard-container {
            width: 100%;
            max-width: 1200px;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto 1fr;
            gap: 20px;
        }

        h1 {
            text-align: center;
            color: var(--balance-color);
            margin-bottom: 0;
        }

        /* Summary Cards */
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .card {
            background-color: var(--card-bg);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 15px var(--shadow-color);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            margin: 0 0 10px 0;
            font-size: 1rem;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .card .amount {
            font-size: 2rem;
            font-weight: 600;
        }

        #total-income { color: var(--income-color); }
        #total-expenses { color: var(--expense-color); }
        #balance { color: var(--balance-color); }

        /* Main Content Area */
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* Transactions Section */
        .transactions-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Form Styling */
        #transaction-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        #transaction-form input,
        #transaction-form select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-sizing: border-box; /* Important for padding */
            font-size: 1rem;
        }
        
        #transaction-form input:focus,
        #transaction-form select:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        #transaction-form button {
            background-color: var(--accent-color);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        #transaction-form button:hover {
            background-color: #2980b9;
        }

        /* Transaction List */
        #transaction-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            max-height: 400px;
            overflow-y: auto;
        }

        .transaction-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: #fff;
            border-bottom: 1px solid var(--border-color);
        }
        
        .transaction-item:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        
        .transaction-item:last-child {
            border-bottom: none;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .transaction-item span {
            font-weight: 500;
        }

        .transaction-item .amount {
            font-family: 'Courier New', Courier, monospace;
        }

        .transaction-item.income .amount {
            color: var(--income-color);
        }

        .transaction-item.expense .amount {
            color: var(--expense-color);
        }
        
        .delete-btn {
            background-color: #f7f7f7;
            border: 1px solid #ddd;
            color: var(--expense-color);
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        .transaction-item:hover .delete-btn {
            opacity: 1;
        }

        /* Chart Section */
        .chart-section {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Responsive Design */
        @media (max-width: 900px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            .chart-section {
                order: -1; /* Move chart above transactions on smaller screens */
            }
        }
        @media (max-width: 600px) {
             body {
                padding: 10px;
            }
            .summary-cards {
                grid-template-columns: 1fr;
            }
            h1 {
                font-size: 1.8rem;
            }
        }

    </style>
</head>
<body>

    <div class="dashboard-container">
        <header>
            <h1>Budget Tracker</h1>
        </header>

        <section class="summary-cards">
            <div class="card">
                <h2>Total Income</h2>
                <span class="amount" id="total-income">$0.00</span>
            </div>
            <div class="card">
                <h2>Total Expenses</h2>
                <span class="amount" id="total-expenses">$0.00</span>
            </div>
            <div class="card">
                <h2>Balance</h2>
                <span class="amount" id="balance">$0.00</span>
            </div>
        </section>

        <main class="main-content">
            <section class="transactions-section">
                <div class="card">
                    <h2>Add New Transaction</h2>
                    <form id="transaction-form">
                        <select id="transaction-type">
                            <option value="income">Income</option>
                            <option value="expense">Expense</option>
                        </select>
                        <input type="text" id="transaction-description" placeholder="Description (e.g., Groceries)" required>
                        <input type="number" id="transaction-amount" placeholder="Amount" min="0.01" step="0.01" required>
                        <button type="submit">Add Transaction</button>
                    </form>
                </div>
                <div class="card">
                    <h2>Transaction History</h2>
                    <ul id="transaction-list">
                        <!-- Transactions will be dynamically inserted here -->
                    </ul>
                </div>
            </section>
            <section class="chart-section card">
                 <canvas id="expense-chart"></canvas>
            </section>
        </main>
    </div>

    <script>
        // DOM Elements
        const balanceEl = document.getElementById('balance');
        const totalIncomeEl = document.getElementById('total-income');
        const totalExpensesEl = document.getElementById('total-expenses');
        const transactionListEl = document.getElementById('transaction-list');
        const form = document.getElementById('transaction-form');
        const transactionTypeEl = document.getElementById('transaction-type');
        const transactionDescEl = document.getElementById('transaction-description');
        const transactionAmountEl = document.getElementById('transaction-amount');
        const expenseChartCanvas = document.getElementById('expense-chart').getContext('2d');

        // State: Use localStorage to persist data, or default to sample data
        let transactions = JSON.parse(localStorage.getItem('transactions')) || [
            { id: 1, type: 'income', description: 'Monthly Salary', amount: 5000 },
            { id: 2, type: 'expense', description: 'Rent', amount: 1500 },
            { id: 3, type: 'expense', description: 'Groceries', amount: 350 },
            { id: 4, type: 'income', description: 'Freelance Project', amount: 800 },
            { id: 5, type: 'expense', description: 'Utilities', amount: 150 },
            { id: 6, type: 'expense', description: 'Dinner Out', amount: 75 },
        ];
        
        let expenseChart;

        // --- FUNCTIONS ---

        // Function to generate a unique ID
        function generateID() {
            return Math.floor(Math.random() * 100000000);
        }

        // Add a new transaction
        function addTransaction(e) {
            e.preventDefault();

            if (transactionDescEl.value.trim() === '' || transactionAmountEl.value.trim() === '') {
                alert('Please add a description and amount.');
                return;
            }

            const transaction = {
                id: generateID(),
                type: transactionTypeEl.value,
                description: transactionDescEl.value,
                amount: +transactionAmountEl.value, // Convert to number
            };

            transactions.push(transaction);
            
            updateDOM();
            updateLocalStorage();

            // Clear form fields
            transactionDescEl.value = '';
            transactionAmountEl.value = '';
            transactionDescEl.focus(); 
        }
        
        // Delete transaction by ID
        function deleteTransaction(id) {
            transactions = transactions.filter(transaction => transaction.id !== id);
            updateDOM();
            updateLocalStorage();
        }

        // Update the transaction list in the DOM
        function addTransactionToDOM(transaction) {
            const item = document.createElement('li');
            const sign = transaction.type === 'income' ? '+' : '-';
            
            item.classList.add('transaction-item', transaction.type);

            item.innerHTML = `
                <span>${transaction.description}</span>
                <div>
                   <span class="amount">${sign}$${formatMoney(transaction.amount)}</span>
                   <button class="delete-btn" onclick="deleteTransaction(${transaction.id})">x</button>
                </div>
            `;
            transactionListEl.appendChild(item);
        }

        // Update summary cards (Income, Expense, Balance)
        function updateSummary() {
            const amounts = transactions.map(t => t.amount);
            
            const income = amounts
                .filter((_, i) => transactions[i].type === 'income')
                .reduce((acc, item) => (acc += item), 0);
            
            const expenses = amounts
                .filter((_, i) => transactions[i].type === 'expense')
                .reduce((acc, item) => (acc += item), 0);
                
            const balance = income - expenses;

            totalIncomeEl.innerText = `+${formatMoney(income)}`;
            totalExpensesEl.innerText = `-${formatMoney(expenses)}`;
            balanceEl.innerText = formatMoney(balance);

            // Change balance color based on value
            balanceEl.style.color = balance >= 0 ? 'var(--balance-color)' : 'var(--expense-color)';
        }
        
        // Update the expense pie chart
        function updateChart() {
            const expenseData = transactions
                .filter(t => t.type === 'expense')
                .reduce((acc, transaction) => {
                    const desc = transaction.description;
                    if (!acc[desc]) {
                        acc[desc] = 0;
                    }
                    acc[desc] += transaction.amount;
                    return acc;
                }, {});

            const labels = Object.keys(expenseData);
            const data = Object.values(expenseData);

            if (expenseChart) {
                expenseChart.destroy(); // Destroy old chart before creating a new one
            }

            if (labels.length === 0) {
                 // Handle case with no expenses
                expenseChartCanvas.clearRect(0, 0, expenseChartCanvas.canvas.width, expenseChartCanvas.canvas.height);
                expenseChartCanvas.canvas.style.display = 'none'; // Hide canvas if no data
            } else {
                expenseChartCanvas.canvas.style.display = 'block'; // Show if data exists
                expenseChart = new Chart(expenseChartCanvas, {
                    type: 'doughnut',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Expense Breakdown',
                            data: data,
                            backgroundColor: [
                                '#e74c3c', '#3498db', '#9b59b6', '#f1c40f',
                                '#1abc9c', '#e67e22', '#2c3e50', '#7f8c8d'
                            ],
                            borderColor: var(--card-bg),
                            borderWidth: 4,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    color: var(--text-light),
                                    boxWidth: 15,
                                    padding: 20
                                }
                            },
                             title: {
                                display: true,
                                text: 'Expense Breakdown',
                                color: var(--text-color),
                                font: {
                                    size: 18,
                                    weight: '600'
                                },
                                padding: {
                                    top: 10,
                                    bottom: 20
                                }
                            }
                        }
                    }
                });
            }
        }
        
        // Helper function to format money
        function formatMoney(number) {
            return '$' + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        }
        
        // Update localStorage
        function updateLocalStorage() {
            localStorage.setItem('transactions', JSON.stringify(transactions));
        }

        // Main initialization and update function
        function updateDOM() {
            transactionListEl.innerHTML = '';
            if (transactions.length > 0) {
                transactions.forEach(addTransactionToDOM);
            }
            updateSummary();
            updateChart();
        }

        // --- EVENT LISTENERS and INITIALIZATION ---
        
        form.addEventListener('submit', addTransaction);
        
        document.addEventListener('DOMContentLoaded', updateDOM);

    </script>
</body>
</html>
```

Drag to resize

OpenAI

GPT-4.1

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Budget Tracking Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google Fonts for better look -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
    <!-- Chart.js for data visualization -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Roboto', Arial, sans-serif;
            margin: 0;
            background: #f4f6f8;
            color: #363636;
        }
        .container {
            max-width: 900px;
            margin: 40px auto;
            background: #fff;
            border-radius: 12px;
            padding: 32px 24px 40px 24px;
            box-shadow: 0 0 16px 0 #cfd8dc66;
        }
        h1 {
            text-align: center;
            margin-bottom: 26px;
        }
        .summary {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
        }
        .card {
            background: #f0f4f8;
            border-radius: 10px;
            padding: 18px;
            text-align: center;
            box-shadow: 0 2px 8px 0 #b0bccc22;
            min-width: 120px;
            flex: 1;
            margin: 0 8px;
        }
        .card span {
            font-size: 1.15em;
            color: #666;
        }
        .card h2 {
            margin: 6px 0 0 0;
            font-size: 2em;
            color: #1976d2;
        }
        form {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 24px 0 16px 0;
            align-items: end;
        }
        form > * {
            flex: 1 1 120px;
        }
        input, select, button {
            padding: 8px 12px;
            font-size: 1em;
            border-radius: 6px;
            border: 1px solid #ccc;
            outline: none;
        }
        button {
            background: #1976d2;
            color: white;
            border: none;
            cursor: pointer;
            transition: background 0.2s;
        }
        button:hover {
            background: #135ba1;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: #fafbfc;
            margin-top: 18px;
        }
        th, td {
            padding: 10px 7px;
            text-align: left;
        }
        th {
            background: #e3e7ea;
        }
        tr:nth-child(even) {
            background: #f4f6f9;
        }
        tr:hover td {
            background: #edefff;
        }
        .delete-btn {
            background: #ff5252;
            color: #fff;
            padding: 5px 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        @media (max-width: 700px) {
            .container {
                padding: 12px 5px 30px 5px;
            }
            .summary {
                flex-direction: column;
                gap: 14px 0;
            }
            form {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Budget Tracker Dashboard</h1>
    <div class="summary">
        <div class="card">
            <span>Total Income</span>
            <h2 id="total-income">$0</h2>
        </div>
        <div class="card">
            <span>Total Expenses</span>
            <h2 id="total-expenses">$0</h2>
        </div>
        <div class="card">
            <span>Balance</span>
            <h2 id="balance">$0</h2>
        </div>
    </div>

    <form id="transaction-form">
        <input type="text" id="desc" placeholder="Description" required>
        <input type="number" step="0.01" id="amount" placeholder="Amount" required>
        <select id="type">
            <option value="income">Income</option>
            <option value="expense">Expense</option>
        </select>
        <select id="category">
            <option value="Salary">Salary</option>
            <option value="Food">Food</option>
            <option value="Rent">Rent</option>
            <option value="Transport">Transport</option>
            <option value="Shopping">Shopping</option>
            <option value="Investment">Investment</option>
            <option value="Other">Other</option>
        </select>
        <button type="submit">Add</button>
    </form>

    <canvas id="expenseChart" style="max-width: 600px; margin: 24px auto 12px; display: block"></canvas>
    
    <h2 style="margin-top:30px;">Transaction History</h2>
    <table id="transactions-table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Description</th>
                <th>Category</th>
                <th>Type</th>
                <th>Amount</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <!-- Transactions will be rendered here -->
        </tbody>
    </table>
</div>

<script>
    // Helper functions for local storage
    function getTransactions() {
        return JSON.parse(localStorage.getItem('budget_transactions') || '[]');
    }
    function saveTransactions(arr) {
        localStorage.setItem('budget_transactions', JSON.stringify(arr));
    }

    // Render summary (total income, expense, balance)
    function renderSummary() {
        const transactions = getTransactions();
        let income = 0, expenses = 0;
        transactions.forEach(tx => {
            if (tx.type === 'income') income += tx.amount;
            else expenses += tx.amount;
        });
        document.getElementById('total-income').textContent = `$${income.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2})}`;
        document.getElementById('total-expenses').textContent = `$${expenses.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2})}`;
        document.getElementById('balance').textContent = `$${(income - expenses).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2})}`;
    }

    // Render transaction table
    function renderTable() {
        const tbody = document.querySelector('#transactions-table tbody');
        const transactions = getTransactions().sort((a,b) => new Date(b.date) - new Date(a.date));
        tbody.innerHTML = '';
        for(const [idx, tx] of transactions.entries()) {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${new Date(tx.date).toLocaleDateString()}</td>
                <td>${tx.description}</td>
                <td>${tx.category}</td>
                <td style="color:${tx.type === 'income' ? '#388e3c': '#e53935'};font-weight:bold">${tx.type.charAt(0).toUpperCase() + tx.type.slice(1)}</td>
                <td style="font-weight:bold">${tx.type === 'income' ? '+' : '-'}$${tx.amount.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2})}</td>
                <td><button class="delete-btn" data-id="${tx.id}" title="Delete">&#128465;</button></td>
            `;
            tbody.appendChild(tr);
        }
    }

    // Render expense chart
    let chartInstance;
    function renderChart() {
        const transactions = getTransactions();
        // Get expense sum per category
        const catSums = {};
        transactions.forEach(tx => {
            if (tx.type === 'expense') {
                catSums[tx.category] = (catSums[tx.category] || 0) + tx.amount;
            }
        });
        const data = {
            labels: Object.keys(catSums),
            datasets: [{
                label: 'Expenses by Category',
                data: Object.values(catSums),
                backgroundColor: [
                    '#ff7043', '#42a5f5', '#66bb6a', '#ab47bc', '#ffd54f', '#26a69a', '#bdbdbd'
                ],
            }]
        };
        const ctx = document.getElementById('expenseChart').getContext('2d');
        if(chartInstance) chartInstance.destroy();
        chartInstance = new Chart(ctx, {
            type: 'doughnut',
            data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 14
                            }
                        }
                    },
                    title: {
                        display: true,
                        text: 'Expense Distribution',
                        font: {
                            size: 18
                        }
                    }
                }
            }
        });
    }

    // Main render function
    function renderAll() {
        renderSummary();
        renderTable();
        renderChart();
    }

    // Handle form submission
    document.getElementById('transaction-form').addEventListener('submit', function(e){
        e.preventDefault();
        const desc = document.getElementById('desc').value.trim();
        let amount = parseFloat(document.getElementById('amount').value);
        const type = document.getElementById('type').value;
        const category = document.getElementById('category').value;

        if(!desc || isNaN(amount) || amount <= 0) {
            alert('Please fill in all fields with valid data.');
            return;
        }
        amount = +amount;

        const tx = {
            id: Date.now().toString() + Math.random().toString(10).substr(2,6),
            description: desc,
            amount,
            type,
            category,
            date: (new Date()).toISOString()
        };
        const transactions = getTransactions();
        transactions.push(tx);
        saveTransactions(transactions);

        // Clear form
        this.reset();
        renderAll();
    });

    // Handle delete action
    document.querySelector('#transactions-table tbody').addEventListener('click', function(e){
        if(!e.target.classList.contains('delete-btn')) return;
        const id = e.target.getAttribute('data-id');
        let transactions = getTransactions();
        transactions = transactions.filter(tx => tx.id !== id);
        saveTransactions(transactions);
        renderAll();
    });

    // Initial render
    renderAll();
</script>
</body>
</html>
```

Drag to resize

Moonshot AI

Kimi K2

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Budget Tracker Dashboard</title>
<style>
    * { margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; }
    body { background:#f7fafc;color:#2d3748; }
    h1,h2 { text-align:center; margin:15px 0 5px;font-weight:600; }
    .dashboard { padding:20px;max-width:1000px;margin:auto; }
    .summary { display:flex;justify-content:space-around;flex-wrap:wrap;gap:15px;margin-bottom:20px; }
    .card { flex:1 1 180px;padding:18px 10px;text-align:center;border-radius:12px;color:white;font-weight:bold; }
    .card h4 { font-size:1.1rem;margin-bottom:4px; }
    .income { background:#4ade80; }
    .expense { background:#ef4444; }
    .balance { background:#3b82f6; }
    .form-container, .transactions-container { margin:25px auto;background:#ffffff;border-radius:12px;padding:18px 22px;box-shadow:0 2px 8px rgba(0,0,0,.05); }
    label { display:block;margin:12px 0 4px;font-weight:600; }
    input[type=text], input[type=number], select {
        width:100%;padding:10px 12px;border:1px solid #cbd5e0;border-radius:6px;
    }
    button {
        margin-top:15px;padding:10px 20px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:bold;cursor:pointer;
    }
    button:hover { background:#2563eb; }
    #transactionsList li {
        display:flex;justify-content:space-between;align-items:center;
        padding:10px 0;border-bottom:1px solid #e5e7eb;
    }
    .badge {
        font-size:.9rem;padding:4px 8px;border-radius:12px;color:#fff;min-width:60px;text-align:center;
    }
    .badge.income { background:#4ade80; }
    .badge.expense { background:#ef4444; }
    @media(max-width:500px){
        .card { flex:1 1 100%; }
    }
</style>
</head>
<body>

<div class="dashboard">
    <h1>Budget Tracker Dashboard</h1>

    <div class="summary" id="summary">
        <div class="card income">Income<span id="totalIncome">$0.00</span></div>
        <div class="card expense">Expense<span id="totalExpense">$0.00</span></div>
        <div class="card balance">Balance<span id="netBalance">$0.00</span></div>
    </div>

    <div class="form-container">
        <h2>Add Transaction</h2>
        <label>Description<input type="text" id="descInput" placeholder="e.g. Groceries" required /></label>
        <label>Amount ($)<input type="number" id="amountInput" placeholder="0.00" step="0.01" required /></label>
        <label>Type
            <select id="typeSelect">
                <option value="income">Income</option>
                <option value="expense">Expense</option>
            </select>
        </label>
        <button onclick="addTransaction()">Add</button>
    </div>

    <div class="transactions-container">
        <h2>Recent Transactions</h2>
        <ul id="transactionsList"></ul>
    </div>
</div>

<script>
    /* ---------- Local Storage Helpers ---------- */
    const STORAGE_KEY = 'budgetApp';
    function getTransactions() {
        return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
    }
    function saveTransactions(arr) {
        localStorage.setItem(STORAGE_KEY,JSON.stringify(arr));
    }

    /* ---------- Render UI ---------- */
    function render() {
        const trans = getTransactions();
        let income = 0, expense = 0;

        // update totals
        trans.forEach(t => {
            if (t.type === 'income') income += t.amount;
            else expense += t.amount;
        });
        const balance = income - expense;

        document.getElementById('totalIncome').textContent   = '$'+income.toFixed(2);
        document.getElementById('totalExpense').textContent  = '$'+expense.toFixed(2);
        document.getElementById('netBalance').textContent    = '$'+balance.toFixed(2);

        // list transactions
        const ul = document.getElementById('transactionsList');
        ul.innerHTML='';
        trans.forEach((t,i) => {
            const li = document.createElement('li');
            li.innerHTML = `
                <div>${t.description}</div>
                <div>
                    <span class="badge ${t.type}">${t.type === 'income' ? '+' : '-'}$${t.amount.toFixed(2)}</span>
                    <button onclick="deleteTransaction(${i})" style="margin-left:8px;border:none;background:none;color:#ef4444;">✕</button>
                </div>
            `;
            ul.appendChild(li);
        });
    }

    /* ---------- Add Transaction ---------- */
    function addTransaction(){
        const desc = document.getElementById('descInput').value.trim();
        const amount = parseFloat(document.getElementById('amountInput').value);
        const type = document.getElementById('typeSelect').value;
        if(!desc || isNaN(amount) || amount<=0) return alert("Please enter valid description and amount.");

        const transactions = getTransactions();
        transactions.unshift({description:desc, amount, type}); // prepend newest
        saveTransactions(transactions);

        // reset form
        document.getElementById('descInput').value='';
        document.getElementById('amountInput').value='';
        render();
    }

    /* ---------- Delete Transaction ---------- */
    function deleteTransaction(index){
        const transactions = getTransactions();
        transactions.splice(index,1);
        saveTransactions(transactions);
        render();
    }

    /* ---------- Initial ---------- */
    render();
</script>

</body>
</html>
```

Drag to resize

xAI

Grok 4

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Tracking App Dashboard</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; }
        .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
        .summary { display: flex; justify-content: space-around; margin-bottom: 20px; }
        .summary div { text-align: center; }
        .summary h3 { margin: 0; color: #666; }
        .summary p { font-size: 24px; font-weight: bold; margin: 5px 0; }
        .income { color: green; }
        .expense { color: red; }
        .balance { color: blue; }
        form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
        input, select { padding: 8px; font-size: 16px; }
        button { padding: 10px; background: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background: #0056b3; }
        ul { list-style: none; padding: 0; }
        li { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #ddd; }
        li:last-child { border-bottom: none; }
        li .delete { color: red; cursor: pointer; }
        #chartContainer { height: 300px; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <h1>Budget Tracking Dashboard</h1>
        
        <div class="summary">
            <div>
                <h3>Total Income</h3>
                <p id="totalIncome" class="income">$0.00</p>
            </div>
            <div>
                <h3>Total Expenses</h3>
                <p id="totalExpenses" class="expense">$0.00</p>
            </div>
            <div>
                <h3>Balance</h3>
                <p id="balance" class="balance">$0.00</p>
            </div>
        </div>
        
        <form id="transactionForm">
            <select id="type">
                <option value="income">Income</option>
                <option value="expense">Expense</option>
            </select>
            <input type="number" id="amount" placeholder="Amount" required min="0" step="0.01">
            <select id="category">
                <option value="Salary">Salary (Income)</option>
                <option value="Freelance">Freelance (Income)</option>
                <option value="Food">Food</option>
                <option value="Transport">Transport</option>
                <option value="Utilities">Utilities</option>
                <option value="Entertainment">Entertainment</option>
                <option value="Other">Other</option>
            </select>
            <input type="text" id="description" placeholder="Description">
            <button type="submit">Add Transaction</button>
        </form>
        
        <h2>Transactions</h2>
        <ul id="transactionList"></ul>
        
        <h2>Expense Breakdown</h2>
        <div id="chartContainer">
            <canvas id="expenseChart"></canvas>
        </div>
    </div>

    <script>
        let transactions = [];
        const categories = ['Food', 'Transport', 'Utilities', 'Entertainment', 'Other'];
        let expenseChart;

        function init() {
            const storedTransactions = localStorage.getItem('transactions');
            if (storedTransactions) {
                transactions = JSON.parse(storedTransactions);
            }
            updateUI();
            initChart();
        }

        function updateUI() {
            updateSummary();
            updateTransactionList();
            updateChart();
            saveToStorage();
        }

        function updateSummary() {
            const totalIncome = transactions.reduce((sum, t) => t.type === 'income' ? sum + t.amount : sum, 0);
            const totalExpenses = transactions.reduce((sum, t) => t.type === 'expense' ? sum + t.amount : sum, 0);
            const balance = totalIncome - totalExpenses;

            document.getElementById('totalIncome').textContent = `$${totalIncome.toFixed(2)}`;
            document.getElementById('totalExpenses').textContent = `$${totalExpenses.toFixed(2)}`;
            document.getElementById('balance').textContent = `$${balance.toFixed(2)}`;
        }

        function updateTransactionList() {
            const list = document.getElementById('transactionList');
            list.innerHTML = '';
            transactions.forEach((t, index) => {
                const li = document.createElement('li');
                li.innerHTML = `
                    <span>${t.description || 'No description'} (${t.category}) - $${t.amount.toFixed(2)} 
                        <span style="color: ${t.type === 'income' ? 'green' : 'red'};">(${t.type})</span>
                    </span>
                    <span class="delete" onclick="deleteTransaction(${index})">x</span>
                `;
                list.appendChild(li);
            });
        }

        function initChart() {
            const ctx = document.getElementById('expenseChart').getContext('2d');
            expenseChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: categories,
                    datasets: [{
                        data: Array(categories.length).fill(0),
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        }

        function updateChart() {
            const expenseData = categories.map(cat => 
                transactions.reduce((sum, t) => t.type === 'expense' && t.category === cat ? sum + t.amount : sum, 0)
            );
            expenseChart.data.datasets[0].data = expenseData;
            expenseChart.update();
        }

        function addTransaction(e) {
            e.preventDefault();
            const type = document.getElementById('type').value;
            const amount = parseFloat(document.getElementById('amount').value);
            const category = document.getElementById('category').value;
            const description = document.getElementById('description').value;

            if (isNaN(amount) || amount <= 0) return;

            transactions.push({ type, amount, category, description });
            document.getElementById('transactionForm').reset();
            updateUI();
        }

        function deleteTransaction(index) {
            transactions.splice(index, 1);
            updateUI();
        }

        function saveToStorage() {
            localStorage.setItem('transactions', JSON.stringify(transactions));
        }

        document.getElementById('transactionForm').addEventListener('submit', addTransaction);
        init();
    </script>
</body>
</html>
```

Drag to resize

DeepSeek

DeepSeek R1 0528 (May '25)

# Budget Tracker Dashboard

I'll create a complete budget tracking application dashboard with visualizations, transaction history, expense breakdown, and interactive controls.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Tracker Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #42b983;
            --secondary: #3273dc;
            --warning: #ffdd57;
            --danger: #ff3860;
            --dark: #273656;
            --light: #f8f9fa;
            --gray: #8493a8;
            --border: #e7eaf0;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--dark);
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border);
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary);
        }
        
        nav a {
            margin-left: 20px;
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
        }
        
        nav a:hover {
            color: var(--primary);
        }
        
        .dashboard-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 20px;
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .card-title {
            font-size: 14px;
            text-transform: uppercase;
            color: var(--gray);
            font-weight: 600;
        }
        
        .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .income .card-icon {
            background-color: rgba(66, 185, 131, 0.15);
            color: var(--primary);
        }
        
        .expense .card-icon {
            background-color: rgba(255, 56, 96, 0.15);
            color: var(--danger);
        }
        
        .budget .card-icon {
            background-color: rgba(50, 115, 220, 0.15);
            color: var(--secondary);
        }
        
        .balance .card-icon {
            background-color: rgba(255, 221, 87, 0.15);
            color: #e6b400;
        }
        
        .card-value {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .card-change {
            font-size: 12px;
            font-weight: 600;
        }
        
        .positive {
            color: var(--primary);
        }
        
        .negative {
            color: var(--danger);
        }
        
        .charts-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 20px;
            height: 350px;
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .right-side {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .transaction-history {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 20px;
        }
        
        .tabs {
            display: flex;
            background-color: #f0f2f5;
            border-radius: 8px;
            padding: 5px;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 8px 15px;
            border-radius: 6px;
            cursor: pointer;
            text-align: center;
            flex: 1;
            font-weight: 500;
        }
        
        .tab.active {
            background-color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .transaction-list {
            max-height: 300px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .transaction-item {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .transaction-item:last-child {
            border-bottom: none;
        }
        
        .transaction-details {
            display: flex;
            flex-direction: column;
        }
        
        .transaction-category {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .transaction-date {
            font-size: 12px;
            color: var(--gray);
        }
        
        .transaction-amount {
            font-weight: 600;
            font-size: 16px;
        }
        
        .expense .transaction-amount {
            color: var(--danger);
        }
        
        .income .transaction-amount {
            color: var(--primary);
        }
        
        @media (max-width: 992px) {
            .summary-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .charts-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .summary-cards {
                grid-template-columns: 1fr;
            }
            
            header {
                flex-direction: column;
                gap: 15px;
            }
            
            nav {
                width: 100%;
                display: flex;
                justify-content: space-around;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">BudgetTrackr</div>
            <nav>
                <a href="#" class="active">Dashboard</a>
                <a href="#">Transactions</a>
                <a href="#">Analytics</a>
                <a href="#">Settings</a>
            </nav>
        </header>
        
        <div class="dashboard-title">
            <h1>Budget Tracker Dashboard</h1>
        </div>
        
        <div class="summary-cards">
            <div class="card income">
                <div class="card-header">
                    <div class="card-title">Total Income</div>
                    <div class="card-icon">
                        <i class="fas fa-money-bill-wave">💰</i>
                    </div>
                </div>
                <div class="card-value">$6,280.00</div>
                <div class="card-change positive">+12.5% from last month</div>
            </div>
            
            <div class="card expense">
                <div class="card-header">
                    <div class="card-title">Total Expenses</div>
                    <div class="card-icon">
                        <i class="fas fa-chart-line">📈</i>
                    </div>
                </div>
                <div class="card-value">$3,470.00</div>
                <div class="card-change negative">-3.2% from last month</div>
            </div>
            
            <div class="card budget">
                <div class="card-header">
                    <div class="card-title">Budget Limit</div>
                    <div class="card-icon">
                        <i class="fas fa-wallet">💼</i>
                    </div>
                </div>
                <div class="card-value">$5,000.00</div>
                <div class="card-change positive">On Target</div>
            </div>
            
            <div class="card balance">
                <div class="card-header">
                    <div class="card-title">Current Balance</div>
                    <div class="card-icon">
                        <i class="fas fa-piggy-bank">🐷</i>
                    </div>
                </div>
                <div class="card-value">$2,810.00</div>
                <div class="card-change positive">34% Savings</div>
            </div>
        </div>
        
        <div class="charts-grid">
            <div class="chart-container">
                <div class="chart-header">
                    <div class="section-title">Spending Analysis</div>
                    <select>
                        <option>Last 30 days</option>
                        <option>Last 90 days</option>
                        <option>Last 6 months</option>
                    </select>
                </div>
                <canvas id="spendingChart"></canvas>
            </div>
            
            <div class="right-side">
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="section-title">Expense Distribution</div>
                    </div>
                    <canvas id="expenseChart"></canvas>
                </div>
                
                <div class="transaction-history">
                    <div class="tabs">
                        <div class="tab active">Recent</div>
                        <div class="tab">Income</div>
                        <div class="tab">Expenses</div>
                    </div>
                    
                    <div class="transaction-list">
                        <div class="transaction-item expense">
                            <div class="transaction-details">
                                <div class="transaction-category">Grocery Shopping</div>
                                <div class="transaction-date">Today, 2:45 PM</div>
                            </div>
                            <div class="transaction-amount">$89.50</div>
                        </div>
                        
                        <div class="transaction-item income">
                            <div class="transaction-details">
                                <div class="transaction-category">Salary Deposit</div>
                                <div class="transaction-date">Jan 28, 3:15 PM</div>
                            </div>
                            <div class="transaction-amount">$2,800.00</div>
                        </div>
                        
                        <div class="transaction-item expense">
                            <div class="transaction-details">
                                <div class="transaction-category">Restaurant</div>
                                <div class="transaction-date">Jan 27, 8:30 PM</div>
                            </div>
                            <div class="transaction-amount">$67.30</div>
                        </div>
                        
                        <div class="transaction-item expense">
                            <div class="transaction-details">
                                <div class="transaction-category">Utilities</div>
                                <div class="transaction-date">Jan 26, 10:00 AM</div>
                            </div>
                            <div class="transaction-amount">$125.40</div>
                        </div>
                        
                        <div class="transaction-item expense">
                            <div class="transaction-details">
                                <div class="transaction-category">Online Subscription</div>
                                <div class="transaction-date">Jan 25, 2:15 PM</div>
                            </div>
                            <div class="transaction-amount">$14.99</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Initialize charts
        document.addEventListener('DOMContentLoaded', function() {
            // Expense Distribution Chart (Pie/Doughnut)
            const expenseChart = new Chart(
                document.getElementById('expenseChart'), 
                {
                    type: 'doughnut',
                    data: {
                        labels: ['Housing', 'Transport', 'Food', 'Utilities', 'Entertainment', 'Healthcare'],
                        datasets: [{
                            label: 'Expense Distribution',
                            data: [1200, 450, 680, 250, 210, 180],
                            backgroundColor: [
                                '#42b983',
                                '#3273dc',
                                '#ff9292',
                                '#ffca7b',
                                '#6f5efa',
                                '#36f1cd'
                            ],
                            borderWidth: 0,
                            hoverOffset: 10
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    boxWidth: 10,
                                    padding: 20
                                }
                            }
                        },
                        cutout: '65%'
                    }
                }
            );
            
            // Spending Analysis Chart (Bar/Line)
            const spendingChart = new Chart(
                document.getElementById('spendingChart'), 
                {
                    type: 'line',
                    data: {
                        labels: ['Jan 1', 'Jan 5', 'Jan 10', 'Jan 15', 'Jan 20', 'Jan 25', 'Jan 30'],
                        datasets: [
                            {
                                label: 'Income',
                                data: [1500, 2000, 1800, 3000, 2500, 2800, 3100],
                                borderColor: '#42b983',
                                backgroundColor: 'rgba(66, 185, 131, 0.1)',
                                borderWidth: 3,
                                tension: 0.3,
                                fill: true
                            },
                            {
                                label: 'Expenses',
                                data: [950, 1200, 800, 1500, 1100, 1700, 1300],
                                borderColor: '#ff3860',
                                backgroundColor: 'rgba(255, 56, 96, 0.1)',
                                borderWidth: 3,
                                tension: 0.3,
                                fill: true
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                },
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value;
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                }
            );
            
            // Tab switching functionality
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // In a real app you would filter the transactions here
                });
            });
            
            // Simulate adding a transaction
            setTimeout(() => {
                const transactionList = document.querySelector('.transaction-list');
                
                const newTransaction = document.createElement('div');
                newTransaction.className = 'transaction-item expense';
                newTransaction.innerHTML = `
                    <div class="transaction-details">
                        <div class="transaction-category">New Purchase</div>
                        <div class="transaction-date">Just now</div>
                    </div>
                    <div class="transaction-amount">$35.75</div>
                `;
                
                transactionList.insertBefore(newTransaction, transactionList.firstChild);
                
                // Add highlight animation
                newTransaction.style.backgroundColor = 'rgba(255, 56, 96, 0.05)';
                setTimeout(() => {
                    newTransaction.style.backgroundColor = '';
                }, 2000);
            }, 3000);
        });
    </script>
</body>
</html>
```

## Features Included:

1. **Dashboard Summary Cards**
   - Total Income display
   - Expense tracking with change comparison
   - Budget limit monitoring
   - Current balance with savings percentage

2. **Interactive Charts**
   - Spending Analysis line chart showing income vs expenses over time
   - Expense Distribution doughnut chart visualizing spending categories

3. **Transaction History**
   - Filterable list (Recent, Income, Expenses)
   - Detailed transactions with category, date, and amount
   - Color-coded income/expenses 

4. **Responsive Design**
   - Adapts to different screen sizes
   - Mobile-friendly layout with stacked cards on smaller screens

5. **Modern UI Elements**
   - Card hover effects
   - Clean, minimalist design
   - Visual feedback for interactions

6. **JavaScript Functionality**
   - Charts utilizing Chart.js
   - Tab selection UI
   - Simulated real-time transaction updates

This budget tracker combines aesthetics with functionality to provide a comprehensive dashboard for personal finance management. The clean design and visual elements make financial data easy to understand at a glance.

Drag to resize

Anthropic

Claude 4 Sonnet (Non-reasoning)

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Tracker Dashboard</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .dashboard {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            opacity: 0.9;
            font-size: 1.1em;
        }

        .main-content {
            padding: 30px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card.income {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .stat-card.expenses {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .stat-card.balance {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #333;
        }

        .stat-value {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: 500;
        }

        input, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input:focus, select:focus {
            outline: none;
            border-color: #667eea;
        }

        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        button:hover {
            transform: translateY(-2px);
        }

        .transactions-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .transaction-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            margin-bottom: 10px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.2s ease;
        }

        .transaction-item:hover {
            transform: translateX(5px);
        }

        .transaction-details {
            flex: 1;
        }

        .transaction-description {
            font-weight: 600;
            color: #333;
        }

        .transaction-category {
            color: #666;
            font-size: 0.9em;
        }

        .transaction-amount {
            font-weight: bold;
            font-size: 1.1em;
        }

        .transaction-amount.income {
            color: #28a745;
        }

        .transaction-amount.expense {
            color: #dc3545;
        }

        .delete-btn {
            background: #dc3545;
            padding: 8px 12px;
            font-size: 12px;
            margin-left: 10px;
        }

        .chart-container {
            grid-column: 1 / -1;
            text-align: center;
            min-height: 300px;
        }

        .chart-placeholder {
            width: 250px;
            height: 250px;
            margin: 0 auto;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            background: conic-gradient(
                #667eea 0deg,
                #764ba2 120deg,
                #f093fb 240deg,
                #667eea 360deg
            );
        }

        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>💰 Budget Tracker</h1>
            <p>Take control of your finances</p>
        </div>

        <div class="main-content">
            <!-- Statistics Cards -->
            <div class="stats-grid">
                <div class="stat-card income">
                    <div class="stat-value" id="totalIncome">$0.00</div>
                    <div class="stat-label">Total Income</div>
                </div>
                <div class="stat-card expenses">
                    <div class="stat-value" id="totalExpenses">$0.00</div>
                    <div class="stat-label">Total Expenses</div>
                </div>
                <div class="stat-card balance">
                    <div class="stat-value" id="balance">$0.00</div>
                    <div class="stat-label">Balance</div>
                </div>
            </div>

            <!-- Main Content Grid -->
            <div class="content-grid">
                <!-- Add Transaction Form -->
                <div class="section">
                    <h2>Add Transaction</h2>
                    <form id="transactionForm">
                        <div class="form-group">
                            <label for="description">Description</label>
                            <input type="text" id="description" required>
                        </div>
                        <div class="form-group">
                            <label for="amount">Amount</label>
                            <input type="number" id="amount" step="0.01" required>
                        </div>
                        <div class="form-group">
                            <label for="category">Category</label>
                            <select id="category" required>
                                <option value="">Select Category</option>
                                <option value="Food">🍔 Food</option>
                                <option value="Transportation">🚗 Transportation</option>
                                <option value="Entertainment">🎬 Entertainment</option>
                                <option value="Utilities">⚡ Utilities</option>
                                <option value="Shopping">🛍️ Shopping</option>
                                <option value="Healthcare">🏥 Healthcare</option>
                                <option value="Income">💵 Income</option>
                                <option value="Other">📋 Other</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="type">Type</label>
                            <select id="type" required>
                                <option value="">Select Type</option>
                                <option value="income">Income</option>
                                <option value="expense">Expense</option>
                            </select>
                        </div>
                        <button type="submit">Add Transaction</button>
                    </form>
                </div>

                <!-- Recent Transactions -->
                <div class="section">
                    <h2>Recent Transactions</h2>
                    <div class="transactions-list" id="transactionsList">
                        <p style="text-align: center; color: #666; padding: 20px;">No transactions yet. Add your first transaction!</p>
                    </div>
                </div>

                <!-- Chart Placeholder -->
                <div class="section chart-container">
                    <h2>Expense Categories</h2>
                    <div class="chart-placeholder" id="expenseChart">
                        <span>Visual Chart<br>Coming Soon!</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        class BudgetTracker {
            constructor() {
                this.transactions = JSON.parse(localStorage.getItem('transactions')) || [];
                this.init();
            }

            init() {
                this.updateStats();
                this.renderTransactions();
                this.bindEvents();
            }

            bindEvents() {
                document.getElementById('transactionForm').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.addTransaction();
                });
            }

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

                if (!description || !amount || !category || !type) {
                    alert('Please fill in all fields');
                    return;
                }

                const transaction = {
                    id: Date.now(),
                    description,
                    amount,
                    category,
                    type,
                    date: new Date().toLocaleDateString()
                };

                this.transactions.unshift(transaction);
                this.saveTransactions();
                this.updateStats();
                this.renderTransactions();
                this.clearForm();
            }

            deleteTransaction(id) {
                this.transactions = this.transactions.filter(t => t.id !== id);
                this.saveTransactions();
                this.updateStats();
                this.renderTransactions();
            }

            updateStats() {
                const income = this.transactions
                    .filter(t => t.type === 'income')
                    .reduce((sum, t) => sum + t.amount, 0);

                const expenses = this.transactions
                    .filter(t => t.type === 'expense')
                    .reduce((sum, t) => sum + t.amount, 0);

                const balance = income - expenses;

                document.getElementById('totalIncome').textContent = this.formatCurrency(income);
                document.getElementById('totalExpenses').textContent = this.formatCurrency(expenses);
                document.getElementById('balance').textContent = this.formatCurrency(balance);

                // Update balance card color based on positive/negative
                const balanceCard = document.querySelector('.stat-card.balance');
                if (balance >= 0) {
                    balanceCard.style.background = 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)';
                    balanceCard.style.color = '#333';
                } else {
                    balanceCard.style.background = 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)';
                    balanceCard.style.color = 'white';
                }
            }

            renderTransactions() {
                const container = document.getElementById('transactionsList');
                
                if (this.transactions.length === 0) {
                    container.innerHTML = '<p style="text-align: center; color: #666; padding: 20px;">No transactions yet. Add your first transaction!</p>';
                    return;
                }

                container.innerHTML = this.transactions.slice(0, 10).map(transaction => `
                    <div class="transaction-item">
                        <div class="transaction-details">
                            <div class="transaction-description">${transaction.description}</div>
                            <div class="transaction-category">${transaction.category} • ${transaction.date}</div>
                        </div>
                        <div>
                            <span class="transaction-amount ${transaction.type}">
                                ${transaction.type === 'income' ? '+' : '-'}${this.formatCurrency(transaction.amount)}
                            </span>
                            <button class="delete-btn" onclick="budgetTracker.deleteTransaction(${transaction.id})">
                                Delete
                            </button>
                        </div>
                    </div>
                `).join('');
            }

            formatCurrency(amount) {
                return new Intl.NumberFormat('en-US', {
                    style: 'currency',
                    currency: 'USD'
                }).format(amount);
            }

            saveTransactions() {
                localStorage.setItem('transactions', JSON.stringify(this.transactions));
            }

            clearForm() {
                document.getElementById('transactionForm').reset();
            }
        }

        // Initialize the budget tracker
        const budgetTracker = new BudgetTracker();

        // Add some sample data for demonstration
        if (budgetTracker.transactions.length === 0) {
            setTimeout(() => {
                // Sample transactions
                const sampleTransactions = [
                    { id: 1, description: "Grocery Shopping", amount: 85.50, category: "Food", type: "expense", date: new Date().toLocaleDateString() },
                    { id: 2, description: "Salary", amount: 3000, category: "Income", type: "income", date: new Date().toLocaleDateString() },
                    { id: 3, description: "Gas", amount: 45.00, category: "Transportation", type: "expense", date: new Date().toLocaleDateString() },
                    { id: 4, description: "Netflix Subscription", amount: 15.99, category: "Entertainment", type: "expense", date: new Date().toLocaleDateString() }
                ];
                
                budgetTracker.transactions = sampleTransactions;
                budgetTracker.saveTransactions();
                budgetTracker.updateStats();
                budgetTracker.renderTransactions();
            }, 1000);
        }
    </script>
</body>
</html>
```

This budget tracking dashboard includes:

**Features:**
- 💰 Real-time balance calculation
- 📊 Visual statistics cards (Income, Expenses, Balance)
- ➕ Add income and expense transactions
- 🗂️ Categorized transactions with emojis
- 🗑️ Delete transactions
- 💾 Local storage persistence
- 📱 Responsive design

**Key Components:**
1. **Header** - Attractive gradient header with app title
2. **Statistics Cards** - Display total income, expenses, and balance
3. **Add Transaction Form** - Input form with validation
4. **Recent Transactions List** - Shows last 10 transactions with delete option
5. **Visual Design** - Modern gradient design with hover effects

**JavaScript Functionality:**
- Object-oriented BudgetTracker class
- Local storage for data persistence
- Real-time updates of statistics
- Form validation and error handling
- Currency formatting
- Responsive transaction list

The app automatically saves data to localStorage and includes sample data for demonstration. Users can add income and expenses, categorize them, and see their financial overview at a glance.

Drag to resize