For this program you need to take the following data and convert it into an array literal of Javascript object literals, where each object literal has three properties: a destination, a number of miles, and a number of gallons as shown below. You need to assign the array of objects to a variable, like trips,
Your array of objects cannot contain the mpg value. The value for miles per gallon must be calculated by the function called when the button is clicked.
For full credit:
Use Bootstrap to style the table.
The trip data needs to begin as an array literal of object literals, where each trip is an object with 3 properties.
The button must have an id property, and using getElementById('id') you must assign the function that displays the table to the button using an anonymous function in your JavaScript code.
Rather than use document.write(), you must use createElement() and appendChild(), similar to the example program in the DOM lecture notes.
Before being inserted into a table cell, the mpg must be calculated by the funciton and not be part of the object.
round the calculation to 1 decimal place
Homework Answers
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and
minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled
JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h3>Trip
Data</h3>
<div>
<button
onclick="displayData()">Display Data</button>
</div>
<div class="table-responsive"
id="table-responsive" style="display: none;">
<table
class="table" id="tableContent">
<thead>
<tr>
<th>Destination</th>
<th>Miles</th>
<th>Gallons</th>
<th>MPG</th>
</tr>
</thead>
</table>
</div>
</body>
<script type="text/javascript">
var object={
destinations:[],
miles:[],
gallons:[],
// mpgs:[]
}
function
insert(destination,mile,gallon){
object.destinations.push(destination);
object.miles.push(mile);
object.gallons.push(gallon);
//
object.mpgs.push(Math.ceil(mile/gallon).toFixed(1));
}
insert("Chicago",329,10.6);
insert("St. Louis",284,10.5);
insert("Indianapolis",122,3.7);
insert("Nashville",191,6.4);
insert("Cincinnati",132,3.9,);
function displayData(){
var x =
document.getElementById('table-responsive');
if (x.style.display == 'none')
{
var tbody =
document.createElement('tbody');
for (var i=0; i<object.destinations.length;
i++){
var tr =
document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var text1 =
document.createTextNode(object.destinations[i]);
var text2 =
document.createTextNode(object.miles[i]);
var text3 =
document.createTextNode(object.gallons[i]);
var text4 =
document.createTextNode(Math.round((object.miles[i]/object.gallons[i])*10)/10);
td1.appendChild(text1);
td2.appendChild(text2);
td3.appendChild(text3);
td4.appendChild(text4);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tbody.appendChild(tr);
}
document.getElementById('tableContent').appendChild(tbody);
x.style.display = 'block';
}
}
</script>
</html>
Add Answer to:
For this program you need to take the following data and convert
it into an array...
In this exercise, you’ll upgrade a version of the MPG application so the error messages are...
In this exercise, you’ll upgrade a version of the MPG
application so the error messages are displayed in span elements to
the right of the text boxes.
Open the HTML and JavaScript files in this folder:
exercises_short\ch06\mpg\
Then, run the application and click the Calculate MPG button to
see that an error message is displayed in an alert dialog box for
each of the two input fields.
2. In the HTML file, add a span element after the input element...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...
( Object array + input) Write a Java program to meet the following requirements: 1. Define...
( Object array + input) Write a Java program to meet the following requirements: 1. Define a class called Student which contains: 1.1 data fields: a. An integer data field contains student id b. Two String data fields named firstname and lastname c. A String data field contains student’s email address 1.2 methods: a. A no-arg constructor that will create a default student object. b. A constructor that creates a student with the specified student id, firstname, lastname and email_address...
QUESTION 35 When you've created a data structure like this ____. var rect = {length: 9,...
QUESTION 35
When you've created a
data structure like this ____.
var rect = {length: 9,
width: 6};
you have created a
direct instance of an object
you have created an
object using a custom constructor function
you have created an
object literal
you have created an
array literal
QUESTION 38
"Once a web page has finished loading, then the ____ event
handler fires."
loaded
onload
complete
done
the language using in javascript
QUESTION 29 You have this form. Assume...
Data Structure Please Just the Ansewr No Need More Explanation Question 4 4 pts Mark all...
Data Structure
Please Just the Ansewr No Need More Explanation
Question 4 4 pts Mark all that apply by writing either T (for true) or F (for false) in the blank box before each statement. Regarding hash maps: A hash table relies on random access to an array to get rapid access to entries. A hash function creates an integer bucket ID from the key and uses it to index into the array Equal objects must always have the same...
Create an HTML5 page that contains a form to collect the following data. The text in...
Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date) order_date First Name (text box) first_name Last Name (text box) last_name Payment type (drop down list) payment_type – Visa, Master, Discover, Amex, and...
D Question 12 1.5 pts Check the true statements about NumPy arrays: O A single instantiated NumPy array can store multi...
D Question 12 1.5 pts Check the true statements about NumPy arrays: O A single instantiated NumPy array can store multiple types (e.g., ints and strings) in its individual element positions. A NumPy array object can be instantiated using multiple types (e.g., ints and strings) in the list passed to its constructor O Memory freeing will require a double-nested loop. The number of bits used to store a particular NumPy array object is fixed. O The numpy.append(my.array, new_list) operation mutates...
The Code need to be in C# programming language. could you please leave some explanation notes...
The Code need to be in C# programming language. could you please leave some explanation notes as much as you can? Thank you Create the following classes in the class library with following attributes: 1. Customer a. id number – customer’s id number b. name –the name of the customer c. address – address of the customer (use structs) d. telephone number – 10-digit phone number e. orders – collection (array) of orders Assume that there will be no more...
Write c++ program In this assignment, you need to complete following tasks on 2D array of...
Write c++ program
In this assignment, you need to complete following tasks on 2D array of randomly sales figures. Assume that you are the manager of coffee shop chain, and oversee 5 branches. ID of branches are 1 to 5. You already collected sales data for yesterday from each branch, in three categories: morning, afternoon, and evening. First, you need to create a 2D array (5x3) with random numbers between 300 and 1000 (including 300 and 1000), i.e., from $300...
Write c++ program In this assignment, you need to complete following tasks on 2D array of...
Write c++ program
In this assignment, you need to complete following tasks on 2D array of randomly sales figures. Assume that you are the manager of coffee shop chain, and oversee 5 branches. ID of branches are to 5. You already collected sales data for yesterday from each branch, in three categories: morning, afternoon, and evening. First, you need to create a 2D array (5x3) with random numbers between 300 and 1000 (including 300 and 1000), i.e., from $300 to...
In this exercise, you’ll upgrade a version of the MPG
application so the error messages are displayed in span elements to
the right of the text boxes.
Open the HTML and JavaScript files in this folder:
exercises_short\ch06\mpg\
Then, run the application and click the Calculate MPG button to
see that an error message is displayed in an alert dialog box for
each of the two input fields.
2. In the HTML file, add a span element after the input element...
QUESTION 35
When you've created a
data structure like this ____.
var rect = {length: 9,
width: 6};
you have created a
direct instance of an object
you have created an
object using a custom constructor function
you have created an
object literal
you have created an
array literal
QUESTION 38
"Once a web page has finished loading, then the ____ event
handler fires."
loaded
onload
complete
done
the language using in javascript
QUESTION 29 You have this form. Assume...
Data Structure
Please Just the Ansewr No Need More Explanation
Question 4 4 pts Mark all that apply by writing either T (for true) or F (for false) in the blank box before each statement. Regarding hash maps: A hash table relies on random access to an array to get rapid access to entries. A hash function creates an integer bucket ID from the key and uses it to index into the array Equal objects must always have the same...
D Question 12 1.5 pts Check the true statements about NumPy arrays: O A single instantiated NumPy array can store multiple types (e.g., ints and strings) in its individual element positions. A NumPy array object can be instantiated using multiple types (e.g., ints and strings) in the list passed to its constructor O Memory freeing will require a double-nested loop. The number of bits used to store a particular NumPy array object is fixed. O The numpy.append(my.array, new_list) operation mutates...
Write c++ program
In this assignment, you need to complete following tasks on 2D array of randomly sales figures. Assume that you are the manager of coffee shop chain, and oversee 5 branches. ID of branches are 1 to 5. You already collected sales data for yesterday from each branch, in three categories: morning, afternoon, and evening. First, you need to create a 2D array (5x3) with random numbers between 300 and 1000 (including 300 and 1000), i.e., from $300...
Write c++ program
In this assignment, you need to complete following tasks on 2D array of randomly sales figures. Assume that you are the manager of coffee shop chain, and oversee 5 branches. ID of branches are to 5. You already collected sales data for yesterday from each branch, in three categories: morning, afternoon, and evening. First, you need to create a 2D array (5x3) with random numbers between 300 and 1000 (including 300 and 1000), i.e., from $300 to...
Most questions answered within 3 hours.
-
During the current financial year, the owner of Omega
Enterprises withdrew supplies of $2,000 for personal...
asked 1 minute ago -
PLEASE SHOW MATH CALCULATION(formulas)it has to be done on excel
P12-4 Last year (2016), Richter Condos...
asked 9 minutes ago -
A couple of small ice cubes at 0 °C are added to glass of warm
water...
asked 1 minute ago -
Regarding language development, which of the following
statements is FALSE?
Babies are able to cry from...
asked 3 minutes ago -
A machine shop owner wishes to assign each of three machinists
(labeled 1, 2, and 3)...
asked 4 minutes ago -
Slow 'n Steady, Inc., has a stock price of $30, will pay a
dividend next year...
asked 5 minutes ago -
A 0.25μF capacitor is charged to 50 V . It is then connected in
series with...
asked 25 minutes ago -
Calculate the current, I, through the batteries for:
- a 2-bulb parallel circuit
- How does...
asked 27 minutes ago -
Choose the sentence that uses correct punctuation.
1a. The prefatory parts of a report include the...
asked 33 minutes ago -
For the element arsenic, which one of the following sets of
quantum numbers could not apply...
asked 42 minutes ago -
Compare and contrast the architectures of 3 types of ADCs:
Flash, SAR, and pipelined. Use the...
asked 43 minutes ago -
Given P(A) = 0.40, P(B) = 0.50, P(A ∩ B) = 0.15. Which of the
following...
asked 48 minutes ago