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": [{
    "Gender": "Female",
    "Trades": 4534,
    "Revenue": 1694499.78
  }, {
    "Gender": "Male",
    "Trades": 18979,
    "Revenue": 36551869.84
  }]
};

$(document).ready(function() {
  alert(response.success);
  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[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) * 100;

    maleTrades = Math.round(maleTrades * 100) / 100;
    maleRevenue = Math.round(maleRevenue * 100) / 100;
    femaleTrades = Math.round(femaleTrades * 100) / 100;
    femaleRevenue = Math.round(femaleRevenue * 100) / 100;
    malePercentage = Math.round(malePercentage * 100) / 100;
    femalePercentage = Math.round(femalePercentage * 100) / 100;

    $("#spanOrganizationMaleTradeStats").html(numberWithCommas(maleTrades));
    $("#spanOrganizationMaleRevenueStats").html(numberWithCommas(maleRevenue));
    $("#spanOrganizationFemaleTradeStats").html(numberWithCommas(femaleTrades));
    $("#spanOrganizationFemaleRevenueStats").html(numberWithCommas(femaleRevenue));
    $("#spanOrganizationMalePercentage").html(numberWithCommas(malePercentage) + '%');
    $("#spanOrganizationFemalePercentage").html(numberWithCommas(femalePercentage) + '%');
  } else {
   ...