I\'ve attached the three files needed to complete the code, the .js, .css, and .
ID: 3885173 • Letter: I
Question
I've attached the three files needed to complete the code, the .js, .css, and .html. Final grade depends on this, pics are the instructions and what it should look like.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. */
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 + ".<br/>"; 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 + "< 0, there are 2 complex number solutions."; } 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.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 + ".<br/>"; 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 + "< 0, there are 2 complex number solutions."; } 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.html <!DOCTYPE html> <!-- Derrf Seitz --> <html> <head> <title>Quadratic Solver</title> <link href="Quadratic Solver.css" rel="stylesheet" type="text/css" /> <script src="Quadratic Solver.js"></script> </head>
<!-- In the body tag, add an onload handler for the page. It must call the onLoadPage() function. --> <body> <!-- form used only to allow Enter key activated button: --> <form>
<h3>Quadratic Solver</h3>
<!-- Add the HTML for an image of the quadratic equation in standard form. Use "quadratic equation.jpg" for its image. -->
<br/><br/>
<p class="section">Coefficents:</p> <table cellpadding="0" cellspacing="5"> <tr>
<td><label for="a">a: </label></td> <td> <input type="text" id="a" size="5" maxlength="5" /> </td> <td class="separator"> </td>
<!-- Add the HTML for the b and c input fields. Their id's must be "b" and "c" respectively. Each needs a non-breaking space td with class "separator" after it. -->
</tr> </table>
<!-- In the button tag for the Solve button, add an onclick handler. It must call the solve() function and then return false. --> <!-- return false; is needed so the page does not reload. --> <button type="submit" id="submit"> Solve </button>
<!-- In the button tag for the Reset button, add an onclick handler. It must call the reset() function. --> <button> Reset </button>
<br/><br/>
<hr/> <p class="section">Discriminant:</p>
<img src="Images/discriminant.jpg" />
<p class="output" id="discriminant"> </p>
<!-- Add the HTML for the Solutions output section. Model it after the Discriminant output section. Use "quadratic formula.jpg" for its image. Use "solutions" for the output paragraph id. -->
<hr/>
</form> </body>
</html>
Quadratic Solver.html <!DOCTYPE html> <!-- Derrf Seitz --> <html> <head> <title>Quadratic Solver</title> <link href="Quadratic Solver.css" rel="stylesheet" type="text/css" /> <script src="Quadratic Solver.js"></script> </head>
<!-- In the body tag, add an onload handler for the page. It must call the onLoadPage() function. --> <body> <!-- form used only to allow Enter key activated button: --> <form>
<h3>Quadratic Solver</h3>
<!-- Add the HTML for an image of the quadratic equation in standard form. Use "quadratic equation.jpg" for its image. -->
<br/><br/>
<p class="section">Coefficents:</p> <table cellpadding="0" cellspacing="5"> <tr>
<td><label for="a">a: </label></td> <td> <input type="text" id="a" size="5" maxlength="5" /> </td> <td class="separator"> </td>
<!-- Add the HTML for the b and c input fields. Their id's must be "b" and "c" respectively. Each needs a non-breaking space td with class "separator" after it. -->
</tr> </table>
<!-- In the button tag for the Solve button, add an onclick handler. It must call the solve() function and then return false. --> <!-- return false; is needed so the page does not reload. --> <button type="submit" id="submit"> Solve </button>
<!-- In the button tag for the Reset button, add an onclick handler. It must call the reset() function. --> <button> Reset </button>
<br/><br/>
<hr/> <p class="section">Discriminant:</p>
<img src="Images/discriminant.jpg" />
<p class="output" id="discriminant"> </p>
<!-- Add the HTML for the Solutions output section. Model it after the Discriminant output section. Use "quadratic formula.jpg" for its image. Use "solutions" for the output paragraph id. -->
<hr/>
</form> </body>
</html>
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
Explanation / Answer
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.
*/
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 + ".<br/>";
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 + "< 0, there are 2 complex number solutions.";
}
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.html
<!DOCTYPE html>
<!-- Derrf Seitz -->
<html>
<head>
<title>Quadratic Solver</title>
<link href="Quadratic Solver.css" rel="stylesheet" type="text/css" />
<script src="Quadratic Solver.js"></script>
</head>
<!--
In the body tag, add an onload handler for the page.
It must call the onLoadPage() function.
-->
<body>
<!-- form used only to allow Enter key activated button: -->
<form>
<h3>Quadratic Solver</h3>
<!--
Add the HTML for an image of the quadratic equation in standard form.
Use "quadratic equation.jpg" for its image.
-->
<br/><br/>
<p class="section">Coefficents:</p>
<table cellpadding="0" cellspacing="5">
<tr>
<td><label for="a">a: </label></td>
<td>
<input type="text" id="a" size="5" maxlength="5" />
</td>
<td class="separator"> </td>
<!--
Add the HTML for the b and c input fields.
Their id's must be "b" and "c" respectively.
Each needs a non-breaking space td with class "separator" after it.
-->
</tr>
</table>
<!--
In the button tag for the Solve button, add an onclick handler.
It must call the solve() function and then return false.
-->
<!-- return false; is needed so the page does not reload. -->
<button type="submit" id="submit">
Solve
</button>
<!--
In the button tag for the Reset button, add an onclick handler.
It must call the reset() function.
-->
<button>
Reset
</button>
<br/><br/>
<hr/>
<p class="section">Discriminant:</p>
<img src="Images/discriminant.jpg" />
<p class="output" id="discriminant">
</p>
<!--
Add the HTML for the Solutions output section.
Model it after the Discriminant output section.
Use "quadratic formula.jpg" for its image.
Use "solutions" for the output paragraph id.
-->