For this program you need to take the following data and convert it into an arra
ID: 3802502 • Letter: F
Question
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.
Trip Data Display Data Destination Chicago St. Louis Indianapolis Nashville Cincinnati Miles 329 284 191 132 Gallons 10.6 10.5 3.7 6.4 3.9 MPG 31.00 27.0 33.0 29.8 33.8Explanation / Answer
<!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>Display Data</button>
</div>
<div class="table-responsive" id="table-responsive">
<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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.