title: user input of the students grades into an output as a text box then compute the final letter grade
body: <p>I need to make the JS code I've gotten so far output to a text box (that's read-only) instead of displayed on the page after clicking the GPA submit button.</p>
  
  <p>I also need help figuring out how to take the GPA that is calculated and outputted to that text box rounded up to the nearest whole number and pasted into a grade letter format instead of a number.</p>
  
  <p>Something like:<br>
  <em>"you got a 97 percent, which means you get an A"</em><br>
      or<br>
  <em>"you got an 80 percent which means you get a B"</em>  </p>
  
  <p>Here are the percent equivalents broken down:  </p>
  
  <pre><code>90-100 A
  80-89  B
  70-79  C
  60-69  D
  0-59   F
  </code></pre>
  
  <p>*If the student's final grade is 'D' or 'F' the text should read something like "Student has failed and must retake the course"</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Student Grades&lt;/h1&gt;
  &lt;h2&gt;Please Enter Your Percentage For Course Section&lt;/h2&gt;
  &lt;label&gt;Homework&lt;/label&gt;
  &lt;input type="number" id="hmwk" size=2 value="hmwk"&gt;
  &lt;br&gt;
  &lt;label&gt;Midterm&lt;/label&gt;
  &lt;input type="number" id="mdtm" size=2 value="mdtm"&gt;
  &lt;br&gt;
  &lt;label&gt;Final&lt;/label&gt;
  &lt;input type="number" id="final" size=2 value="final"&gt;
  &lt;br&gt;
  &lt;label&gt;Part&lt;/label&gt;
  &lt;input type="number" id="prtc" size=2 value="prtc"&gt;
  &lt;br&gt;
  &lt;input type="button" value="GPA" onclick="grade()"&gt;
  &lt;div id="outputDiv" style="height: 50px; width: 100%;"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    function grade() {
      var grd1 = parseFloat(document.getElementById('hmwk').value * 0.5);
      var grd2 = parseFloat(document.getElementById('mdtm').value * 0.2);
      var grd3 = parseFloat(document.getElementById('final').value * 0.2);
      var grd4 = parseFloat(document.getElementById('prtc').value * 0.1);
      var total = grd1 + grd2 + grd3 + grd4;
      var display = document.getElementById('outputDiv');
      display.innerHTML = 'Your Final Grade Is: ' + total;
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>