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

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

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

1. An HTML document that’s generated by a web application is a ________________________ web page. 2....

1. An HTML document that’s generated by a web application is a ________________________ web page. 2. An easy way to log the progress of an application in Chrome’s Console panel is to insert __________________ methods at critical points in the code. 3. The childNodes property of a DOM object returns a/an ______________________ of the child nodes for that object. 4. The ___________________ method of an array can be used to concatenate the elements of the array into a single string....

Create a HTML webpage for the film Avatar (2009). You can use the content (text, images)...

Create a HTML webpage for the film Avatar (2009). You can use the content (text, images) from this Wikipedia page: https://en.wikipedia.org/wiki/Avatar_(2009_film) Besides the basic HTML document elements, the html document should have the following components or meet the requirements: Use <header><section><nav><article><div><footer> to arrange the layout of the page h1, h2 At least 1 table At least1 image At least 2 links, one link opens the target page with a new window Several paragraphs with formatted text (use at least 3...

Use HTML5 to create a document that contains the following text: Internet and World Wide Web...

Use HTML5 to create a document that contains the following text: Internet and World Wide Web How to Program: Fifth Edition Welcome to the world of Internet programming. We have provided coverage for many Internet-related topics. Use h1 for the title (the first line of text), p for text (the second and third lines of text). Insert a horizontal rule between the h1 element and the p element. Open your new document in a web browser to view the marked-up...

Question