How to Write a JavaScript Function That Computes a Taxi Fare
By Allen Bethea
Updated April 06, 2018
Taxis are a convenient but expensive way to travel. Once the cab starts to move, the meter starts running and the charges begin to pile up. If you know the rates the cab company charges and the approximate distance to your destination, you can create your own taxi fare estimator using JavaScript. If the taxi charge is based upon every fifth mile, multiply your trip mileage by five. Then multiply the result by the rate per fifth mile. Finally, add this amount to the initial drop-off charge that some companies charge regardless of the distance traveled.
Launch the plain-text editor Notepad by clicking the "Start" button, "All Programs," "Accessories," then "Notepad."
Enter the following code into the text editor:
<html> <head> <script type="text/javascript"> function calculatefare() { // variable declarations var subTotal=0.0; var pricePerFifthMile=0.50; var dropOffCharge=2.50; var overTwoPassengerCharge=2.00; var tripDistance=Number(document.getElementById("distance").value); var passengers=Number(document.getElementById("passengers").value); // if there are over 2 riders, each additional passenger pays $2 if (passengers>2) { subTotal=overTwoPassengerCharge(passengers-2); } // calculate the price based on miles in subTotal+=parseInt(tripDistance5)*pricePerFifthMile; subTotal+=dropOffCharge; // prints the price to the div. toFixed adds cents to integer calculations document.getElementById('price').innerHTML=" $"+subTotal.toFixed(2); } </script> </head> <body> <h1>Calculate Cab Fare</h1> <table><tr><td> Distance to travel (Miles): <br> Number of passengers : <br> <button id="first" type="button" onClick="javascript:calculatefare()">Calculate Fare:</button> </td> <td> <input id="distance" type="text" name="distance" value="1" /><br> <input id="passengers" type="text" name="passengers" value="1" /><br> <div id="price" > $00.00</div> </td></tr> </table> </body> </html>Click the "File" menu. Select the "Save" option. Save it under the file name "test.html."
Launch the Web browser by clicking the "Start" button, clicking on "All Programs" and "Internet Explorer." Click on the "File" menu item and select "Open File."
Locate the file "test.html" just created, select it with the mouse, then click on "Open."
Enter the distance to your destination in miles. Enter the number of people riding with you. In this example, if there are more than two people riding, each additional person must pay $2 to ride. Click on the button labeled "Calculate Fare." The estimate should appear to the right of the button.
Tips
You can increase the usefulness of your script by using free, online mapping services. When you provide the site with the start and destination addresses, an application calculates the distance. Sometimes, mapping services offer alternative routes that may differ in distance and travel time . The search engines Bing and Google, along with MapQuest and OpenStreetMap, provide programming interfaces to their services so that you can incorporated route distance calculations into your application.
Warnings
HTML form elements return data as strings rather than numbers. It is up to you to make sure that values taken from the input boxes are the correct data type to use in your calculations. The JavaScript function Number() converts string values into numbers, if it is possible. For example, if you enter a "9," Number() converts it to the number 9. If you enter "nine," Number() will return "NaN" or "Not a Number."
Items you will need
Web browser such as Internet Explorer
Plain-text editor like Notepad
Tips
- You can increase the usefulness of your script by using free, online mapping services. When you provide the site with the start and destination addresses, an application calculates the distance. Sometimes, mapping services offer alternative routes that may differ in distance and travel time . The search engines Bing and Google, along with MapQuest and OpenStreetMap, provide programming interfaces to their services so that you can incorporated route distance calculations into your application.
Warnings
- HTML form elements return data as strings rather than numbers. It is up to you to make sure that values taken from the input boxes are the correct data type to use in your calculations. The JavaScript function Number() converts string values into numbers, if it is possible. For example, if you enter a "9," Number() converts it to the number 9. If you enter "nine," Number() will return "NaN" or "Not a Number."
Writer Bio
Allen Bethea has written articles on programming, web design,operating systems and computer hardware since 2002. He holds a Bachelor of Science from UNC-Chapel Hill and AAS degrees in office technology, mechanical engineering/drafting and internet technology. Allen has extensive experience with desktop and system software for both Windows and Linux operating systems.