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.

Solutions

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

Next > < Previous

Related Solutions

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

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

2. Develop and document a professional development plan and explain how this plan will assist with...

2. Develop and document a professional development plan and explain how this plan will assist with work competence and improvement to leadership skills as per BSBMGT605 Provide leadership across the organisation

Use the Test Scores Data Set.Preview the document The data consists of standardized test scores over...

Use the Test Scores Data Set.Preview the document The data consists of standardized test scores over several years. Use the techniques you have learned to summarize, present, and describe the data. Create a confidence interval for the mean score for each year. Use a 95% level of confidence. Clearly explain what the confidence interval means. Does each confidence interval include the population mean for all years? Explain why or why not. The test scores dropped in 2009. Design and run...

Use the following data to develop a quadratic model to predict y from x. Develop a...

Use the following data to develop a quadratic model to predict y from x. Develop a simple regression model from the data and compare the results of the two models. Does the quadratic model seem to provide any better predictability? Why or why not? x y x y 15 229 15 247 9 74 8 82 6 29 5 21 21 456 10 94 17 320

14.1)use the following data to develop a quadratic model to predict y from x. develop a...

14.1)use the following data to develop a quadratic model to predict y from x. develop a simple regression model from the data and compare the results of the two models. Does the quadratic model seem to provide any better predictability? Why or why not ? x y x y 14 200 15 247 9 74 8 82 6 29 5 21 21 456 10 94 17 320 Answer:simple model: y^= -14.27+27.128x, F=229.67 with p=.000, se=27.27, R2=.97,...

Subjects