Question

In: Computer Science

Exercise 12.4: Use a browser's developer tools to view the DOM tree of the document in...

  1. Exercise 12.4: Use a browser's developer tools to view the DOM tree of the document in Fig. 12.4. Look at the document tree of your favorite website. Explore the information these tools give you in the right panel(s) about an element when you click it.

    Please use the Chrome browser:

    1. Start with the documentation for Chrome Developer Tools: https://developers.google.com/web/tools/chrome-devtools/ (Links to an external site.)Links to an external site.
    2. CodeSchool has a free course on Chrome DevTools at https://www.codeschool.com/courses/discover-devtools (Links to an external site.)Links to an external site.

Write a paragraph or two about what you learned about using the Chrome developer tools.

  1. Implement a web page that performs tip calculations. At a minimum, you will need an input element each for the original cost and for the tip rate, a button to trigger calculations, and an element for displaying the result. Use the DOM to access the elements in the web page. Do not use the prompt, alert, or document.writeln methods.

Solutions

Expert Solution

<!DOCTYPE html>
<html>
<head>
   <title>DOM</title>
</head>
<body>

<p>Enter num1: <input type="number" id="num1" /></p>
<p>Enter num2: <input type="number" id="num2" /></p>
<p><input id="cal" type="submit" value="Calculate" /></p>
<h2 id="op"></h2>

<script type="text/javascript">
   var number1 = document.getElementById('num1');
   var number2 = document.getElementById('num2');
   var buton = document.getElementById('cal');
   var output = document.getElementById('op');
   btn.addEventListener('click',function() {
       var ot= parseInt(num1.value)+parseInt(num2.value);
       console.log(ot);
       out.innerHTML = 'TIP is: '+ot;
   });
</script>

venereology answered 38 minutes ago
< Previous

Related Solutions

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...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image Swap Application</title> <link rel="stylesheet" type="text/css" href="image_swap.css"> <script type="text/javascript" src="image_swap.js"></script> </head> <body>     <main>         <h1>Fishing Images</h1>         <p>Click on an image to enlarge.</p>         <ul id="imageLinks">             <li><a href="images/release.jpg" title="Catch and Release">                 <img src="thumbnails/release.jpg" alt=""></a></li>             <li><a href="images/deer.jpg" title="Deer at Play">                 <img src="thumbnails/deer.jpg" alt=""></a></li>             <li><a href="images/hero.jpg" title="The Big One!">                 <img src="thumbnails/hero.jpg" alt=""></a></li>             <li><a href="images/bison.jpg" title="Grazing Bison">                 <img src="thumbnails/bison.jpg"...
Use the truth-tree decision procedure (relying on Proof Tools or pen/pencil and paper) to determine whether...
Use the truth-tree decision procedure (relying on Proof Tools or pen/pencil and paper) to determine whether P→Q,Q⊨P is deductively valid.
Use the following creative brief for this exercise. Product: Porsche Objective: To change consumers view that...
Use the following creative brief for this exercise. Product: Porsche Objective: To change consumers view that the Porsche can be driven every day Target Audience: 30- to 55-year-old consumers, slightly more male, college educated, with annual incomes of approximately $100,000. Psychographically, the targeted market is a group known as individualists. They tend not to buy mainstream products. In automobile selection, they place greater emphasis on design elements, distinctiveness, and utility. Social status is important. Background Information: Market research found that...
Exercise 1: Write an XML document describing the exercises in this document: the root element is...
Exercise 1: Write an XML document describing the exercises in this document: the root element is <exercises>. The root has an attribute number that has value 1. The root element has three child elements; <date> that contains as text the date of the exercise, and two <item> elements for the first two exercises (1--2). Write some text in the <item> elements. Exercise 2: Write an XML document describing a person: name, occupation, address and hobbies. Please do not use your...
Application Exercise: An ecologist hypothesizes that birds with longer wing spans use wider tree branches. The...
Application Exercise: An ecologist hypothesizes that birds with longer wing spans use wider tree branches. The ecologist captured male birds, measured their wing lengths and other characteristics in millimeters, and then marked and released them. During the ensuing winter, the ecologist repeatedly observed the marked birds as they foraged for food on tree branches. He noted the branch diameter on each occasion, and calculated the average branch diameter for each bird in centimeters. The measurement data are below. What can...
The Fed has several tools they can use to exercise their monetary policies. Describe two ways...
The Fed has several tools they can use to exercise their monetary policies. Describe two ways the Fed can do to exercise a tight money policy! Describe the kind of economic situation in which such a tight money policy would be appropriate for the economy! Explain why!
In-class exercise 2 Objective and Overview: The exercises in this document is on Lecture 3 Exercise...
In-class exercise 2 Objective and Overview: The exercises in this document is on Lecture 3 Exercise 1: (The Account class) Design a class named Account that contains: 1. A private int data field named id for the account (default 0). 2. A private double data field named balance for the account (default 0). 3. A private static double data field named annualInterestRate that stores the current interest rate (default 0). Assume that all accounts have the same interest rate. 4....
Identify the various tools that can be used to create a professional document in Microsoft Word....
Identify the various tools that can be used to create a professional document in Microsoft Word. Choose at least one of the tools which you would consider useful when creating your document.
CardioGood Fitness is a developer of high-quality cardiovascular exercise equipment. The company looks to increase the...
CardioGood Fitness is a developer of high-quality cardiovascular exercise equipment. The company looks to increase the sales of its treadmill products and has hired The AdRight Agency, a small advertising firm, to create and implement an advertising program. CardioGood Fitness sells three different lines of treadmills: a. The TM195 is an entry-level treadmill with fewer programs and features. It is suitable for individuals who thrive on minimal programming and the desire for simplicity. The TM195 sells for $1,500. b. The...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT