JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<form id="mileage_form">
      <h1>Cost Per Mile: $4.00 USD</h1>
      <p>Miles Driven:</p>
      <p><input type="text" name="miles_driven" id="miles_driven"></p>
      <p><input type="button" value="Calculate Cost of the Trip" id="calculate"> <input type="button" value="Clear form" onclick="formReset()"></p>
      <h3>The Cost of the Trip is: </h3>
      <h2 id="cost_of_trip" style="color: #060;"></h2>
    </form>

JavaScript

/*
	    This is the main function that runs when you click on the
		button with the ID of #calculate... it runs everything inside
		the "calculateMpg" function.
	  */

      function calculateMpg() {
          // The Variable for the miles driven, it simply selects the element with #miles_driven and it gets it's value
          var milesDriven = $('#miles_driven').val();

          // This valudation is so you don't enter Zero or leave the field blank
          if (milesDriven <= 0 || milesDriven === undefined) {
              alert("Please enter a value higher than zero!");
              formReset();
          } else {
              if (milesDriven >= 26) {
                  var costOfTrip = (milesDriven * 4) + 100;
              } else {
                  var costOfTrip = 200;
              }
          }

          // This is in case you try the run the script without adding any number to it.
          if (costOfTrip === undefined) {
              costOfTrip = 0;
          }

          // This is in case you have cents and other fractional numbers, it will add the $ and float the numbers to round numbers.
          var pcot = parseFloat(costOfTrip).toFixed(2);
          $('#cost_of_trip').html('$' + pcot);

      } // calculateMpg

      /*
        This function runs on line 21 and it's used to reset the form
        when someone enters  less 0 or less as a value for the field.
        it simply sets the values of the forms to 0 and it resets the form.
      */

      function formReset() {

          $('#cost_of_trip').html('$' + 0);
          $('#mileage_form').reset();

      } // formReset

      /*
        The initialize fundtion below here called "init" runs when
        you click on the ID with #calculate and what it does is that
        it outputs the function called: calculateMpg() that starts
        on line 13
      */

      function init() {

          $('#calculate').click(function () {
              calculateMpg();
         ...