Question

In: Computer Science

Develop and test an HTML document that has text boxes for apple (69 cents each), orange...

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).

Expert Solution

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:

venereology answered 3 years ago

Develop and test an HTML document to use the DOM 2 event model that has text...

Develop and test an HTML document to use the DOM 2 event model that has text boxes for apple (59 cents each), orange (49 cents each), and banana (39 cents each), along with a Submit button. These text boxes take a number, which is the purchased number of the particular fruit. Add reality checks to the text boxes of the document to ensure that the input values are numbers in the range from 0 to 99. Each of the text...

FOR HTML Web scripting Complete the following: Create and test an HTML document that has six...

FOR HTML Web scripting Complete the following: Create and test an HTML document that has six short paragraphs of text that describe various aspects of the state in which you live. You must define three different paragraph styles, p1, p2, and p3. The p1 style must use left and right margins of 20 pixels, a background color of pink, and a foreground color of blue. The p2 style must use left and right margins of 30 pixels, a background color...

Create, test, and validate an HTML document that has a form with the following controls: a....

Create, test, and validate an HTML document that has a form with the following controls: a. A text box to collect the user's name b. Four checkboxes, one for each of the following items: i. Four 25-watt light bulbs for $2.39 ii. Eight 25-watt light bulbs for $4.29 iii. Four 25-watt long-life light bulbs for $3.95 iv. Eight 25-watt long-life light bulbs for $7.49 c. A collection of three radio buttons that are labeled as follows: i. Visa ii. Master...

A mail-order house uses 15,950 boxes a year. Carrying costs are 69 cents per box a...

A mail-order house uses 15,950 boxes a year. Carrying costs are 69 cents per box a year, and ordering costs are $100. The following price schedule applies. Number of Boxes Price per Box 1,000 to 1,999 $1.40 2,000 to 4,999 1.30 5,000 to 9,999 1.20 10,000 or more 1.15 a. Determine the optimal order quantity. (Round your answer to the nearest whole number.) b. Determine the number of orders per year. (Round your answer to 2 decimal places.)

Create, test, and validate an HTML document that defines a table with columns for state, state...

Create, test, and validate an HTML document that defines a table with columns for state, state bird, state flower, and state tree. There must be at least five rows for states in the table.

Create and test an HTML document for yourself, including your name, address, and electronic mail address....

Create and test an HTML document for yourself, including your name, address, and electronic mail address. If you are a student, you must include your major and your grade level. If you work, you must include your employer, your employer’s address, and your job title. This document must use several headings and <em>, <strong>, <hr />, <p>, and <br /> tags. 2.2 Add pictures of yourself and at least one other image (of your friend, spouse, or pet) 2.3 Add...

Create, test, and validate an HTML document for yourself, including your name, address, and email address....

Create, test, and validate an HTML document for yourself, including your name, address, and email address. If you are a student, you must include your major and your grade level. This document must use several headings and <em>, <strong>, <hr />, <p>, and <br /> tags.

You are an apple farmer who sell apples by the boxes. Each box contains 6 Apples....

You are an apple farmer who sell apples by the boxes. Each box contains 6 Apples. You have 30 boxes of apples. Price of each box is $20. Using cout object as studied in the class and by use of algorithm(s), display following in the format as written below: 1. Total number of apples in all boxes are ______________ 2. Total apples will be sold for $_____________________ Upload your assignment here. using python and no copy from other assingment and...

Utilizing PHP and HTML code Create a form that has text inputs for two numbers and...

Utilizing PHP and HTML code Create a form that has text inputs for two numbers and a submit button. Submit the values to a program that calculates and displays the GCD of the two numbers. The greatest common divisor of two integers a and b is the largest integer that is a factor of both a and b. The GCD of any number and 1 is 1, and the GCD of any number and 0 is that number. For example:...

Develop an Android app to document the lifecycle of an “activity” For each callback events (onCreate(),...

Develop an Android app to document the lifecycle of an “activity” For each callback events (onCreate(), onStart()... ), record what callback event was triggered in the log(use Log.d); the message that is written to log should be defined in “strings.xml” and getResources.getString() should be used to retrieve the message. Implement onSaveInstanceState and onRestoreInstanceState – to track the number of times onSaveInstanceState is being called, in onRestoreInstanceState, print the value to the log file. Tag for “Log” statement should also be...