JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="budget">
Your Budget: <input id="budget" type="text" placeholder="Enter Amount" onkeyup="this.value = numFormat(this.value), findTotal()"> 
</div>

<div class="ometer">
<div class="bar" id="bar">0%</div>
</div>

<div class="bud" id="bud">

<div id="b1" class="panel">


<div><input type="text" placeholder="Item"><input placeholder="Cost" type="text" name="item" onkeyup="this.value = numFormat(this.value), findTotal()"><input type="text" placeholder="26"></div>

</div>

</div>

<div class="bud"><div class="panel">

<div class="add"><a href="#" onclick="addFields()">Add Item</a></div>


</div></div>


<div class="result1"><span class="res" id="res"></span></div>
<div class="result2"><span class="budres" id="budres"></span></div>




</div>

CSS

.container {max-width:600px;margin:auto;font-family:arial;}

.budget {text-align:right;border:1px solid #999;margin:0 74px 5px 0;padding:4px 4px 4px 10px;font-size:17px;font-weight:bold;}

.budget input {border:1px solid #999;padding:10px;margin:0;}

.bud {width:100%;}

.add {margin-right:74px;}

.add a {display:inline-block;text-align:center;text-decoration:none;background-color:#999;padding:3px;font-size:14px;color:#fff;}

.panel { }

.panel div { overflow:hidden;}

.panel div input{ border:1px solid #999;padding:10px;margin:0 2px 2px 0; width:240px;overflow:hidden;}

.panel a { display:inline-block;width:70px;float:right;text-decoration:none;background-color:#999;text-align:center;font-size:14px;color:#fff;padding:3px 0;margin:7px 0 0 0;}

.result1, .result2 {margin-right:74px;text-align:right;padding:10px 0 0 0;}

.ometer {border:1px solid #999;margin:0 74px 5px 0;padding:2px;overflow:hidden;}
.bar {background-color:green;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUBAMAAAC+IEqSAAAALVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBoCg+AAAAD3RSTlNeOCwhC3drVFNJRz4XFgH8x2j5AAAALElEQVQI12NgYChgmMCwgUGAQYHBgOECgwPDAyA+AGQrAMUWMDQAVSQwBAAAkvgHMbYV6LsAAAAASUVORK5CYII=');background-repeat: repeat-x; height:20px;width:0;overflow:hidden;direction:rtl; color:#fff;font-size:14px;line-height:20px;text-indent:5px;border-radius:0 4px 4px 0;}

JavaScript

function addFields(){
var number = 1;
var bud = document.getElementById("bud");

var count = bud.childElementCount;
var newcount = (count+1);

for (i=0;i<number;i++){

var div = document.createElement("div");
div.className = "panel";
div.id = "b" + newcount;
div.innerHTML = "<a href='#' onclick='remFields(this),findTotal()'>Delete</a><div><input type='text' placeholder='Item'><input placeholder='Cost' type='text' name='item' onkeyup='this.value = numFormat(this.value), findTotal()'></div>";

bud.appendChild(div); 

}}
        
function remFields(_this){

var el = _this;
el.parentNode.parentNode.removeChild( el.parentNode );

}



function findTotal(){
    var arr = document.getElementsByName('item');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value.replace(/[^0-9]/g, "")))
            tot += parseInt(arr[i].value.replace(/[^0-9]/g, ""));
    }
    document.getElementById('res').innerHTML = "Total Spend: £ " + tot;
    
    var budget = document.getElementById('budget').value.replace(/[^0-9]/g, "");
    var budres = document.getElementById('budres');
    var budtot = (budget-tot);
    budres.innerHTML = "Remaining Budget £ " + budtot;
    
    if (budtot < 0) {budres.style.color = 'red';} else {budres.style.color = 'green';}
    
    
    var perc = (tot / budget) * (100).toFixed(0);
    
  var bar = document.getElementById('bar');
    bar.style.width = perc + "%";
    bar.innerHTML = perc.toFixed(0) + "%";
    
    if (perc > 100) {bar.style.backgroundColor = 'red';bar.innerHTML = "Over Budget&nbsp;";bar.style.textAlign = 'left';} else {bar.style.backgroundColor  = 'green';bar.style.textAlign = 'right';}
    
}


function intFormat(n) {
var regex = /(\d)((\d{3},?)+)$/;
n = n.split(',').join('');
while(regex.test(n))
{n = n.replace(regex, '$1,$2');}
n = n.replace("£", "");
n = n.replace(" ", "");
return '£ ' + n;
}
      
function numFormat(n) {
var pointReg = /([\d,\.]*)\.(\d*)$/, f;
if(pointReg.test(n))
{f = RegExp.$2;
return...