Journey Cost Calculator

Below is a simple program in HTML and JavaScript that calculates the cost of a journey based on the total distance in miles, the vehicle’s estimated MPG (miles per gallon), and the cost of fuel in pence per litre.

Total distance in miles:

Vehicle's MPG (miles per gallon):

Cost of fuel (pence per litre):

Total Cost:

Below you will find the code so you can use it on your own website. There are no limitations but a credit would be nice.

				
					<!DOCTYPE html>
<html>
<head>
    <title>Journey Cost Calculator</title>
</head>
<body>
    <h2>Journey Cost Calculator</h2>

    <label for="distance">Total distance in miles:</label>
    <input type="number" id="distance" placeholder="Enter distance in miles"><br><br>

    <label for="mpg">Vehicle's MPG (miles per gallon):</label>
    <input type="number" id="mpg" placeholder="Enter vehicle's MPG"><br><br>

    <label for="costPerLitre">Cost of fuel (pence per litre):</label>
    <input type="number" id="costPerLitre" placeholder="Enter cost in pence per litre"><br><br>

    <button onclick="calculateCost()">Calculate Cost</button>

    <h3 id="totalCost">Total Cost: </h3>

    <script>
        function calculateCost() {
            // Retrieve input values
            const distance = document.getElementById('distance').value;
            const mpg = document.getElementById('mpg').value;
            const costPerLitre = document.getElementById('costPerLitre').value;

            // Constants
            const litresPerGallon = 4.54609; // UK gallon to litres conversion factor

            // Calculate total cost
            const gallonsNeeded = distance / mpg;
            const litresNeeded = gallonsNeeded * litresPerGallon;
            const totalCost = (litresNeeded * costPerLitre) / 100; // Convert pence to pounds

            // Display the result
            document.getElementById('totalCost').innerHTML = `Total Cost: £${totalCost.toFixed(2)}`;
        }
    </script>
</body>
</html>

How it works

First, the HTML (HyperText Markup Language) part of the code sets up the structure of the webpage. HTML uses tags (like <label>, <input>, and <button>) to create elements on the page that users can interact with.

<label>: These tags are used to define labels for the input fields. They make it clear what information the user should enter in each field.
<input>: Input fields are where users can type information or make selections. In this program, there are three input fields for entering the distance, the vehicle’s MPG, and the fuel cost.
<button>: This creates a clickable button. When the user clicks this button, it will trigger the JavaScript function that calculates the total cost.

JavaScript Function:

JavaScript is used to make the webpage interactive. It can respond to user actions, like clicking a button. In this program, the JavaScript code does the work of calculating the journey cost based on the user’s input.

Function calculateCost: This is a block of code designed to perform the specific task of calculating the cost of the journey. It gets called (or executed) when the user clicks the “Calculate Cost” button.

Step-by-Step Inside the `calculateCost` Function:

Retrieving Input Values: The function starts by getting the values the user has entered in the input fields. This is done using document.getElementById('id').value;, which looks for an element by its ID and then gets the value from it. For example, document.getElementById('distance').value; gets the number of miles entered by the user.
Calculating Total Cost:
- Gallons Needed: The code calculates how many gallons of fuel are needed for the journey by dividing the distance by the MPG (miles per gallon). This gives us the total gallons of fuel the journey will require.
- Litres Needed: Since fuel cost is given in pence per litre, we need to convert gallons to litres. The UK conversion factor (4.54609 litres in a gallon) is used for this. Multiplying the gallons by this factor gives us the total litres of fuel needed.
- Total Cost: Finally, the code calculates the total cost of the fuel in pounds. It multiplies the litres needed by the cost per litre (in pence) and then divides by 100 to convert pence into pounds.
Displaying the Result: The last part of the function updates the webpage to show the total cost. document.getElementById('totalCost').innerHTML = ... changes the content of the element with the ID totalCost to display the calculated cost. The .toFixed(2) part ensures that the cost is displayed with two decimal places, making it look like a standard currency amount.

Summary:

So, in summary, the HTML part of the code sets up the webpage layout and creates the inputs and button. The JavaScript part listens for a button click, calculates the cost using the values the user inputs, and then displays the result on the page. This combination of HTML and JavaScript allows for interactive webpages that can respond to user input in real-time.