JSFiddle - React, Tailwind, and code Playground

by Peyton Hessler

HTML

<h4>
Enter the hour number to see what the total rainfall was at that point.
</h4>
<H4>
For example, 3 will result in a 0.6 or 60% of rainfall at that hour.
</H4>
<input type = "text" id = "userInput" value = "4.5"/>
<input type ="button" id = "formbtn" value = "ENTER" onclick = "userTableResults()"/>
<p id = "totRainfall">
</p>

JavaScript

// The program is pretty simple. It runs off of one function that will find the answer through a calculation. Depends on the time picked the program will decided if the formula is needed or the answer in the single number within the array.


//Create the array in which I will grab the numbers from.
var array = [0.00, 0.04, 0.11, 0.60, 0.87, 0.95, 1.00];

// Here is the function where all of the magic happens.
function userTableResults()
	{
  	var returnValue = "";
    var uInput = document.getElementById("userInput").value;
    uInput.toString();
    var x = parseInt(uInput[0])
    var y = x +1;
    x = array[x];
    var decimalValue = uInput[2]/10;
    var length = uInput.length;
    var y = array [y];
    // This if loop takes the number inputed and sees if the length is one. If that is correct than the program finds the percentage of that number and then priints the results. If the number is longer than 1 than the formula is used to determine the correct rainfall at that given moment.
    if (length == 1)
    	{
      	returnValue = array[uInput];
      }
    else
    	{
      var calc = (x + (y-x) * decimalValue);
      returnValue = Math.round(calc * 1000)/1000;
      }
      var percentage = returnValue * 100
    document.getElementById("totRainfall").innerHTML = "Total rainfall at the hour of " + uInput + "  was " + returnValue + " or " + percentage + "%";
  }