Budget Adder

Preliminary work on a tool for keeping track of budgets.

by mlms13

HTML

<p id="result"></p>
<form id="transaction" action="#" method="post">
    <input type="text" id="date" name="date" placeholder="Date" />
    <input type="text" id="amount" name="amount" placeholder="Amount" />
    <input type="text" id="category" name="category" placeholder="Category" />
    <input type="submit" id="submit" value="+" />
</form>

CSS

label {
    float: left;
    width: 80px;
}
input {
    margin-bottom: 8px;
    padding: 2px;
}
input[type="submit"] {
    background: none;
    border: 0;
    color: #5a5;
    font-size: 22px;
    font-weight: bold;
}

JavaScript

function BudgetAdder() {
    var a = document.getElementById('transaction'),
        initial = 0,
        transactions = [],
        total = 0;
    
    // threshold (min balance to check while looping)
    
    function Transaction(date, amount, category) {
        this.date = date;
        this.amount = amount;
        this.category = category;
    }
    
    this.calculateTotal = function () {
        var i = 0;
        total = initial;
        for (i = 0; i < transactions.length; i++) {
            total += transactions[i].amount;
        }
        alert(total);
    };
    
    a.onsubmit = function () {
        var dateValue = document.getElementById('date').value,
            amountValue = document.getElementById('amount').value,
            categoryValue = document.getElementById('category').value;
        
        transactions.push(new Transaction(dateValue, amountValue, categoryValue));
        alert(transactions.length);
        return false;
    };
    
    initial = 350;
}

var a = new BudgetAdder();
a.calculateTotal();

/*var result = document.getElementById('result'),
    start = document.getElementById('start'),
    i = 0;

result.appendChild(document.createTextNode(''));

start.onkeyup = function () {
    var typed = parseFloat(start.value.substr(-1));
    if (!isNaN(typed)) {
        result.childNodes[0].nodeValue += typed;
    }
};*/