JSFiddle - React, Tailwind, and code Playground

by thinkloop

HTML

<div id="add-address-form">
    <input id="new-address" placeholder="address" value="1FfmbHfnpaZjKFvyi1okTjJJusN455paPH" />
    <input id="submit-address-form" type="submit" value="add" />
</div>
<div id="balances"></div>
<div id="totals"></div>

CSS

body, div, ul, li, input, span {
    padding: 0; margin: 0;
    list-style: none;
    font-family: 'Courier New', 'Fixed'
}

body {
    padding: 10px;
}

li {
    margin: 5px;
}

#new-address {
    width: 300px;
}

#totals {
    padding: 5px;
    font-weight: 700;
}

JavaScript

var balances = [];

// lsiten for address form submit
document.getElementById ('submit-address-form').addEventListener ('click', handleAddressFormSubmit, false);

// handle address form submit
function handleAddressFormSubmit() {
    var balance = {
            address: document.getElementById("new-address").value,
            btc: 0
        },
        i = 0;
    
    for (i = 0; i < balances.length; i++) {
        if (balances[i].address === balance.address) {
            break;
        }       
    }  
    
    if (i >= balances.length) {
        balances.push(balance);
        refreshBalances();
    }
}

// refresh balances
function refreshBalances() {
    var i = 0,
        processed = 0;
    for (i = 0; i < balances.length; i++) {
        loadBalance(i, function(btc) {
            complete();
            console.log('btc: ', btc);
        });        
    }    
    
    function complete() {
        processed++;
        if (processed >= balances.length) {
            refreshBalancesDOM();
        }
    }
}

// refresh balances dom
function refreshBalancesDOM() {
    var balancesDiv = document.getElementById('balances'),
        ul = document.createElement('ul'),
        li,
        i = 0,
        balance;
    
    for (i = 0; i < balances.length; i++) {
        balance = balances[i];
        li = document.createElement('li');
        li.innerHTML = '...' +  balance.address.substring(balance.address.length - 6) + ': ' + balance.btc.toLocaleString() + 'BTC';
        ul.appendChild(li);
    }    
    
    balancesDiv.innerHTML = '';
    balancesDiv.appendChild(ul);
    
    refreshTotalsDOM();
    
    console.log('refreshBalancesDOM');
}

// refresh totals dom
function refreshTotalsDOM() {
    var totalsDiv = document.getElementById('totals'),
        i = 0,
        totalBalance = 0;
    
    for (i = 0; i < balances.length; i++) {
        totalBalance += balances[i].btc;
    }    
    
    totalsDiv.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;total: ' +...