javascript

You are currently browsing articles tagged javascript.

I was tutoring some high schoolers today (not a regular gig, was an accident) on javascript and ended up spending a quick 20 minute lunch break on doing their assignment. Here is a very simple example of a Mileage Calculator using Javascript and the Document Object Model (DOM). See it in action here.

<!DOCTYPE html>
<html>   
    <head>
        <style type="text/css">
            h2 {
                color:green;
            }
        </style>
        <meta charset=utf-8 />
        <title>Simple Javascript Mileage Calculator</title>
        <script>
            function calculateMpg() {
                // variables
                var milesDriven = document.getElementById("miles_driven").value;
                var gallonsUsed = document.getElementById("gallons_used").value;
                var pricePerGallon = document.getElementById("price_per_gallon").value;
                // input validation
                if (milesDriven <= 0 || gallonsUsed <= 0 || pricePerGallon <= 0) {

                    alert("Please enter a value higher than 0!");
                    formReset();
                } else {

                    var mpgCost = milesDriven / gallonsUsed;

                    var costOfTrip = pricePerGallon * gallonsUsed;
                }
                // if "undefined" set to 0
                if (mpgCost === undefined || costOfTrip === undefined) {
                    mpgCost = 0;
                    costOfTrip = 0;
                }
                // parse and format the output
                var pmpg = parseFloat(mpgCost).toFixed(2);
                document.getElementById("your_mpg").innerText = pmpg;

                var pcot = parseFloat(costOfTrip).toFixed(2);
                var output = "$" + pcot;
                document.getElementById("cost_of_trip").innerText = output;


            }
            // function to reset the form and fields 
            function formReset() {
                document.getElementById("your_mpg").innerText = 0;
                document.getElementById("cost_of_trip").innerText = 0;
                document.getElementById("mileage_form").reset();
            }

            // initialize
            function init() {
                document.getElementById("calculate").onclick = calculateMpg;
            }

            window.onload = init;
        </script>
    </head>
    
    <body>
         <h1 id="header">Calculate your MPG</h1>

         <h4 id="subheader">Enter the information below to see if you are getting good mileage!</h4>

        <form id="mileage_form">
            <label for="miles_driven">Miles Driven:</label>
            <input type="text" name="miles_driven" id="miles_driven">
            <br />
            <br />
            <label for="gallons_used">Gallons of Gas Used:</label>
            <input type="text" name="gallons_used" id="gallons_used">
            <br />
            <br />
            <label for="price_per_gallon">Price per gallon:</label>
            <input type="text" name="price_per_gallon" id="price_per_gallon">
            <br />
            <br />
            <input type="button" value="Calculate the MPG and Cost of the Trip" id="calculate"></input>
            <br />
            <br />
            <input type="button" value="Clear form" onclick="formReset()"></input>
            <br />
            <br />
             <h3>Your MPG:</h3> 
             <h2 id="your_mpg"></h2>

             <h3>The Cost of the Trip is: </h3>

             <h2 id="cost_of_trip"></h2>

        </form>
        <script>
            
        </script>
    </body>
</html>