In: Computer Science
Develop and test an HTML document that has text boxes for apple (69 cents each), orange (59 cents each), and banana (49 cents each), along with a Submit button. These text boxes take a number, which is the purchased number of the particular fruit. Add a max property value of 99 and a min property value of 0. Add event handlers using the min and max properties to check on values input through the text boxes of the document to ensure that the input values are numbers in the range. Each of the text boxes should have its own onclick event handler. These handlers must add the cost of their fruit to a total cost. An event handler for the Submit button must produce an alert window with the message "Your total cost is $xxx.xx" where xxx.xx is the total cost of the chosen fruit, including 7.75 percent sales tax. This handler must return false (to avoid actual submission of the form data).
Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
</head>
<body>
<div>
<form>
<label>Apples (69 cents each) : </label>
<input
type="textbox" id="apples" name="apples" value="" min="0" max="99"
onkeyup="applemax(this.value);"><br>
<label>Oranges (59 cents each) : </label>
<input
type="textbox" id="oranges" name="oranges" value="" min="0"
max="99" onkeyup="orangemax(this.value);"><br>
<label>Banana (49 cents each) : </label>
<input
type="textbox" id="bananas" name="bananas" value="" min="0"
max="99" onkeyup="bananamax(this.value);"><br>
<input
type="button" id="calculate" value="Submit">
</form>
</div>
<script type="text/javascript">
function calc() {
var apple =
document.getElementsByName("apples")[0].value;
var orange =
document.getElementsByName("oranges")[0].value;
var banana =
document.getElementsByName("bananas")[0].value;
total =
(apple * ".69" + orange * ".59" + banana * ".49" ) *
"1.0775";
// The 1.0775 is
to calculate the percent sales tax
alert("Your
total cost is $" + total.toPrecision(5));
}
function applemax(value)
{
var maxValue
= 99;
if( value>
maxValue ) // checking the value in the text box
{
alert("The input can be in the range of 0-99");
// alert if the input is more than 99
apples.value="0"; // changing the value to 0 if
value is more than 99
}
}
function orangemax(value)
{
var maxValue
= 99;
if( value>
maxValue )
{
alert("The input can be in the range of
0-99");
oranges.value="0";
}
}
function bananamax(value)
{
var maxValue
= 99;
if( value>
maxValue )
{
alert("The input can be in the range of
0-99");
bananas.value="0";
}
}
window.onload = function ()
{
document.getElementById("calculate").onclick = calc;
};
</script>
</body>
</html>
Output: