PriceCalc MASTER

by George Obregon

HTML

<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </head>

  <body>

    <!-- <span class='r3'><h3>CALCULADOR DE ENVIOS<h3></span> -->
    <div id="this"></div>
    <form name="PriceCalc" id="PriceCalc" action="">
      <div class="searchbox" width="auto" max-width="879px" border="0">
        <div class="t3">ARTICULO: <br>

          <select title="30x30x30" class="selectpicker" data-live-search="true" data-width="150px" single id="articuloId" name='articulo'>
			<optgroup label="CAJAS">
				<option value="30X30X30">30X30X30</option>
				<option value="24X24X24">24X24X24</option>
				<option value="20X20X20">20X20X20</option>
			</optgroup>
				<option value="REFRIGERADORA">REFRIGERADORA</option>
				<option value="ESTUFA">ESTUFA</option>
				<option value="LAVADORA">LAVADORA</option>
				<option value="SECADORA">SECADORA</option>
				<option value="VEHICULO">VEHICULO</option>
			<optgroup label="CONTENEDOR">
				<option value="CONTENEDOR 40’">40ft</option>
				<option value="CONTENEDOR 20’">20ft</option>
			</optgroup>
			<optgroup label="CAMAS">
				<option value="CAMA QUEEN (2 pcs)">QUEEN (2...

CSS

body {
  background-color: #f7f7f7;
  text-align: center;
}

@font-face {
  font-family: 'Gotham-Bold';
  src: url('https://mtomtours.com/fonts/Gotham-Bold.eot');
  src: url('https://mtomtours.com/fonts/fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), url('https://mtomtours.com/fonts/fonts/Gotham-Bold.woff') format('woff'), url('https://mtomtours.com/fonts/fonts/Gotham-Bold.ttf') format('truetype'), url('https://mtomtours.com/fonts/fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
.box {font-family: Gotham-Bold; color: #2181b7; font-size: large; font-weight: bold; outline-style: solid; max-width: 100%; min-width: 179px; display: block; height:auto;}
.t2 {font-family: Gotham-Bold; font-size: medium; color: #003366;}
.r3 {font-family: Gotham-Bold; font-size: medium; color: #0B0B0B; padding: 4px; background-color: #d0d0d0;}
.res {width: 25%; min-width: 179px; display: inline-block;}
.label1 {font-family: Gotham-Bold; margin:2px; font-size: medium; color: #42408a;}



.t3 {
  text-align: center;
  font-weight: bold;
  color: #2181b7;
  padding: 2px;
  font-size: medium;
  font-family: Gotham-Bold;
  display: inline-block;
}

.t4 {
  font-family: Gotham-Bold;
  font-size: large;
  font-style: normal;
  font-weight: bolder;
}

.r3 {
  text-align: center;
  font-weight: bolder;
  color: #2181b7;
  font-size: large;
  font-family: Gotham-Bold;
}

.r4 {
  font-family: Gotham-Bold;
  font-size: large;
  font-style: normal;
  font-weight: boldest;
}

.searchbox {
  font-family: Gotham-Bold;
  display: inline-block;
  text-align: center;
}

span.filter-option.pull-left {
  width: 188px;
}

div.t3 select.selectpicker {
  width: 188px;
}

#map {
  height: 100px;
}

JavaScript

function testdis() {
 const destinoCitydata = 
fetch('https://api.myjson.com/bins/zpblu');

  const pricelistdata = fetch('https://api.myjson.com/bins/ov8ea');
  pricelistdata
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      /*  var I_origin = prompt("Where are you from?", "LOS ANGELES");
       var I_destinationCountry = prompt("Where are you sending to?", "NICARAGUA");
       var I_destinationCity = prompt("To the capital or other departments?", "MANAGUA");
       var I_shippingMethod = prompt("By boat or plane?", "MARITIMO");
       var I_item = prompt("What are you sending?", "30x30x30");
       
       if (I_origin == null || I_origin == "") {
         txt = "User cancelled the prompt.";
       } else {
         txt = "Great, " + I_origin + "! What would you like to send?";
       } */

      var text;

      var I1_item = document.getElementById("articuloId");
      var I1_origin = document.getElementById("originId");
      var I1_destinationCountry = document.getElementById("destinationCountryId");
      var I1_destinationCity = document.getElementById("destinationCityId");
      var I1_shippingMethod = document.getElementById("shippingMethodId");

      var I2_item = I1_item.options[I1_item.selectedIndex].text;
      var I2_origin = I1_origin.options[I1_origin.selectedIndex].text;
      var I2_destinationCountry = I1_destinationCountry.options[I1_destinationCountry.selectedIndex].text;
      var I2_destinationCity = I1_destinationCity.options[I1_destinationCity.selectedIndex].text;
      var I2_shippingMethod = I1_shippingMethod.options[I1_shippingMethod.selectedIndex].text;

      var I_origin = I2_origin;
      var I_destinationCountry = I2_destinationCountry;
      var I_destinationCity = I2_destinationCity;
      var I_shippingMethod = I2_shippingMethod;
      var I_item = I2_item;

      console.log(I_item + I_origin + I_destinationCountry + I_destinationCity + I_shippingMethod);

      // JSON...