Itinerary Attempt

by George Obregon

HTML

<!doctype html>
<html lang="en-US">
<head>
<meta name="description" content="CURRENT">
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Su Reservacion!</title>
  <meta name="author" content="George Obregon">
  <!-- BEGIN MOBILE RESPONSIVENESS -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- END MOBILE RESPONSIVENESS -->
<!-- BEGIN FAVICON -->
	<link rel="icon" type="image/x-icon" href="http://mtomtours.com/favicon.ico" />
	<link rel="icon" type="image/png" href="https://www.mtomtours.com/images/icons/faviconM.png" />
	<link rel="icon" type="image/gif" href="http://mtomtours.com/favicon.gif" />
<!-- END FAVICON -->
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
   <div class="wrap">
'+currentDateTime+'
  <h2>RESERVATION CODE:<div class="reservationcode">'+reclocator+'</div>
  <br>
    <div class="tBox">
      <div class="t1"> '+PT1firstname+' '+PT1lastname+'</div>
      <br>age:
      <div class="t2">'+PT1age+'</div>
      <br>contact:		
      <div class="t3">'+PT1email+'</div> 
    </div>
  				
<br>
    <div class="instruct"><br>'+Ainstruct+'<br><br></div>
    <br><div class="sBox">
    <div class="s1">'+Aairline+'<italic> '+Aflightno+'</italic></div> Terminal:<div class="s1">'+AOterminal+'</div><br>
    <div class="s2">'+AOairport+' → '+ADairport+' </div><br>
     <div> 
      <div class="departure">Departure</div>
      <div class="s3">'+AOweekday+' '+AOdate+' '+AOtime+'<br></div>
      </div>  
    <div class="s5">Duration: '+Aduration+'</div>
       <div> 
    <div class="arrival">Arrival</div>
    <div class="s4">'+BDweekday+' '+ADdate+' '+ADtime+'<br></div></div>
     </div> 
    </div>	
  
  
  <div id="w" class="searchbox">
    <h1>Su Reservacion!</h1>
    <p>Ingrese el codigo de su reservacion y apellido del viajero</p>
	YLAS62 LACAYO 4 seg 1...

CSS

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

@page {
  size: 5.5in 8.5in;
}


@font-face {
	font-family: 'GENUINEItalic';
	src: url('fonts/GENUIBI_.eot');
	src: local('☺'), url('fonts/GENUIBI_.woff') format('woff'), url('fonts/GENUIBI_.ttf') format('truetype'), url('fonts/GENUIBI_.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham-Bold';
	src: url('Gotham-Bold.eot');
	src: local('GothamBold'), local('Gotham-Bold'),
		url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/Gotham-Bold.woff2') format('woff2'),
		url('fonts/Gotham-Bold.woff') format('woff'),
		url('fonts/Gotham-Bold.ttf') format('truetype'),
		url('fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
	font-weight: 900;
	font-style: normal;
}


@font-face {
	font-family: 'FranklinGothicHvy';
	src: url('ITCFranklinGothicStd-Hvy.eot');
	src: local('ITC Franklin Gothic Std Heavy'), local('ITCFranklinGothicStd-Hvy'),
		url('fonts/ITCFranklinGothicStd-Hvy.eot?#iefix') format('embedded-opentype'),
		url('fonts/ITCFranklinGothicStd-Hvy.woff2') format('woff2'),
		url('fonts/ITCFranklinGothicStd-Hvy.woff') format('woff'),
		url('fonts/ITCFranklinGothicStd-Hvy.ttf') format('truetype'),
		url('fonts/ITCFranklinGothicStd-Hvy.svg#ITCFranklinGothicStd-Hvy') format('svg');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'GENUINE';
	src: url('GENUINE.eot');
	src: local('GENUINE'),
		url('fonts/GENUINE.eot?#iefix') format('embedded-opentype'),
		url('fonts/GENUINE.woff2') format('woff2'),
		url('fonts/GENUINE.woff') format('woff'),
		url('fonts/GENUINE.ttf') format('truetype'),
		url('fonts/GENUINE.svg#GENUINE') format('svg');
	font-weight: normal;
	font-style: normal;
}

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

JavaScript

$(function(){
  $('#ghsubmitbtn').on('click', function(e){
    e.preventDefault();
    $('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loading..."></div>');
    
    var reclocator = $('#ghreclocator').val();
	var lastname = $('#ghlastname').val();
//    var runapi  = 'https://api.sandbox.amadeus.com/v1.2/travel-record/'+reclocator+'?last_name='+lastname+'&apikey=gGbK6Ig4qJD0tJlQ7MRRGAOX1v7hjz7N';
var runapi  = 'http://mtomtours.com/jsonVIEW.json';
	
    
    requestJSON(runapi, function(json) {
		
		
      if(json.status == "404") {
        $('#ghapidata').html("<h2>No User Info Found</h2>");
      }
      
      else {
        // else we have a user and we display their info
		var reclocator   = json.record_locator;
		var officeid   = json.header.owner_office_id;
		
		
/* 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 currentTime = new Date ( );
		var currentDay = currentTime.getDate();
		var currentYear = currentTime.getFullYear();
		var currentMonth = currentTime.getMonth()+1;
		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;
		//...