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 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). You also must use an external style sheet to display various input boxes in appropriate background color.

After creating, testing, and validating the HTML5 and CSS documents, publish them together with your Javascript code file on your document root on the server.

Expert Solution

HTML code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css href="main.css">
</head>
<body>
<script type="text/javascript">
function calculate()
{

var apple_count = document.program.apple.value;
var orange_count = document.program.orange.value;
var banana_count = document.program.banana.value;

sales_tax=7.75/100;

total_cost = ((apple_count*59+orange_count*49+banana_count*39)+sales_tax).toFixed(2);

alert("Your total cost is $"+total_cost);
}
</script>

<div class="container">
<form name="program">

  <label for="number">Enter the number of apple (59 cents each):</label>&nbsp;&nbsp;

  <input type="number" id="apple" name="apple" min="0" max="99"><br><br>
  
  <label for="number">Enter the number of orange (49 cents each):</label>&nbsp;&nbsp;

  <input type="number" id="orange" name="orange" min="0" max="99"><br><br>
  
  <label for="number">Enter the number of banana (39 cents each):</label>&nbsp;&nbsp;

  <input type="number" id="banana" name="banana" min="0" max="99"><br><br>
  
  <input type="button" value="Submit" onclick="calculate();"><br><br>
  
</form>
</div>

<p id="demo"></p>

</body>
</html>

main.css

input[id=apple] {
  box-shadow: 2px 2px 7px red;
}
input[id=orange] {
  box-shadow: 2px 2px 7px orange;
}
input[id=banana] {
  box-shadow: 2px 2px 7px yellow;
}
input[type=button] {
  box-shadow: 3px 3px 20px white;
  padding: 20px;
  background-color: #0B005B;
  color:white;
}

.container {
  border-radius: 5px;
  background-color: #020237;
  padding: 20px;
  color: white;
  box-shadow: 2px 2px 7px black;
}

output:

venereology answered 2 years ago

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

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

2. The HTML document on the following page consists of JavaScript code executed when the document...

2. The HTML document on the following page consists of JavaScript code executed when the document is loaded. It prompts the user for his/her name (first and last names) then outputs the greeting “Hello Mr. _____!” or “Hello Ms. _____!” (where _____ is the user’s last name) depending on whether the first name is recognized as a male name. (In the code, only three male names are checked; a realistic program would check many more names.) We allow for the...

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.

You have been instructed to use C++ to develop, test, document, and submit a simple program...

You have been instructed to use C++ to develop, test, document, and submit a simple program with the following specifications. The program maintains a short data base of DVDs for rent with their name, daily rental charge, genre, and a a short description . The program will welcomes the user, user will enter the name of the movie from a displayed list of all movies that are available, the user will enter the number next to the movie's name, number...

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...

Create an HTML form with the following: 2 text input fields 1 text area 2 radio...

Create an HTML form with the following: 2 text input fields 1 text area 2 radio buttons or 3 checkboxes 1 button Include labels for fields

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.

Question