JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<div id="ArrowCalculator"></div>

CSS

#ArrowCalculator tr.arrowcalc-10 > td:nth-child(2),
#ArrowCalculator tr.arrowcalc-10 > td:nth-child(3) {
  background-color:#C00000;
  color:white;
}
#ArrowCalculator tr.arrowcalc-med {
  background-color:#0070C0;
  color:white;
}
#ArrowCalculator tr.arrowcalc-maxke > td:nth-child(4),
#ArrowCalculator tr.arrowcalc-maxke > td:nth-child(5) {
  background-color:#C00000;
  color:white;
}


#ArrowCalculator table {
  border-collapse:collapse;
  background-color:#d8d8d8;
  margin: 10px 0 0;
}
#ArrowCalculator td {
  max-width:50px;
  text-align:left;
  padding:2px 15px;
  border:0px;
}

#ArrowCalculator input {
  appearance:none;
  box-shadow:none;
  display: block;
  padding: 5px;
  margin: 3px;
  border: solid 3px #c9c9c9;
  transition: border 0.3s;
}

#ArrowCalculator input:focus {
  outline: none;
  border: solid 3px #969696;
}

JavaScript

var ArrowCalculator;
(function() {

	function ArrowCalc(element) {
  	this.Element = element;
    this.$GR = undefined;
    this.$FPS = undefined;
    this.$InputContainer = undefined;
    this.$Table = undefined;
  }
  
  ArrowCalc.prototype = {
  	'Init': function() {
    	this.CreateForm();
    },
    'CreateForm': function() {
    	this.$InputContainer = $('<div></div>');
      $('<label>GR:</label>').appendTo(this.$InputContainer);
    	this.$GR = $('<input type="text"/>').appendTo(this.$InputContainer).val(300);
       $('<label>FPS:</label>').appendTo(this.$InputContainer);
      this.$FPS = $('<input type="text"/>').appendTo(this.$InputContainer).val(300);
      this.$Button = $('<button>Calculate</button>').appendTo(this.$InputContainer);
      
      this.$Button.on('click', this.Calc.bind(this));

      
      this.$InputContainer.appendTo(this.Element);
    },
    'Calc': function() {
    	var inputgr = gr = parseInt(this.$GR.val(), 10);
      var inputfps = fps = parseInt(this.$FPS.val(), 10);
      var speed = 100;
      var ke = gr * (fps * fps) / 450800;
      var m = gr * fps / 225400;
      var mke = 0;
      var mm = 0;
      var med = 0;
      
      var results = [];
      
      for(;gr<=1000; gr+=3, fps-=1) {
;
      	var row = [
        	gr,
          fps,
          fps/inputfps * 100,	// % speed
          gr * (fps * fps) / 450800,	// ke
          0, // % max ke
          gr * fps / 225400, // m
          0, // % max m
          0 // eff diff
        ];
        if(row[3] > mke) { mke = row[3]; }
        if(row[5] > mm) { mm = row[5]; }
        results.push(row);
      }
      for(var i=0, iL = results.length; i < iL; i++) {
      	var row = results[i];
        row[4] = row[3] / mke * 100;
        row[6] = row[5] / mm * 100;
        row[7] = (row[2] + row[4] + row[6]) / 300;
        if(row[7] > med) { med = row[7]; }
      }
      
      this.CreateTable(results, mke, mm, med);
      
      
    },
    'CreateTable': function(results, mke,...