Can someone do this? Final grade, really important. Codes are included. Output should look like the example screenshots I attached. Thanks in advance.

Quadratic Solver.html

Quadratic Solver

Coefficents:

a:

Solve

Reset

---

Discriminant:

---

Quadratic Solver.js

// Your Name

// Calculated values:

var discriminant;

var complexSolutionRealPart;

var complexSolutionImaginaryPart;

var realSolution1;

var realSolution2;

// String literals:

var sDiscriminant1 = "The value of the discriminant is ";

var sDiscriminant2 = "Since the value of the discriminant is ";

var sInvalidInput = "A number must be entered for each coefficient.";

var sSolutions1 = "The soutions are ";

var sSolutions2 = "The soution is ";

function onLoadPage()

{

// You write the code for this function.

// Reset all fields:

// Set input focus to the field for "a":

}

// Postconditions:

// realSolution1

function calculate1RealSolution(a, b, c)

{

// You write the code for this function.

}

// Preconditions:

// discriminant

// Postconditions:

// complexSolutionRealPart

// complexSolutionImaginaryPart

function calculate2ComplexSolutions(a, b, c)

{

// You write the code for this function.

// Calculate real part:

// Calculate imaginary part:

}

// Preconditions:

// discriminant

// Postconditions:

// realSolution1

// realSolution2

function calculate2RealSolutions(a, b, c)

{

// You write the code for this function.

}

function calculateDiscriminant(a, b, c)

{

// You write the code for this function.

}

// Postconditions:

// discriminant

// complexSolutionRealPart

// complexSolutionImaginaryPart

// realSolution1

// realSolution2

function calculateSolutions(a, b, c)

{

discriminant = calculateDiscriminant(a, b, c);

if (discriminant > 0)

{

calculate2RealSolutions(a, b, c);

}

else

if (discriminant == 0)

{

calculate1RealSolution(a, b, c);

}

else

{

calculate2ComplexSolutions(a, b, c);

}

}

function isNumber(sNumber)

{

if (sNumber == "")

{

return false;

}

var number = parseFloat(sNumber);

if (isNaN(number) == true)

{

return false;

}

if (isFinite(number) == false)

{

return false;

}

return true;

}

// Preconditions:

// realSolution1

function output1RealSolution()

{

// You write the code for this function.

}

// Preconditions:

// complexSolutionRealPart

// complexSolutionImaginaryPart

function output2ComplexSolutions()

{

// You write the code for this function.

}

// Preconditions:

// realSolution1

// realSolution2

function output2RealSolutions()

{

// You write the code for this function.

}

// Preconditions:

// discriminant

function outputDiscriminant()

{

var sOutput = sDiscriminant1 + discriminant + ".
";

if (discriminant > 0)

{

sOutput += sDiscriminant2 + "> 0, there are 2 real number solutions.";

}

else

if (discriminant == 0)

{

sOutput += sDiscriminant2 + "= 0, there is 1 real number solution.";

}

else

{

sOutput += sDiscriminant2 + "

}

document.getElementById("discriminant").innerHTML = sOutput;

}

// Preconditions:

// discriminant

// complexSolutionRealPart

// complexSolutionImaginaryPart

// realSolution1

// realSolution2

function outputSolutions()

{

if (discriminant > 0)

{

output2RealSolutions();

}

else

if (discriminant == 0)

{

output1RealSolution();

}

else

{

output2ComplexSolutions();

}

}

function reset()

{

// You write the code for this function.

}

function solve()

{

// You write the code for this function.

// Get field values:

// Validate fields:

// Calculate results:

// Output results:

}

function validateFields(a, b, c)

{

if (isNumber(a) == false)

{

alert(sInvalidInput);

document.getElementById("a").focus();

return false;

}

if (isNumber(b) == false)

{

alert(sInvalidInput);

document.getElementById("b").focus();

return false;

}

if (isNumber(c) == false)

{

alert(sInvalidInput);

document.getElementById("c").focus();

return false;

}

return true;

}

Quadratic Solver .css

/* Your Name */

/*

Add a tag (element) selector for the body tag.

Give it a font size of 16 points and a left padding of 5 pixels.

*/

/*

Add a tag (element) selector for button tags.

Give it a bold, 16 point font.

Give it a top margin of 15 pixels and a width of 150 pixels.

*/

/*

Add a combinator selector for a button that follows a button (adjacent sibling).

Give it a left margin of 20 pixels.

*/

h3

{

margin-top:0px;

font-size:18pt;

}

input

{

font-size:12pt;

}

/*

Add a focus pseudo class selector for input elements.

Give it a background color of LightCyan.

*/

label

{

font-style:italic;

font-weight:bold;

}

p.output

{

font-size:16pt;

margin-bottom:0px;

margin-top:0px;

}

p.section

{

color:blue;

font-weight:bold;

margin-bottom:0px;

margin-top:0px;

}

td.separator

{

width:10px;

}

/*

Add an ID selector for the element (a button) with id="submit".

Give it a 4 pixel wide, solid stroke, goldenrod colored border.

*/

Course Project- Instructions In this project, you will complete the code for a quadratic equation solver The following requirements must be met: 1. Use the provided starter files: Quadratic Solver.html HTML page Quadratic Solver.css- externally linked CSS Quadratic Solver.js - externally linked JavaScript Images (folder) images - contains the required 2. Add the missing input and output fields to the HTML file There are comments in the HTML file that show where these fields must appear. 3. Add the event handlers to the HTML file. In response to user-initiated events, the event handlers call functions in the externally linked JavaScript file. There are comments in the HTML file that show where your handlers must appear 4. Add the missing styles to the CSS file The styles determine the presentation of the page. There are comments in the CSS file that show where your styles must appear. 5. Add the missing code to the JavaScript file. The code determines the dynamic behavior of the page. There are comments in the JavaScript file that show where your code must appear. Refer to the course project guidance document for additional assistance