Create a Budget Application

HTML

Start budget calculator

Please enter your main income

Main income Add additional income

Please enter your costs

Add cost Calculate total

CSS

body { width: 300px; margin: 0 auto; position: relative; }

.income, .costs { display: none; }

.calculate { margin: 10px 0px; display: block; }

{ font-family: monospace; }

a { border: 1px solid #999999; padding: 8px 20px; display: block; border-radius: 5px; text-align: center; text-decoration: none; margin-top: 30px; background: blue; color: white }

.additional-income, .additional-costs { padding: 0px 20px; }

label { width: 150px; display: inline-block; box-sizing: border-box; font-size: 12px; margin: 0px; }

input { margin: 8px 10px 0px 0px; padding: 2px; box-sizing: border-box; width: 150px; display: inline-block; }

span { display: inline-block; width: 50px; margin-left: 8px; font-size: 10px; cursor: pointer; }

.total { display: none; position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px; background: #FFFFFF; padding: 50px; text-align: center; color: #000000; }

.close { font-size: 20px; position: fixed; right: 20px; top: 20px; z-index: 2; }

.green, .red { font-size: 25px; font-weight: bold; }

.green { color: green; }

.red { color: red; }

JAVASCRIPT

var labelOnj = ''; var inputObj = ''; var inputCostObj = ''; var removeObj = 'Remove' var incomeObj = $('.additional-income'); var costObj = $('.additional-costs'); var i = 0; var removeItem;

$(".start").click(function() { $('.income').show(); $('.costs').show(); return false; }); $('.add-income').click(function() { incomeObj.append('
' + labelOnj + inputObj + removeObj); addClassesAndText("income"); return false; }); $('.add-cost').click(function() { costObj.append('
' + inputCostObj + inputObj + removeObj); addClassesAndText("cost"); return false; }); $('.additional-income').on('click', "span.remove", function() { console.log($(this).attr("class")); removeItem = $(this).attr("class").replace("remove item-", ""); $('.additional-income').children(".lbl-" + removeItem).remove(); $('.additional-income').children(".input-" + removeItem).remove(); $(this).prev("br").remove(); $(this).remove(); addClassesAndText("income"); });

$('.additional-costs').on('click', "span.remove", function() { console.log($(this).attr("class")); removeItem = $(this).attr("class").replace("remove item-", ""); $('.additional-costs').find(".input-" + removeItem).remove(); $(this).prev("br").remove(); $(this).remove(); addClassesAndText("costs"); });

function addClassesAndText(x) { if (x == "income") { addIncomeText(); addInputIncomeClass(); addRemoveIncomeClass(); } else if (x == "cost") { addInputCostClass(); addRemoveCostClass(); } }

$(".calculate").click(function() { var totalIncome = 0; var totalCosts = 0;

$('.additional-income').children("input").each(function() {
    if ($(this).val() != "") {
        totalIncome = totalIncome + parseInt($(this).val());
    }
});
$('.additional-costs').children("input.default").each(function() {
    if ($(this).val() != "") {
        totalCosts = totalCosts + parseInt($(this).val());
    }
});

var totalText = '<span class="close">close</span><p class="bold">Your remaining balance is:</p><br/>';

if (parseInt((totalIncome - totalCosts)) < 0) {
    $(".total").text(totalIncome - totalCosts);
    $(".total").html(totalText + '<p class="red">-£' + $(".total").text().replace("-", "") + '</p>');
} else {
    $(".total").html(totalText + '<p class="green">£' + (totalIncome - totalCosts) + '</p>');
}
$(".total").show();

});

$(".total").click(function() { $(this).hide(); });

// income functions ////////////////////////////////////////////////////////////////

function addIncomeText() { i = 1; $('.additional-income').children("label").each(function() { if (i != 1) { $(this).text("Income " + i); $(this).attr("class", "lbl-" + i); } i++; }); }

function addInputIncomeClass() { i = 1; $('.additional-income').children("input").each(function() { $(this).attr("class", "input input-" + i); i++; }); }

function addRemoveIncomeClass() { i = 2; $('.additional-income').children("span").each(function() { $(this).attr("class", "remove item-" + i); i++; }); }

// cost functions ////////////////////////////////////////////////////////////////

function addInputCostClass() { i = 1; $('.additional-costs').children("input.default").each(function() { $(this).attr("class", "default input-" + i); i++; });

i = 1;
$('.additional-costs').children("input.cost-type").each(function() {
    $(this).attr("class", "cost-type input-" + i);
    i++;
});

}

function addRemoveCostClass() { i = 1; $('.additional-costs').children("span").each(function() { $(this).attr("class", "remove item-" + i); i++; }); }