Itinerary TRAYDAWG

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"># DE VUELO: <br>

          <select title="AV521" class="selectpicker" data-live-search="true" data-width="150px" single id="articuloId" name='articulo' onchange="testdis()">
<!-- 			<optgroup label="AMERICAN">
			<option value="TBD">AA</option>
			        <option value="1247">1247</option>
			        <option value="928">928</option>
			        <option value="993">993</option>
			        <option value="994">994</option>
			        <option value="1252">1252</option>
			        <option value="344">344</option>
			      </optgroup> -->
			<optgroup label="AVIANCA">
				<option value="396">396</option>
				<option value="521">521</option>
				<option value="520">520</option>
				<option value="641">641</option> 
				<option value="707">707</option>
				<option value="521">521</option>
				<option...

CSS

body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #FAFAFA;
      font: 12pt "Tahoma";
    }

    * {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }

    .page {
      width: 210mm;
      min-height: 279mm;
      padding: 8mm;
      margin: 8mm auto;
      border: 1px #D3D3D3 solid;
      border-radius: 5px;
      background: white;
      box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
    }

    .subpage {
      padding: 0cm;
      border: 1px white solid;
      height: 279mm;
      outline: 5mm #2181b7 solid;
    }

    @page {
      size: letter;
      margin: 0;
    }

    @media print {
      #header,
      #nav-menu,
      #sidebar,
      #footer,
      #form,
      #select {
        display: none;
      }
     .selectpicker {
        display: none;
      }
      html,
      body {
        width: 210mm;
        height: 297mm;
      }
      .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
      }
      /* Inhaltsbreite setzen, Floats und Margins aufheben */
      /* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
      #content,
      #page {
        width: 100%;
        margin: 0;
        float: none;
      }
      /** Seitenränder einstellen */
      @page {
        margin: 2cm
      }
      /* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
      /* Das spart Tinte */
      body {
        font: 12pt Georgia, "Times New Roman", Times, serif;
        line-height: .6;
        background: #fff !important;
        color: #000;
      }
      h1 {
        font-size: 24pt;
      }
      h2,
      h3,
      h4 {
        font-size: 14pt;
        margin-top: 25px;
      }
      /* Alle Seitenumbrüche definieren */
      a {
       ...

JavaScript

function testdis() {

  var inputURL = 'https://api.myjson.com/bins/6d58a';
  const pricelistdata = fetch(inputURL);
  pricelistdata
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {

      /* BEGIN TIME FORMATTER */
      var minutes = 1000 * 60;
      var hours = minutes * 60;
      var days = hours * 24;
      var years = days * 365;
      var weekday = new Array(7);
      weekday[0] = "Sunday";
      weekday[1] = "Monday";
      weekday[2] = "Tuesday";
      weekday[3] = "Wednesday";
      weekday[4] = "Thursday";
      weekday[5] = "Friday";
      weekday[6] = "Saturday";
      var monthname = new Array(12);
      monthname[0] = "January";
      monthname[1] = "February";
      monthname[2] = "March";
      monthname[3] = "April";
      monthname[4] = "May";
      monthname[5] = "June";
      monthname[6] = "July";
      monthname[7] = "August";
      monthname[8] = "September";
      monthname[9] = "October";
      monthname[10] = "November";
      monthname[11] = "December";

      var currentTime = new Date();
      var currentDay = currentTime.getDate();
      var currentWeekday = weekday[currentTime.getDay()];
      var currentYear = currentTime.getFullYear();
      var currentMonth = currentTime.getMonth() + 1;
      var currentmonthName = monthname[currentTime.getMonth()];
      var currentHours = currentTime.getHours();
      var currentMinutes = currentTime.getMinutes();
      var currentSeconds = currentTime.getSeconds();
      // Pad the minutes and seconds with leading zeros, if required
      currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
      currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
      // Choose either "AM" or "PM" as appropriate
      var timeOfDay = (currentHours < 12) ? "AM" : "PM";
      // Convert the hours component to 12-hour format if needed
      currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
      // Convert an...