Html: Grade Calculator HW / HW / HW / Curve +5 ? Compute! Clear CSS: body { background-color: white; } div { margin-top: 0.5em; margin-bottom:

Html:

Grade Calculator

HW

/

HW

/

HW

/

Curve +5 ?

CSS:

body {

background-color: white;

}

div {

margin-top: 0.5em;

margin-bottom: 0.5em;

}

h1 {

margin: 0;

}

.pass {

background-color: #cfc;

font-weight: bold;

}

.fail {

background-color: #fcc;

font-style: italic;

}

Write an unobtrusive JavaScript code to add behavior to the page that has a user interface for entering grades on homework assignments. You can download the HTML and CSS code in the folder Question 1 You will compute the percentage of points earned, with an optional curve. When "Compute!" is clicked, your JS code should use the values in the text boxes to compute the percentage (rounded to the nearest percent). If the "Curve +5" checkbox is checked, add +5 percent up to a maximum of 100% total. You should insert the percentage into the page as a new div added to the end (bottom) of the existing page section with the id of resultsarea. If the overall percentage is 60% or more, give your newly created div a CSS class of pass; otherwise give it a class of fail. Each time the user clicks "Compute!", you will insert such a new div; this means that several divs would be there after several clicks of "Compute!". In the code shown there are 3 assignments, but your code should work for any number