Budgeter

by Sam Fereday

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-12">
             <h3>Summary (This month)</h3>

            <p>Income:
<span id="income"></span>
            </p>
            <p>Outgoing:
<span id="outgoing"></span>
            </p>
            <p>Remaining after outgoing:
<span id="remaining"></span>
            </p>
            <p>Remaining as of last working day: <span id="workingday"></span>
            </p>
             <h3>Itemised</h3>

            <button id="show">Show</button>
            <table id="itemised"></table>
            
<h3>Debt</h3>

            <p>Initial debt: <span id="initial"></span>
            </p>
            <p>Current total debt:
<span id="debt"></span>
            </p>
            <p>Monthly outgoing on debt:
<span id="debtMonthly"></span>
            </p>
            <p>Projected number of repayments (at current values):
<span id="projected"></span>
            </p>
             <h3>Edit</h3>

            <form id="addForm">
                <fieldset>
                    <dl>
                        <dd>
                            <label>Name:</label>
                            <input id="nameof" value="Test" />
                        </dd>
                        <dd>
                            <label>Monthly amount:</label>
                            <input id="amountof" value="123" />
                        </dd>
                        <dd>
                            <label>Debt (if applicable):</label>
                            <input id="debtof" value="400" />
                        </dd>
                        <dd>
                            <label>Payments made (if applicable):</label>
                        </dd>
                        <input id="madeof" value="1" />
                    </dl>
                </fieldset>
            </form>
            <button id="addItem">Add...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}
td {
    padding: 0.5em;
}
#itemised {
    display: none;
}
#itemised span {
    display: block;
}
label {
    display: block;
}

JavaScript

// Stick in to node webkit?
// For CSS: https://jsfiddle.net/DTcHh/
// Lacks calendar functionality, but will get to that. We need to work out things like debt repayments. So when they were started, or, as we already have, how many payments have been made already. We could also make a best-guess for this part too.
// There's not really a budget planner either, but it's a start.
// It also doesn't work out percentages and things for debt, apr's, stuff like that yet.
var incoming = 1650;
var current  = 567.61; 
var outgoing = [{
    "name": "Rent",
        "amount": 600
}, {
    "name": "Credit Card A",
        "amount": 300,
        "paymentsMade": 2,
        "debt": 700.45
}, {
    "name": "PC Finance",
        "amount": 22.78,
        "paymentsMade": 6,
        "debt": 700
}, {
    "name": "Mobile Phone",
        "amount": 26.66
}, {
    "name": "Gadget Insurance",
        "amount": 10.43
}, {
    "name": "Spotify",
        "amount": 9.99
}, {
    "name": "Adobe",
        "amount": 9.99
}];

// Tools
function inj(id, num) {
    // Note the plus sign that drops any "extra" zeroes at the end.
    // It changes the result (which is a string) into a number again (think "0 + foo"),
    // which means that it uses only as many digits as necessary.
    num = parseInt(num);
    var el = document.getElementById(id);
    el.innerHTML = "";
    el.innerHTML = +num.toFixed(2);
}

function run() {
    doSummary();
}

var itemised = document.getElementById("itemised");
var button = document.getElementById("show");
var state = -1;
button.onclick = function () {
    state *= -1;
    itemised.style.display = state > 0 ? "block" : "none";
    button.innerHTML = state < 0 ? "Show" : "Hide";
}
var add = document.getElementById("addItem");
var form = document.getElementById("addForm");
add.onclick = function () {
    var itemModel = {
        name: document.getElementById("nameof").value,
        amount: parseInt(document.getElementById("amountof").value),
        debt:...