JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<h1>Module 9</h1>
  <form>
    Enter value.<br>
    <input type="text"  id="number"><br>
    <input type="button" value="Enter" id="click">
  </form>

  <div id="output"></div>

CSS

#click {
  background-color: blue;
  color: white;
  margin-top: 8px;
  margin-bottom: 8px;
  width: 10em;
}

JavaScript

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

document.getElementById("click").onclick = function() {
  number = document.getElementById("number").value;
  check_number(rainfall, number);
}

function check_number(array, number) {
  if (number >= 0.0 && number <= array.length-1) {//check number is between 0 and array.length-1
    document.getElementById("output").innerHTML = linear_interpolation(array, number);
  }
  else {
    document.getElementById("output").innerHTML = "Please enter a number between 0 and " + (array.length-1) + ". <br>Your entry was " + number ;
  }
}

function linear_interpolation(array, number) {
    
  var number = parseFloat(number);

  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 = array[Math.floor(number)]; // Y1 = First co-ordinates
  var y2 = array[Math.floor(number+1)]; // Y2 = Second co-ordinates

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

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

/*

Introduction
 
Just like many of the other data structures covered in this class - indexes are also pretty straightforward. They are covered in Topic - Indexing Techniques. For this module you will only have to complete a computer program.
 
Assignment
 
An interpolation table is a specific instance of a Lookup Table - which is also a practical application of indexing, in this case numeric indexes. You will create a computer program that uses the following lookup table (interpolation table), allows a user to input a number and calculates the answer by interpolating between 2 numbers - or finds an exact solution.
 
0     0.00 
1     0.04 
2     0.11 
3     0.60 
4     0.87 
5     0.95 
6     1.00 
 
The table gives the amount of total rainfall (normalized to 1) that occurred during a rainfall event. For example at hour 3, 0.6 or 60% of the total...