Untitled

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="UTF-8" />

	<!-- INSERT YOUR CODE FOR THE HEAD-LEVEL HERE -->

	<!-- Erin Yu -->
	<!-- Section 08 -->
	<!-- TA: Alex Gerzon -->

	<script>

	function getData(){

	//var table = document.getElementsByTagName("input");
	var input = document.getElementsByTagName("input");
	var data = new Array(input.length);

		for(i = 0; i < input.length; i++){
			data[i] = Number(input[i].value)
			if (data[i] <= 0)
				data[i] = 0;
		}


	//function getRain(data)
	//{
		var total = 0;
		var avg = 0;
		var max = 0;
		var min = Number.MAX_SAFE_INTEGER;
		var maxIndex = 0;
		var minIndex = 0;
			for (i = 0; i < data.length; i++){
			total += data[i];
			console.log(total);
			if (data[i]>max)
				{
				max = data[i]
				maxIndex = i;
				}
			if (data[i]<min)
				{
				min = data[i]
				minIndex = i;
				}
			}
		avg = total/12; //to find the average
		//}

	//Total
	totalRain.value = total;

	//Average
	averageRain.value = avg;

	var monthNames = [ "January", "February", "March", "April", "May", "June",
	"July", "August", "September", "October", "November", "December" ];
	mostRain.value = monthNames[maxIndex]		;
	leastRain.value = monthNames[minIndex]
	}

	</script>
    <!-- DO NOT MODIFY BEYOND THIS COMMENT -->

    <style>
      body {
        width: 80%;
        margin: auto;
      }
      input {
        color: grey;
        font-size: 80%;
        padding: 2px 15px 2px 15px;
        text-align: right;
      }
      button {
        margin: 20px;
        font-size: 70%;
      }
      label {
        margin-left: 30px;
      }
      p.openingRemarks {
          font-size: 125%;
          text-align: center;
      }
      #header {
        margin: auto;
        min-width: 1200px;
        max-width: 1200px;
        overflow: auto;
        color: white;
        padding: 15px;
        margin-top: 35px;
        font-size: 150%;
        text-align: center;
        background: DarkSeaGreen;
        border-radius: 15px;
      }
      h1 { background-color:#ffffff;
	     color:DarkSeaGreen;
	   	 font-family: Georgia, "Times New Roman", serif;
	   	 text-align:center;
	   	 border-bottom: 3px ridge #330000;
	   	 border-right: 3px ridge #330000;
	  }
      input[type=radio] {border: 0px; width: 15%; height: 1em;
      }
      table {margin: auto;
      }
    </style>
    <title>Assignment 8</title>
  </head>

  <body>
    <div id="header">
    <h1>Rainfall Measurement Page</h1>
      <p class=openingRemarks> Thank you for participating in our study<br>
         Please enter your information and click the submit button<br>
      Note: measurements are inches and entered as whole numbers</p>
      <div style="margin: auto; width: 80%;">

		 <form>
          <table>
           	<tr><td>January</td><td><input type="text" id="janRain" value="" size = "5" /></td>
           	    <td>February</td><td><input type="text" id="febRain" value="" size = "5" /></td>
           	    <td>March</td><td><input type="text" id="marRain" value="" size = "5" /></td></tr>
           	<tr><td>April</td><td><input type="text" id="aprRain" value="" size = "5" /></td>
			    <td>May</td><td><input type="text" id="mayRain" value="" size = "5" /></td>
           	    <td>June</td><td><input type="text" id="junRain" value="" size = "5" /></td></tr>
           	<tr><td>July</td><td><input type="text" id="julRain" value="" size = "5" /></td>
			    <td>August</td><td><input type="text" id="augRain" value="" size = "5" /></td>
           	    <td>September</td><td><input type="text" id="sepRain" value="" size = "5" /></td></tr>
           	<tr><td>October</td><td><input type="text" id="octRain" value="" size = "5" /></td>
			    <td>November</td><td><input type="text" id="novRain" value="" size = "5" /></td>
           	    <td>December</td><td><input type="text" id="decRain" value="" size = "5" /></td></tr>
          </table>
           <br><br>
           <input type="button" value="Submit" onclick="
               /* insert your changes for the button here */

				getData()

               /* end your changes for the button here */
           "/>
           <br><br>
           <table>
           	<tr><td>Total Rainfall</td><td><input type="text" id="totalRain" value="" readonly /></td></tr>
           	<tr><td>Average Rainfall</td><td><input type="text" id="averageRain" value="" readonly /></td></tr>
           	<tr><td>The month with the most Rainfall&nbsp;</td><td><input type="text" id="mostRain" value="" readonly /></td></tr>
           	<tr><td>The month with the least Rainfall&nbsp;&nbsp;</td><td><input type="text" id="leastRain" value="" readonly /></td></tr>
          </table>
          </form>
      </div>
    </div>
  </body>
</html>