Here’s an example of a basic trip calculator in HTML that calculates the total cost of a trip based on the number of people, days, and cost per day:
<!DOCTYPE html> <html> <head> <title>Trip Calculator</title> </head> <body> <h1>Trip Calculator</h1> <form> Number of people: <input type="number" id="people"><br><br> Number of days: <input type="number" id="days"><br><br> Cost per day: <input type="number" id="cost"><br><br> <button onclick="calculateTotal()">Calculate Total</button> </form> <p>Total Cost: <span id="total"></span></p> <script> function calculateTotal() { var people = document.getElementById("people").value; var days = document.getElementById("days").value; var cost = document.getElementById("cost").value; var total = people * days * cost; document.getElementById("total").innerHTML = total; } </script> </body> </html>
This will create a simple webpage with a form that prompts the user to enter the number of people, number of days, and cost per day for their trip. The form includes a button labeled “Calculate Total” that, when clicked, runs a JavaScript function to calculate the total cost of the trip (number of people x number of days x cost per day) and displays the result on the page.
You can add some error message in case user didn’t put any value on number of people, days or cost per day. This is just a basic example, but you can certainly enhance it with additional features such as validation or some design improvement to make it more user-friendly.