salesforce otp front

HTML

<h3>
DESKTOP
</h3>
<hr/>



<!--
============================== 
  DESKTOP Trip Planner Widget 
============================== 
-->
<div id="tp_section" class="widget-tripplanner">

  <form method="get" id="topTripplannerForm" class="trip_planner_form" target="_blank" action="https://devplanner.vta.org/planner?" name="trip_planner_form">
    <h2>Trip<br/>Planner</h2>
    <div class="input-wrapper">


      <div class="input-group">
        <div class="address">
          <input class="inputForm" id="googleFrom" name="from" type="text" required="true" placeholder="Starting address" title="Trip Starting Address - Enter the address (use city or zip) of where you plan to start your trip">
        </div>
        <div class="address">
          <input class="inputForm" id="googleTo" name="to" type="text" required="true" placeholder="Destination address" title="Trip Destination Address - Enter the address (use city or zip) of where you would like to go">
        </div>
      </div>
      <div class="input-group">
        <select name="arriveBy" class="inputForm" style=" margin-left:0; padding-left:0;" title="Leave or arrive options">
          <option value="false">Leave</option>
          <option value="true">Arrive</option>
        </select>
        <input id="datepicker" class="inputForm" type="text" style="background:url('{!URLFOR($Resource.vta_Org_Website,'images/calendarIcon.png')}') no-repeat; background-position:95%; width:90%; background-color:white; margin-right:2.5%;" placeholder="mm/dd/yy"
        title="Trip Date - Enter the date that you plan to take your trip" />

        <select id="hourPicker" class="inputForm" title="hour options">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
         ...

CSS

.widget-tripplanner {
  display: inline-block;
  width: 36rem;
  height: 5rem;
  margin-bottom: 15px;
  position: relative;
}

.widget-tripplanner,
.widget-tripplanner * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.widget-tripplanner form {
  display: block;
}

.widget-tripplanner .input-wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  width: 30rem;
}

.widget-tripplanner h2 {
  float: left;
  padding: 0 0.3rem 0.3rem 0;
  margin: 0;
  line-height: 1.5em;
  width: 6rem;
}

#tripplannerwidgetmobile h2 {
  float: none;
  width: auto;
  text-align: center;
}

.widget-tripplanner .input-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.widget-tripplanner .address {
  width: 10rem;
  margin-left: .5rem;
  margin-right: .5rem;
}

#tripplannerwidgetmobile .address {
  width: auto;
}

.widget-tripplanner .address input {
  width: 100%;
}

.widget-tripplanner input {
  margin: 0.5rem;
}

.widget-tripplanner input[type=submit] {
  display: inline-block;
  background-color: #9D2A39;
  width: 3rem;
  height: 1.5rem;
  color: #ffffff;
  font-weight: bold;
  border-radius: 0.2rem;
  text-align: center;
}

#tripplannerwidgetmobile.widget-tripplanner{
	  height: 15rem;
	  justify-content: center;
	  display: inherit;
    width: 100%;
    min-width:auto;
	}
  
#tripplannerwidgetmobile .input-group {
  justify-content: center;
}

.input-group.date input {
  width: 10rem;
}

#tripplannerwidgetmobile form {
  text-align: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#tripplannerwidgetmobile .input-group.address label {
  display: inline-block;
  width: 3rem;
}

#tripplannerwidgetmobile .input-group.address input {
  width: auto;
}
#tripplannerwidgetmobile [type=submit] {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  }
 ...

JavaScript

var $j = $;

function addJS(linkurl) {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = linkurl;
  document.getElementsByTagName('head')[0].appendChild(s);
}
addJS('https://maps.googleapis.com/maps/api/js?key=AIzaSyCO5de3-oEIWzqid-N97Bzvka3FqmMRoT4&libraries=places&callback=initializeField')

function initializeField() {
  ids = ['googleFrom', 'googleTo', 'mobileFrom', 'mobileTo']
  for (i in ids) {
    var input = document.getElementById(ids[i]);
    if (input) {
      var autocomplete = new google.maps.places.Autocomplete(input);
    }
  }
}

$j(document).ready(function() {

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  function setCurrentTime(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    minutes = Math.round(minutes / 5) * 5;
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0' + minutes : minutes;
    // var strTime = hours + ':' + minutes + ' ' + ampm;
    $j('#hourPicker').val(hours);
    $j('#hourPickerMobile').val(hours);
    $j('.inputForm[name="minute"]').val(minutes);
    $j('.period').val(ampm);
    //return strTime;
  }
  setCurrentTime(new Date());
  $j('#topTripplannerForm').submit(function() {
    hour = $j('#hourPicker option:selected').text();
    // minute=$j('.inputForm[name="minute"] option:selected').text();
    period = $j('.period option:selected').val();
    if (period === 'pm' && hour !== '12') {
      hour = parseInt(hour) + 12
    }
    $j('#hourField').attr({
      'value': hour
    });
    // $j('#timeField').attr('value',timeString);
  });
  $j('#mobileTripPlannerForm').submit(function() {
    var setDate = $j("#datepickermobile").val().split('-');
    var dateString = ""
    if (setDate.length > 1) {
      dateString = setDate[1] + ":" + setDate[2] + ":" + setDate[0]
        // var...