JSFiddle - React, Tailwind, and code Playground

by Tan Kucukhas

HTML

Ticker:
<input id="ticker" type="text">
<br>Volume:
<input id="volume" onKeyPress="return checkIt(event)" type="number" min="0">
<br>
<input type="button" class="addBtn" value="Add">
<table id="exchangeTable" style="width:100%">
    <tr>
        <th>ticker</th>
        <th>volume</th>
    </tr>
</table>
<p>Total Volume Traded: <span id="totalVolume"> </span>

</p>

CSS

table {
    border-collapse: collapse;
    margin-top:10px;
    max-width: 300px;
}
table, th, td {
    border: 1px solid black;
}
th {
    text-align:left;
    background-color:#f1f1f1;
}

JavaScript

var M = {}, V = {}, C = {};

/* model handles the data */
M = {
    data: [{
        ticker: 'APPL',
        volume: 6
    }, {
        ticker: 'MSFT',
        volume: 8
    }, {
        ticker: 'GE',
        volume: 10
    }, {
        ticker: 'DIS',
        volume: 2
    }, {
        ticker: 'PEP',
        volume: 1
    }, {
        ticker: 'T',
        volume: 5
    }],
    
    setData: function (d) {
        for (i = 0; i < this.data.length; i++) {
            if (this.data[i].ticker === d.ticker) {
                this.data[i].volume += parseInt(d.volume, 10);
                return;
            }
        }
        this.data.push(d);
    },
    getData: function () {
        return data;
    }
};

/* view handles the display */
V = {
    ticker: document.querySelector("#ticker"),
    volume: document.querySelector("#volume"),
    totalVolume: document.querySelector("#totalVolume"),
    exchangeTable: document.querySelector("#exchangeTable"),

    listTable: function (M) {
        var byVolume = M.data.slice(0);
        byVolume.sort(function (a, b) {
            return a.volume - b.volume;
        });
        byVolume.reverse();
        /* create table row and cells fill values from data */
        for (i = 0; i < byVolume.length; i++) {
            var oNewP = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var oText1 = document.createTextNode(byVolume[i].ticker);
            var oText2 = document.createTextNode(byVolume[i].volume);
            td1.appendChild(oText1);
            td2.appendChild(oText2);
            oNewP.appendChild(td1);
            oNewP.appendChild(td2);
            exchangeTable.appendChild(oNewP);
        }
    },
    addTable: function (M) {
        var newData = {
            ticker: this.ticker.value.toUpperCase(),
            volume: parseInt(this.volume.value, 10)
        };
        M.setData(newData);
    },
    writeAll: function...