JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<h2>Gender Trading Stats</h2>
<ul class="list-group">
  <li class="list-group-item">
    <img height="36" width="36" src="~/Images/male_gender.png" />Male
    <span class="badge badge-danger" id="spanOrganizationMalePercentage">0</span>
    <span class="badge badge-info" id="spanOrganizationMaleRevenueStats">0</span>
    <span class="badge badge-warning" id="spanOrganizationMaleTradeStats">0</span>

  </li>
  <li class="list-group-item">
    <img height="36" width="36" src="~/Images/female_gender.png" />Female
    <span class="badge badge-danger" id="spanOrganizationFemalePercentage">0</span>
    <span class="badge badge-info" id="spanOrganizationFemaleRevenueStats">0</span>
    <span class="badge badge-warning" id="spanOrganizationFemaleTradeStats">0</span>
  </li>
  <li class="list-group-item">
    <span class="badge badge-info">Revenue</span>
    <span class="badge badge-warning">Trades</span>
  </li>
</ul>

JavaScript

var response = {
  "success": "true",
  "value": [{
    "TIMESTAMP": "2016-07-27",
    "ASI": "6,382.42",
    "PREVIOUS_ASI": "6,387.85",
    "ASI_CHANGE": "-0.09",
    "SPSL2000": "3,401.79",
    "PREVIOUS_SPSL2000": "3,406.75",
    "SPSL2000_CHANGE": "-0.15",
    "TURNOVER": "363.99",
    "PREVIOUS_TURNOVER": "265.05",
    "MARKETCAPITAL": "2,719,885.18",
    "PREVIOUS_MARKETCAPITAL": "2,722,198.47",
    "TOTALTRADES": "5,313",
    "PREVIOUS_TOTALTRADES": "4,849",
    "DOMESTICTRADES": "4,929",
    "PREVIOUS_DOMESTICTRADES": "4,686",
    "FOREIGNTRADES": "384",
    "PREVIOUS_FOREIGNTRADES": "163",
    "FOREIGNPURCHASES": "90.55",
    "PREVIOUS_FOREIGNPURCHASES": "25.59",
    "DOMESTICSALES": "288.30",
    "PREVIOUS_DOMESTICSALES": "235.43",
    "DOMESTICPURCHASES": "273.44",
    "PREVIOUS_DOMESTICPURCHASES": "239.47",
    "FOREIGNSALES": "75.69",
    "PREVIOUS_FOREIGNSALES": "29.63",
    "FOREIGNMARKETSHARE": "22.84",
    "PREVIOUS_FOREIGNMARKETSHARE": "10.42",
    "NET_FLOW": "14.87",
    "PREVIOUS_NET_FLOW": "-4.04"
  }]
}


$(document).ready(function() {
  alert(response.success);
  alert(response.value[0].TIMESTAMP);
  //initForm();
});

function initForm() {
  var maleTrades = 0;
  var maleRevenue = 0;
  var femaleTrades = 0;
  var femaleRevenue = 0;
  var totalTrades = 0;
  var totalRevenue = 0;
  var malePercentage = 0;
  var femalePercentage = 0;

  if (response.success = "true") {

    for (var i = 0; i < response.value.length; i++) {
      if (response.value[i].Gender == 'Male') {
        maleTrades = parseFloat(response.value[i].Trades);
        maleRevenue = parseFloat(response.value[i].Revenue);
      } else {
        femaleTrades = parseFloat(response.value[i].Trades);
        femaleRevenue = parseFloat(response.value[i].Revenue);
      }
    }

    totalTrades = maleTrades + femaleTrades;
    totalRevenue = maleRevenue + femaleRevenue;

    malePercentage = (maleRevenue / totalRevenue) * 100;
    femalePercentage = (femaleRevenue / totalRevenue)...