Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <title>Fuel Cost Calculator</title>
  <link href="https://fonts.googleapis.com/css?family=Contrail+One|Fira+Sans+Condensed|Quicksand|Sonsie+One|Electrolize" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

</head>

<body>
  <div class="header">
    <h1>Fuel Cost Calculator</h1>
    <div class="subheader">Easy as 1-2-3 FCC</div>
  </div>

  <div class="container-fluid screen-1 ">
    <div class="row">
      How many miles do you drive in a day?
    </div>

    <div class="row">
      <div class="col-xs-6 text-right">
        <i class="fas fa-building"></i> City: </div>
      <div class="col-xs-6 text-left">
        <input type="number" step="1" min="1" max="999" Value="10" maxlength="3" oninput="restrictInputTo3Digits(this)" class="form-control" id="city-miles" /> miles
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6 text-right">
        <i class="fas fa-road"></i> Highway:
      </div>
      <div class="col-xs-6 text-left">
        <input type="number" step="1" min="1" max="999" Value="30" maxlength="3" oninput="restrictInputTo3Digits(this)" class="form-control" id="highway-miles" /> miles
      </div>
    </div>

  </div>

  <div class="screen-2">
    <div class=row>What type of fuel do you use?</div>
    <div class="row " data-toggle="buttons">
      <label class="btn radio-labels active">
            <input type="radio" class='radio-buttons ' value='regular' name="fuelType" id="radio-Regular" checked ><span class="fuel-number">87</span><br>Regular</label>
      <label class="btn radio-labels">
            <input type="radio" class='radio-buttons' value='midgrade' name="fuelType" id="radio-Mid-grade"><span class="fuel-number">89</span><br>Mid-grade</label>
      <label class="btn radio-labels">
            <input type="radio" class='radio-buttons' value='premium' name="fuelType" id="radio-Premium"><span class="fuel-number">93</span><br>Premium</label>
      <label class="btn radio-labels"><input type="radio" class='radio-buttons' value='diesel' name="fuelType" id="radio-Diesel"><span class="fuel-number">Diesel</span><br>Diesel</label>
    </div>
  </div>

  <div class="screen-3">
    <div class="row section-title">
      <i class="fas fa-car"></i> What car do you have?
    </div>
    
    <div class="row car-selection-menu">
      <div class="form-group">
        <label for="car-year" class="col-xs-4 col-md-5 ">Year:</label>
        <select class="form-control dropdown-2 col-xs-8 col-md-7" id="car-year">
          </select>
      </div>
    </div>
    
    <div class="row car-selection-menu">
      <div class="form-group">
        <label for="car-make" class="col-xs-4 col-md-5">Make:</label>
        <select class="form-control dropdown-2 col-xs-8 col-md-7" id="car-make">
          </select>
      </div>
    </div>

    <div class="row car-selection-menu">
      <div class="form-group">
        <label for="car-model" class="col-xs-4 col-md-5">Model:</label>
        <select class="form-control dropdown-2 col-xs-8 col-md-7" id="car-model">
          </select>
      </div>
    </div>

    <div class="row car-selection-menu">
      <div class="form-group">
        <label for="car-option" class="col-xs-4 col-md-5">Option:</label>
        <select class="form-control dropdown-2 col-xs-8 col-md-7" id="car-option">
          </select>
      </div>
    </div>

    <div class="row">
      <div class='col-xs-6 text-right'>
        
      </div>
      <div class='col-xs-6 text-left'>
      
      </div>
    </div>
    
  </div>
  
  <div class="screen-results">
    <div class="row">
      <div class="col-xs-5 text-right">
        Your car:
        </div>
      <div class="col-xs-7 text-left" id="car-info">
        </div>
    </div>
    <div class="row">
      <div class="col-xs-5 text-right">
        Your weekly cost:
        </div>
      <div class="col-xs-7 text-left" id="weekly-cost">
        </div>
    </div>
    <div class="row">
      <div class="col-xs-5 text-right">
        Your monthly cost:
        </div>
      <div class="col-xs-7 text-left" id="monthly-cost">
        </div>
    </div>
    <div class="row">
      <div class="col-xs-5 text-right">
        Your annual cost:
        </div>
      <div class="col-xs-7 text-left" id="annual-cost">
        </div>
    </div>
  </div>
  <div class="bottom-nav">
    <div class="row">
      <div class="col-xs-6 text-right">
        <button class="btn" id="btn-back" > <i class="far fa-caret-square-left"></i> 
Back </button>
      </div>
      <div class="col-xs-6 text-left">
        <button class="btn" id="btn-next" > 
Next
          <i class="far fa-caret-square-right"></i> </button>
        <button class="btn" id="btn-calculate" disabled> <i class="fas fa-calculator"></i> 
Calculate </button><i class="fas fa-pulse" id="calculate-spinner"></i>
      </div>
      
    </div>
    
  </div>
  <footer>
    Designed and implemented by Sebastian Tysler
  </footer>


</body>
              
            
!

CSS

              
                @main-color-1: #120931;
@main-color-2: #EDD6AB;
@accent-color-1: #EA5034;
@accent-color-2: #1BB48D;
@accent-color-3: #DCC039;

body{
  color: @main-color-1;
  background-color: @main-color-2;
  padding: 0;
  margin: 0;
  font-family: 'Fira Sans Condensed', sans-serif;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.header{
  background: @accent-color-1;
  padding: 2rem;
  text-align: center;
  font-family: 'Sonsie One', cursive;
  font-size: 2.5rem;  
  border-bottom: 0.2rem solid lighten(@accent-color-1,20%);
}
.header > h1{
  font-size: 3rem; 
  padding: 0;
  margin: 0;
  color: @main-color-2;
  text-shadow: 2px 2px 5px @accent-color-2;
  
}

.subheader{
  font-family: 'Sonsie One', cursive;
  font-size: 1.5rem;
  color: @main-color-2;
}

.screen-1{
  text-align: center;
  padding: 5vmin 5vmin;;
  color: @main-color-1;
  font-size: 2.2rem;
  font-family: 'Quicksand', sans-serif;
}

.screen-2{
  text-align: center;
  padding: 2rem 5vmin;
  color:  @main-color-1;
  font-size: 2.2rem;
  font-family: 'Quicksand', sans-serif;
}

.screen-3{
  text-align: center;
  padding: 2rem 5vw 2rem 5vw;
  color:  @main-color-1;
  font-size: 2.2rem;
  font-family: 'Quicksand', sans-serif;
}

.screen-results{
  padding: 2rem 5vw 2rem 5vw;
  color:  @main-color-1;
  font-size: 2.2rem;
  font-family: 'Quicksand', sans-serif;
}

.form-control{
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  border-bottom: 2px solid @accent-color-1;
  margin: 0;
  padding: 0 0.7rem;
  height: 3rem;
  width: 5rem;
  font-size: 2rem;
  display: inline;
  text-align: left;
  
}

.form-control:focus{
  box-shadow: none;
  border-bottom: 2px solid @accent-color-3;
  
}

.row{
  padding: 1rem 0;
  margin: 0;
}


.btn{
  background: @accent-color-1;
  color: @main-color-2;
  border: 1px solid  @main-color-1;
  outline: none;
}


.dropdown-2{
  width: auto;
  max-width: 50vw;
  padding: 0 0.3rem;
}

.dropdown-2:disabled{
  background: none;
  color: rgba(0,0,0,0.2);
  border-bottom: none;
}

.radio-buttons{
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

.radio-labels{
  color: @main-color-1;
  margin: 0 ;
  padding: 0.8rem;
  margin: 0.5rem 0rem;
  min-width: 12rem;
  height: 14rem;
  font-size: 1.7rem;
  font-weight: 600;
  border-radius: ~"50% / 20%";
  background: @accent-color-3;
  border: 0.4rem solid rgba(0, 0, 0, .9);
  box-shadow: 0rem 0.8rem rgba(0, 0, 0, .6) ;
  transition: all ease-out 0.4s;
  
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
  outline: none;
}


.radio-labels.active, radio-labels:active, .radio-labels:focus-within, .radio-labels:focus   {
  background:  @accent-color-1;
  color: white;
  box-shadow: 0rem 0.3rem  rgba(0,0,0,0.9) ;
  outline: none;
  transform: translateY(4px);
}

.radio-labels:hover{
  color: @main-color-1;
}

.fuel-number{
  font-size: 3rem;
  font-weight: 800;
  text-shadow: 1px 1px rgba(0,0,0,0.5);
}

.fuel-price-inner-btn{
  background-color: @accent-color-2;
  color: @main-color-1;
  padding: 0.1em;
  margin: 0.3rem;
  border: 1px solid @main-color-1;
  box-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.7) inset;
  border-radius: 0.5rem;
}

.screen-3 label{
  font-weight: 400;
  text-align: right;
}

.car-selection-menu {
  padding: 0;
  margin: 0;
}

.section-title{
  padding: 2rem;
}

.bottom-nav{
  padding: 2rem;
}



footer{
  background: @main-color-1;
  font-size: 0.8rem;
  color: @main-color-2;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

#btn-calculate{
  margin-right: 2rem;
}

              
            
!

JS

              
                let carYear = 0;
let careMake = "";
let carModel = "";
let carOption = "";
let carOptions = [];
let fuelPrice = 0;
let fuelPrices = [];
let fuelTypes = ["regular", "midgrade", "premium", "diesel"];
let fuelType = fuelTypes[0];
let cityMPG = 0;
let highwayMPG = 0;
let carID = 0;
let carIDs = [];
let cityMiles = 0;
let highwayMiles = 0;
let currentScreen = 1;

function restrictInputTo3Digits(obj) {
  if (obj.value.length > obj.maxLength)
    obj.value = obj.value.slice(0, obj.maxLength);
}

$(document).ready(function() {
  fetchAndUpdateCarYears();
  fetchAndUpdateFuelPrices();
  disableCarMakeList();
  disableCarModelList();
  disableCarOptionList();

  $(".screen-2").hide();
  $(".screen-3").hide();
  $(".screen-results").hide();
  $("#btn-calculate").hide();
  $("#btn-back").hide();

  $("#car-year").change(function() {
    disableCalculateButton();
    disableCarModelList();
    disableCarOptionList();
    fetchAndUpdateCarMakers();
  });

  $("#car-make").change(function() {
    disableCalculateButton();
    disableCarOptionList();
    fetchAndUpdateCarModels();
  });

  $("#car-model").change(function() {
    carOption = "";
    disableCalculateButton();
    disableCarOptionList();
    fetchAndUpdateCarOptions();
  });

  $("#car-option").change(function() {
    carOption = $("#car-option option:selected").text();
    if (carOption != "Select") enableCalculateButton();
    let optionPosition = $(this).prop("selectedIndex");
    carID = carIDs[optionPosition - 1];
    console.log("Selected car ID is " + carID);
  });

  $("#btn-calculate").click(function() {
    currentScreen = 4;
    $("#calculate-spinner").addClass("fa-spinner");
    setTimeout(function() {
      $("#calculate-spinner").removeClass("fa-spinner");
      calculate();
      $(".screen-3").slideUp(1000);
      $(".screen-results").slideDown(1000);
      $("#btn-calculate").hide();
    }, 1000);
  });

  $(".radio-buttons").change(function() {
    if ($(this).is(":checked")) {
      // check if the radio is checked
      fuelType = $(this).val(); // retrieve the value
      console.log(fuelType);
    }
  });

  $("#btn-next").click(function() {
    if (currentScreen < 4) currentScreen++;
    console.log("clicked on next button. Current screen is " + currentScreen);
    if (currentScreen === 2) {
      $(".screen-1").slideUp(1000);
      $(".screen-2").slideDown(1000);      
      $("#btn-back").fadeIn(1000);
    } 
    else if (currentScreen === 3) {
      $(".screen-2").slideUp(1000);
      $(".screen-3").slideDown(1000);
      $("#btn-calculate").fadeIn(1000);
      $("#btn-next").hide();
    }
  });

  $("#btn-back").click(function() {
    if (currentScreen > 1) currentScreen--;
    console.log("clicked on back button. Current screen is " + currentScreen);
    if (currentScreen === 1) {
      $(".screen-2").slideUp(1000);
      $(".screen-1").slideDown(1000);
      $("#btn-back").hide();
    } 
    else if (currentScreen === 2) {
      $(".screen-3").slideUp(1000);
      $(".screen-2").slideDown(1000);
      $("#btn-calculate").hide(1000);
      $("#btn-next").fadeIn(1000);
    } 
    else if (currentScreen === 3) {
      $('.screen-results').slideUp(1000);
      $(".screen-3").slideDown(1000);
      $("#btn-calculate").fadeIn(1000);
    }
  });
  
});

function calculate() {

  fuelType = $("input[name=fuelType]:checked").val();
  fuelPrice = fuelPrices[fuelTypes.indexOf(fuelType)];
  console.log("fuel type is " + fuelType);
  console.log("fuel types are " + fuelTypes);
  console.log("fuel price is " + fuelPrice);
  console.log("fuel prices are " + fuelPrices);

  cityMiles = $("#city-miles").val();
  console.log("miles driven in city: " + cityMiles);
  highwayMiles = $("#highway-miles").val();
  console.log("miles driven on highway: " + highwayMiles);

  //fetch mpg and show calculations
  $.ajax({
    url: "https://www.fueleconomy.gov/ws/rest/vehicle/" + carID,
    type: "GET",
    dataType: "XML"
  })
    .done(function(data) {
      console.log("successly fetched car properties");
      console.log(data);
      cityMPG = data.getElementsByTagName("city08")[0].innerHTML;
      highwayMPG = data.getElementsByTagName("highway08")[0].innerHTML;
      calculateCostAndUpdateDisplay();
    })
    .fail(function(data) {
      console.log("failure on fetching car mpg");
    }); //end of ajax to fetch car mpg
}

function calculateCostAndUpdateDisplay() {
  let dailyCost =
    fuelPrice * (cityMiles / cityMPG) + fuelPrice * (highwayMiles / highwayMPG);
  $("#car-info").text(
    carMake + " " + carModel + " " + carYear + "  " + carOption
  );
  $("#weekly-cost").text(
    "$" +
      Number(
        parseFloat(Math.round(dailyCost * 7 * 100) / 100).toFixed(2)
      ).toLocaleString()
  );
  $("#monthly-cost").text(
    "$" +
      Number(
        parseFloat(Math.round(dailyCost * 365 / 12 * 100) / 100).toFixed(2)
      ).toLocaleString()
  );
  $("#annual-cost").text(
    "$" +
      Number(
        parseFloat(Math.round(dailyCost * 365 * 100) / 100).toFixed(2)
      ).toLocaleString()
  );
}

function fetchAndUpdateCarYears() {
  $.ajax({
    url: "https://www.fueleconomy.gov/ws/rest/vehicle/menu/year",
    type: "GET",
    dataType: "XML"
  })
    .done(function(data) {
      console.log("successly fetched car years");
      var makers = data.getElementsByTagName("value");
      $("#car-year").text("");
      $("#car-year").append("<option>Select</option>");
      for (var i = 0; i < makers.length; i++) {
        $("#car-year").append(
          "<option>" + makers[i].childNodes[0].nodeValue + "</option>"
        );
      }
    })
    .fail(function(data) {
      console.log("failure on fetching car years");
    }); //end of ajax to fetch car years
}

function fetchAndUpdateCarMakers() {
  carYear = $("#car-year option:selected").text();
  if (carYear == "Select") return;

  $.ajax({
    url:
      "https://www.fueleconomy.gov/ws/rest/vehicle/menu/make?year=" + carYear,
    type: "GET",
    dataType: "XML"
  })
    .done(function(data) {
      console.log("successly fetched car makers");
      var makers = data.getElementsByTagName("value");
      $("#car-make").text("");
      $("#car-make").append("<option>Select</option>");
      for (var i = 0; i < makers.length; i++) {
        $("#car-make").append(
          "<option>" + makers[i].childNodes[0].nodeValue + "</option>"
        );
      }
      enableCarMakeList();
    })
    .fail(function(data) {
      console.log("failure on fetching car makers");
    }); //end of ajax to fetch car makers
}

function fetchAndUpdateCarModels() {
  carMake = $("#car-make option:selected").text();
  if (carMake == "Select") return;

  $.ajax({
    url:
      "https://www.fueleconomy.gov/ws/rest/vehicle/menu/model?year=" +
      carYear +
      "&make=" +
      carMake,
    type: "GET",
    dataType: "XML"
  })
    .done(function(data) {
      console.log("succesfuly fethed car models!");
      console.log(data);
      $("#car-model").text("");
      $("#car-model").append("<option>Select</option>");
      var models = data.getElementsByTagName("value");
      for (var i = 0; i < models.length; i++) {
        $("#car-model").append(
          "<option>" + models[i].childNodes[0].nodeValue + "</option>"
        );
      }
      enableCarModelList();
    })
    .fail(function(data) {
      console.log("failure we suck!");
    }); //end of ajax to fetch car models
}

function fetchAndUpdateCarOptions() {
  carModel = $("#car-model option:selected").text();
  if (carModel == "Select") return;

  $.ajax({
    url:
      "https://www.fueleconomy.gov/ws/rest/vehicle/menu/options?year=" +
      carYear +
      "&make=" +
      carMake +
      "&model=" +
      carModel,
    type: "GET",
    dataType: "XML"
  })
    .done(function(data) {
      console.log("successfuly fetched car options");
      console.log(data);
      let options = data.getElementsByTagName("text");
      let ids = data.getElementsByTagName("value");
      $("#car-option").text("");
      if (options.length === 0) {
        $("#car-option").append("<option>N/A</option>");
        enableCalculateButton();
      } else {
        $("#car-option").append("<option>Select</option>");
        for (var i = 0; i < options.length; i++) {
          $("#car-option").append(
            "<option>" + options[i].childNodes[0].nodeValue + "</option>"
          );
          carOptions[i] = options[i].childNodes[0].nodeValue;
          carIDs[i] = ids[i].childNodes[0].nodeValue;
          console.log("car ID is " + carIDs[i] + " which is " + carOptions[i]);
        }
        enableCarOptionList();
      }
    })
    .fail(function(data) {
      console.log("failure we suck!");
    }); //end of ajax to fetch car options
}

function fetchAndUpdateFuelPrices() {
  $.ajax({
    url: "https://www.fueleconomy.gov/ws/rest/fuelprices",
    type: "GET",
    dataType: "XML"
  })
    .done(function(data) {
      console.log("successly fetched fuel prices");
      for (let i = 0; i < fuelTypes.length; i++) {
        fuelPrices[i] = data.getElementsByTagName(fuelTypes[i])[0].innerHTML;
        fuelPrices[i] = parseFloat(
          Math.round(fuelPrices[i] * 100) / 100
        ).toFixed(2);
      }
      let fuelPriceIndex = 0;
      let $radioButtons = [];
      $(".radio-labels").each(function() {
        $(this).append(
          '<div class="fuel-price-inner-btn"> $' +
            fuelPrices[fuelPriceIndex] +
            "</div>"
        );
        fuelPriceIndex++;
        $radioButtons.push(this);
      });
    })
    .fail(function(data) {
      console.log("failure on fetching fuel prices");
    }); //end of ajax to fetch car makers
}

function disableCalculateButton() {
  $("#btn-calculate").prop("disabled", true);
}

function enableCalculateButton() {
  $("#btn-calculate").prop("disabled", false);
}

function disableCarOptionList() {
  $("#car-option").text("<option>Select</option>");
  $("#car-option").prop("disabled", true);
  carOption = "";
}

function enableCarOptionList() {
  $("#car-option").prop("disabled", false);
}

function disableCarModelList() {
  $("#car-model").text("<option>Select</option>");
  $("#car-model").prop("disabled", true);
  carModel = "";
}

function enableCarModelList() {
  $("#car-model").prop("disabled", false);
}

function disableCarMakeList() {
  $("#car-make").text("<option>Select</option>");
  $("#car-make").prop("disabled", true);
  carMake = "";
}

function enableCarMakeList() {
  $("#car-make").prop("disabled", false);
}

              
            
!
999px

Console