People are traveling more and more, and with rising gas prices, they are becoming more aware of the gas mileage their vehicles are achieving on long road trips. For this practical exercise, you will create a Web page that you can use to calculate your fuel economy for a given time period. After entering certain data, the user will be able to compute their mileage and have the trip summary displayed on a second page. The requirements for your web site are as follows: • Include a comment in your code file that includes the assignment name, your name and the date • The web site title is Final Exam PE • Include a header on the main page that is Your Name, Trip Stats Calculator • Include a text box to allow the user to enter a name for the trip • Include a text box to allow the user to enter the starting mileage on their odometer • Include a text box to allow the user to enter the ending mileage on their odometer • Include a text box to allow the user to enter the number of gallons of gas used on the trip • Include a button to get the trip summary information • Include a header on the summary page that is Your Name, Trip Summary • Create a custom object to store the following trip summary information: • Trip Name • Total Miles Traveled • Total Gallons of Gas Consumed • Mileage (Miles Per Gallon) achieved for the trip (displayed to 1

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

I'm creating a Webpage that calculates fuel economy. Javascript. See instructions.

People are traveling more and more, and with rising gas prices, they are becoming more aware of the gas mileage their vehicles are achieving on long road trips. For this practical exercise, you will create a Web page that you can use to calculate your fuel economy for a given time period. After entering certain data, the user will be able to compute their mileage and have the trip summary displayed on a second page. The requirements for your web site are as follows:

- Include a comment in your code file that includes the assignment name, your name and the date
- The web site title is Final Exam PE
- Include a header on the main page that is Your Name, Trip Stats Calculator
- Include a text box to allow the user to enter a name for the trip
- Include a text box to allow the user to enter the starting mileage on their odometer
- Include a text box to allow the user to enter the ending mileage on their odometer
- Include a text box to allow the user to enter the number of gallons of gas used on the trip
- Include a button to get the trip summary information
- Include a header on the summary page that is Your Name, Trip Summary
- Create a custom object to store the following trip summary information:
  - Trip Name
  - Total Miles Traveled
  - Total Gallons of Gas Consumed
  - Mileage (Miles Per Gallon) achieved for the trip (displayed to 1 decimal place)
Transcribed Image Text:People are traveling more and more, and with rising gas prices, they are becoming more aware of the gas mileage their vehicles are achieving on long road trips. For this practical exercise, you will create a Web page that you can use to calculate your fuel economy for a given time period. After entering certain data, the user will be able to compute their mileage and have the trip summary displayed on a second page. The requirements for your web site are as follows: - Include a comment in your code file that includes the assignment name, your name and the date - The web site title is Final Exam PE - Include a header on the main page that is Your Name, Trip Stats Calculator - Include a text box to allow the user to enter a name for the trip - Include a text box to allow the user to enter the starting mileage on their odometer - Include a text box to allow the user to enter the ending mileage on their odometer - Include a text box to allow the user to enter the number of gallons of gas used on the trip - Include a button to get the trip summary information - Include a header on the summary page that is Your Name, Trip Summary - Create a custom object to store the following trip summary information: - Trip Name - Total Miles Traveled - Total Gallons of Gas Consumed - Mileage (Miles Per Gallon) achieved for the trip (displayed to 1 decimal place)
The image provides instructions and examples of a user interface for a "Trip Stats Calculator." The interface calculates and displays travel data, including fuel economy, using user input values.

### Instructions:

1. **Mileage Calculation:** Calculate and display mileage (Miles Per Gallon - MPG) to one decimal place.
2. **JavaScript Implementation:**
   - Code should reside in the main HTML file.
   - Dynamically create a second "Trip Summary" page for display.
3. **Data Display:**
   - Use a `for` loop to display contents of a custom object on the Trip Summary page.
4. **User Interface Design:**
   - The interface should match the examples provided below.

### Sample Form:

#### Your Name, Trip Stats Calculator

- **Trip Name:** Jellystone
- **Starting Mileage:** 32000
- **Ending Mileage:** 33475
- **Gallons of Gas Used:** 77.2

(Button) - Get Trip Summary

### Output Page:

When "Get Trip Summary" is clicked, the new page should display:

#### Your Name, Trip Summary

- **Trip Name:** Jellystone
- **Total Miles Traveled:** 1475
- **Gallons of Gas Consumed:** 77.2
- **Fuel Economy (MPG) for Trip:** 19.1

This setup allows users to input trip details, calculate total miles traveled, the amount of gas used, and the fuel economy for the trip in MPG. The result is then displayed in a structured format on a new page.
Transcribed Image Text:The image provides instructions and examples of a user interface for a "Trip Stats Calculator." The interface calculates and displays travel data, including fuel economy, using user input values. ### Instructions: 1. **Mileage Calculation:** Calculate and display mileage (Miles Per Gallon - MPG) to one decimal place. 2. **JavaScript Implementation:** - Code should reside in the main HTML file. - Dynamically create a second "Trip Summary" page for display. 3. **Data Display:** - Use a `for` loop to display contents of a custom object on the Trip Summary page. 4. **User Interface Design:** - The interface should match the examples provided below. ### Sample Form: #### Your Name, Trip Stats Calculator - **Trip Name:** Jellystone - **Starting Mileage:** 32000 - **Ending Mileage:** 33475 - **Gallons of Gas Used:** 77.2 (Button) - Get Trip Summary ### Output Page: When "Get Trip Summary" is clicked, the new page should display: #### Your Name, Trip Summary - **Trip Name:** Jellystone - **Total Miles Traveled:** 1475 - **Gallons of Gas Consumed:** 77.2 - **Fuel Economy (MPG) for Trip:** 19.1 This setup allows users to input trip details, calculate total miles traveled, the amount of gas used, and the fuel economy for the trip in MPG. The result is then displayed in a structured format on a new page.
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

Blurred answer
Knowledge Booster
Business Intelligence Analytics tools and techniques
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education