JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapped">
  <h1>Assignment 11</h1>
  <div id="intro">
    <h4>The table gives the amount of total rainfall that occurred during a rainfall event.</h4>
    <p id="output"></p>
    <table bgcolor="#92e881" class="test">
      <tr>
        <th id="alt">Hour</th>
        <td>0</td>
        <td id="alt">1</td>
        <td>2</td>
        <td id="alt">3</td>
        <td>4</td>
        <td id="alt">5</td>
        <td>6</td>
      </tr>
      <tr>
        <th id="alt">Rainfall</th>
        <td> 0.00</td>
        <td id="alt"> 0.04</td>
        <td> 0.11</td>
        <td id="alt"> 0.60</td>
        <td> 0.87</td>
        <td id="alt"> 0.95</td>
        <td> 1.00</td>
      </tr>
    </table>
  </div>

  <div>
    <h4>
Enter a value between 0 and 6 to calculate the rain that has fallen at that time.</h4></div>
  <input type="tb1" id="input" onkeypress="handle(event)">
  <h4>
Click or hit enter:
</h4>
  <input type="button" class="button" value="Calculate" id="bt1" onClick="findRainfall(rainfall, input);">
</div>

CSS

#wrapped {
  font-family: Verdana, Geneva, sans-serif;
  background: #FCF75C;
  border-radius: 25px;
  border: 5px solid #7AB5F0;
  padding: 20px;
  width: 500px;
  height: 100%;
}

#alt {
  background-color: #d4fcfb;
}
#alt1 {
  background-color: #7AB5F0
}
#output {
  text-align: left;
  font-size: 35px;
  color: #7AB5F0;
}

#bt1,
#input {
  font-family: Verdana, Geneva, sans-serif;
  background: #d4fcfb;
  border-radius: 25px;
  border: 2px solid #92e881;
  padding: 5px;
  width: 133px;
  height: 100%;
}
   .test 
    { 
        -moz-border-radius: 12px; 
        -webkit-border-radius: 12px; 
        border: #92e881 5px solid; .
        width: 200; 
        height: 55; 
    }

JavaScript

//Assignment 11

var rainfall = [0.00, 0.04, 0.11, 0.60, 0.87, 0.95, 1.00];

//The enter key handler
function handle(e) {
  var key = e.keyCode || e.which;
  if (key == 13) {
    input = document.getElementById("input").value;
    findRainfall(rainfall, input);

  }
}

function findRainfall(rainfall, input) {
  input = document.getElementById("input").value;
  limitInput(input);
  document.getElementById("output").innerHTML = input + " = " + interpol(rainfall, input);
  document.getElementById("input").value = "";
}
//Limit user input
function limitInput(input) {
  x = document.getElementById("input").value;
  if (isNaN(x) || x < 0 || x > 6) {
    alert("Please enter only a number between 0 and " + (rainfall.length - 1) + ". You entered: " + input);
  }
}

function interpol(rainfall, input) {

  var number = parseFloat(input);

  var x = number; // Target X co-ordinate
  var x1 = Math.floor(number); // X1 = First co-ordinates
  var x2 = Math.floor(number + 1); // X2 = Second co-ordinates
  var y1 = rainfall[Math.floor(number)]; // Y1 = First co-ordinates
  var y2 = rainfall[Math.floor(number + 1)]; // Y2 = Second co-ordinates

  // Y = Interpolated Y co-ordinate.
  var y = (((x - x1) * (y2 - y1)) / (x2 - x1)) + y1;

  return number == rainfall.length - 1 ? rainfall[number] : Number(y).toFixed(2);
}