JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<fieldset>
  <label for="GoalsAllowed">
    Enter Number of Goals Allowed
  </label>
  <input type="Goals" id="GoalsAllowed" />
  <!--Input for Goals Allowed-->
</fieldset>
<fieldset>
  <label for="MinutesPlayed">
    Enter Minutes Played
  </label>
  <input type="MinPlayed" id="MPlayed" />
  <!--Input for Minutes Played-->
</fieldset>
<fieldset>
  <label for="GameLength">
    Regulation Game Length
  </label>
  <input type="Minutes" id="MinGame" />
  <!--Input for Length of Regulation Game-->
</fieldset>
<fieldset>
  <button type="button" id="button">Calculate</button>
  <!--Calculation Button-->
</fieldset>
<fieldset>
  <p id="GAA">&nbsp;</p>
</fieldset>

JavaScript

var convert = function() {
  var Goals = document.getElementById("GoalsAllowed").value;
  var Minutes = document.getElementById("MPlayed").value;
  var GameLength = document.getElementById("MinGame").value;
  
  var regex = /^[+-]?\d+(\.\d+)?$/
  
  if (!regex.test(Goals) || !regex.test(Minutes) || !regex.test(GameLength)) {
  	alert('Please only enter numeric values.');
    return false;
  }
  
  var GAA = (Goals * GameLength) / Minutes;
  //window.alert("Swords and Sandals: " + GAA);
  document.getElementById("GAA").innerHTML = "Your Goals Against Average is: " + Math.ceil(GAA * 100) / 100;
}

document.getElementById("button").addEventListener("click", convert, false);