In this exercise, you’ll upgrade a version of the MPG application so the error m
ID: 3914958 • Letter: I
Question
In this exercise, you’ll upgrade a version of the MPG application so the error messages are displayed in span elements to the right of the text boxes.
Open the HTML and JavaScript files in this folder: exercises_shortch06mpg
Then, run the application and click the Calculate MPG button to see that an error message is displayed in an alert dialog box for each of the two input fields.
2. In the HTML file, add a span element after the input element for the first two text boxes.
3. Enhance the data validation so it displays the error messages in the span elements instead of in alert dialog boxes.
4. If the user entries are valid, clear the contents of the span elements.
5. If the user clicks the Clear Entries button, set the contents of each span element to an asterisk.
Current code:
HTML
mpg.js
CSS:
Calculate Miles Per Gallon Miles Driven: Miles must be numeric and greater than zero Gallons must be numeric and greater than zero Gallons of Gas Used: Miles Per Gallon Calculate MPG Clear EntriesExplanation / Answer
If you have any doubts, please give me comment...
miles.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculate MPG</title>
<link rel="stylesheet" href="mpg.css">
<script src="mpg.js"></script>
</head>
<body>
<main>
<h1>Calculate Miles Per Gallon</h1>
<label for="miles">Miles Driven:</label>
<input type="text" id="miles">
<span id="miles_error"></span>
<br>
<label for="gallons">Gallons of Gas Used:</label>
<input type="text" id="gallons">
<span id="gallons_error"></span><br>
<label for="mpg">Miles Per Gallon</label>
<input type="text" id="mpg" disabled><br>
<label> </label>
<input type="button" id="calculate" value="Calculate MPG"><br>
<label> </label>
<input type="button" id="clear" value="Clear Entries"><br>
</main>
</body>
</html>
mpg.js
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
function calculateMpg(miles, gallons) {
var mpg = (miles / gallons);
mpg = mpg.toFixed(1);
return mpg;
};
var processEntries = function() {
var miles = $("miles").value;
var gallons = $("gallons").value;
var isValid = true;
if (isNaN(miles) || miles <= 0) {
document.getElementById("miles_error").innerHTML = "Miles must be numeric and greater than zero";
isValid = false;
}
if (isNaN(gallons) || gallons <= 0) {
document.getElementById("gallons_error").innerHTML = "Gallons must be numeric and greater than zero";
isValid = false;
}
if (isValid) {
$("mpg").value = calculateMpg(miles, gallons);
}
};
var clearEntries = function() {
$("miles").value = "";
$("gallons").value = "";
$("mpg").value = "";
};
window.onload = function() {
$("calculate").onclick = processEntries;
$("clear").onclick = clearEntries;
$("miles").ondblclick = clearEntries;
$("miles").focus();
};
mpg.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 700px;
padding: 0 2em 1em;
border: 3px solid blue;
}
h1 {
color: blue;
margin-bottom: .25em;
}
label {
float: left;
width: 11em;
text-align: right;
}
input {
margin-left: 1em;
margin-right: .5em;
margin-bottom: .5em;
width: 11em;
}
span {
color: red;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.