Flight Booking App
DUB
MRS
From
DUB, Dublin Airport
      To
      MRS, Marseille Provence Airport
          Depar
          MON, 8 May
          Return
          One Way
          By the moment theres only One Way tickets, thanks.
          May
          S M T W T F S
          Passengers
          Class
          Loading...
          // Play with the inputs --> var flights = [ { currency: "EUR", price: 128.67, carrier: "KL", time: "2h 30min", nodes: ["CDG 2017-05-30T09:35+02:00 AMS 2017-05-30T11:15+02:00"] }, { currency: "EUR", price: 138.70, carrier: "AF", time: "2h 30min", nodes: ["CDG 2017-05-30T12:35+02:00 AMS 2017-05-30T13:50+02:00"] }, { currency: "EUR", price: 151.41, carrier: "BA", time: "2h 30min", nodes: ["CDG 2017-05-30T11:40+02:00 AMS 2017-05-30T12:55+02:00"] }, { currency: "EUR", price: 174.70, carrier: "KL", time: "2h 30min", nodes: ["CDG 2017-05-30T18:35+02:00 AMS 2017-05-30T19:50+02:00"] }, { currency: "EUR", price: 204.70, carrier: "AF", time: "2h 30min", nodes: ["CDG 2017-05-30T11:40+02:00 AMS 2017-05-30T12:55+02:00"] } ]; var carrier = { "AF": "Air France", "KL": "KLM Royal Dutch Airlines", "BA": "British Airways" }; var airports = [{"name":"Vichy-Charmeil Airport","city":"Vichy","country":"France","IATA":"VHY"},{"name":"Lyon-Bron Airport","city":"Lyon","country":"France","IATA":"LYN"},{"name":"Cannes-Mandelieu Airport","city":"Cannes","country":"France","IATA":"CEQ"},{"name":"Marseille Provence Airport","city":"Marseille","country":"France","IATA":"MRS"},{"name":"Charles de Gaulle International","city":"Paris","country":"France","IATA":"CDG"},{"name":"Toussus-le-Noble Airport","city":"Toussous-le-noble","country":"France","IATA":"TNF"},{"name":"Paris-Orly Airport","city":"Paris","country":"France","IATA":"ORY"},{"name":"Le Mans-Arnage Airport","city":"Le Mans","country":"France","IATA":"LME"},{"name":"Nantes Atlantique Airport","city":"Nantes","country":"France","IATA":"NTE"},{"name":"Nancy-Essey Airport","city":"Nancy","country":"France","IATA":"ENC"},{"name":"Frankfurt am Main International","city":"Frankfurt","country":"Germany","IATA":"FRA"},{"name":"Hamburg Airport","city":"Hamburg","country":"Germany","IATA":"HAM"},{"name":"Cologne Bonn Airport","city":"Cologne","country":"Germany","IATA":"CGN"},{"name":"Munich International Airport","city":"Munich","country":"Germany","IATA":"MUC"},{"name":"Stuttgart Airport","city":"Stuttgart","country":"Germany","IATA":"STR"},{"name":"Berlin-Tegel International Airport","city":"Berlin","country":"Germany","IATA":"TXL"},{"name":"Hannover Airport","city":"Hannover","country":"Germany","IATA":"HAJ"},{"name":"Bremen Airport","city":"Bremen","country":"Germany","IATA":"BRE"},{"name":"Frankfurt-Hahn Airport","city":"Hahn","country":"Germany","IATA":"HHN"},{"name":"Dortmund Airport","city":"Dortmund","country":"Germany","IATA":"DTM"},{"name":"Cork Airport","city":"Cork","country":"Ireland","IATA":"ORK"},{"name":"Galway Airport","city":"Galway","country":"Ireland","IATA":"GWY"},{"name":"Dublin Airport","city":"Dublin","country":"Ireland","IATA":"DUB"},{"name":"Waterford Airport","city":"Waterford","country":"Ireland","IATA":"WAT"},{"name":"Amsterdam Airport Schiphol","city":"Amsterdam","country":"Netherlands","IATA":"AMS"},{"name":"Maastricht Aachen Airport","city":"Maastricht","country":"Netherlands","IATA":"MST"},{"name":"Eindhoven Airport","city":"Eindhoven","country":"Netherlands","IATA":"EIN"},{"name":"Rotterdam The Hague Airport","city":"Rotterdam","country":"Netherlands","IATA":"RTM"},{"name":"Belfast International Airport","city":"Belfast","country":"United Kingdom","IATA":"BFS"},{"name":"Manchester Airport","city":"Manchester","country":"United Kingdom","IATA":"MAN"},{"name":"Southampton Airport","city":"Southampton","country":"United Kingdom","IATA":"SOU"},{"name":"London Heathrow Airport","city":"London","country":"United Kingdom","IATA":"LHR"},{"name":"Blackpool International Airport","city":"Blackpool","country":"United Kingdom","IATA":"BLK"},{"name":"Newcastle Airport","city":"Newcastle","country":"United Kingdom","IATA":"NCL"},{"name":"London Stansted Airport","city":"London","country":"United Kingdom","IATA":"STN"},{"name":"Miami International Airport","city":"Miami","country":"United States","IATA":"MIA"},{"name":"John F Kennedy International Airport","city":"New York","country":"United States","IATA":"JFK"},{"name":"Piedmont Triad International Airport","city":"Greensboro","country":"United States","IATA":"GSO"},{"name":"Wings Field","city":"Philadelphia","country":"United States","IATA":"BBX"},{"name":"Hardwick Field","city":"Cleveland","country":"United States","IATA":"HDI"},{"name":"Warren Field","city":"Washington","country":"United States","IATA":"OCW"}]; (function () { var _airports = _.groupBy(airports, o => o.country), selectIndex = [], selectData = []; _.each(_airports, (countryList, countryName) => { var firstLeter = countryName.split('')[0]; selectData.push(`
        • ${countryName}
        • `); selectIndex.push(`
        • ${firstLeter}
        • `); _.each(countryList, (airport, i) => { selectData.push(`
        • ${airport.IATA}, ${airport.name}
        • `); }); }); $('.select ul.select-index').html(_.uniq(selectIndex).join('')); $('.select ul.select-data').html(selectData.join('')); // Calendar days var days = [30]; for (var i = 0; i < 31; i++) { days.push(i); } var daysRender = _.map(days, function(i) { return `${i+1}`; }); $('.calendar .days').html(daysRender.join('')); $('.calendar .days span').eq(8).addClass('checked'); // Flight Results doFlightsRender(true); // Events // Open inputs $('.control:not(.open) .control-head').on('click', function(evt) { $(evt.currentTarget).parent('.control').addClass('open'); }); $('.control .close').on('click', function(evt) { var z = $(evt.currentTarget).closest('.control'); setTimeout(() => { z.removeClass('open') }, 50); }); // SpinnerInput add/substract action $('.spinner button').on('click', function(evt) { var isAdding = evt.currentTarget.getAttribute('data-action') == 'plus', $input = $('input[name="passengers"]:checked'), $control = $input.siblings('div').find('span'), value = parseInt($control.text()); if(isAdding) value++; else if (value !== 0) value--; $control.text(value); }); // SelectInput find index $('.select-index').on('click', 'li', function(evt) { var index = evt.currentTarget.textContent, $nano = $(evt.currentTarget).parent('.select-index').siblings('.nano'), el = $nano.find(`li.sep[data-index="${index}"]`)[0]; $nano.find('.nano-content').animate({ scrollTop: el.offsetTop }, 600); }); // SelectInput set data $('.select-data').on('click', 'li:not(.sep)', function(evt) { var text = evt.currentTarget.textContent, iata = evt.currentTarget.getAttribute('data-iata'), $select = $(evt.currentTarget).closest('.select'), $nameContainer = $select.find('.airport-name'); if($nameContainer.data('role') == 'from') { var _iata = iata.split(''); var div = $('.header .fromPlace').addClass('rotate'); var span = $('.header .fromPlace span'); span.eq(0).text(_iata[0]); span.eq(1).text(_iata[1]); span.eq(2).text(_iata[2]); setTimeout(() => div.removeClass('rotate'), 900); //$('.xfrom').text(iata); } else { var _iata = iata.split(''); var div = $('.header .toPlace').addClass('rotate'); var span = $('.header .toPlace span'); span.eq(0).text(_iata[0]); span.eq(1).text(_iata[1]); span.eq(2).text(_iata[2]); setTimeout(() => div.removeClass('rotate'), 900); //$('.xto').text(iata); } $nameContainer.text(text); $select.toggleClass('open'); $(evt.currentTarget).addClass('selected').siblings('li').removeClass('selected'); }); // Date input $('.calendar .days span').on('click', function(evt) { var $this = $(evt.currentTarget), day = evt.currentTarget.textContent; $this.addClass('checked').siblings('span').removeClass('checked'); var date = new Date(`5/${day}/2017`); var [wd, m, d] = date.toDateString().split(' '); $('.dateinput .control-item span').eq(0).text(`${wd.toUpperCase()}, ${d} ${m}`); }); $('.btnBack').on('click', function(evt) { var wrap = document.querySelector('.wrap'), index = parseInt(wrap.getAttribute('data-pos')); $('.ticket button.btnBook').text('Book Flight'); wrap.setAttribute('data-pos', index - 1); }); // Search button $('.btnSearch').on('click', function(evt) { doFlightsRender(false); setTimeout(() => { document.querySelector('.wrap').setAttribute('data-pos', 1); }, 50); }); $('.ticket button').on('click', function(evt) { var $button = $(evt.currentTarget); var $loader = $('.loader').show(); $button.text('Booking...'); setTimeout(() => { $loader.hide(); $button.html(' Flight Booked'); $button.addClass('success'); }, 1200); }); // Select Flight $('.list').on('click', 'article', function(evt) { var index = parseInt(evt.currentTarget.getAttribute('data-index')), flight = flights[index]; var [from, t1, to, t2] = flight.nodes[0].split(' '); var p = $('.radio.passengers label span'), peopleTotal = 0, people = _.map(p, function(el, i) { var v = parseInt(el.textContent), str = ''; if(i == 0 && v) str = `${v} Adults`; if(i == 1 && v) str = `${v} Kids`; if(i == 2 && v) str = `${v} Elders`; peopleTotal += v; return str; }); from = $('.fromPlace span').text(); to = $('.toPlace span').text(); var time1 = new Date(t1), time2 = new Date(t2); var clase = $('input[name="seat"]:checked').val(), dates = $('.dateinput .control-item span'), place1 = _.findWhere(airports, {IATA: from}), place2 = _.findWhere(airports, {IATA: to}); var flightRender = `
          ${time1.toLocaleTimeString().replace(':00','')} ${from} ${place1.city}
          ${time2.toLocaleTimeString().replace(':00','')} ${to} ${place2.city}
          Passengers${_.compact(people).join(',')}
          Class${clase}
          Departure${dates[0].textContent}
          Return${dates[1].textContent}
          Airline${carrier[flight.carrier]}
          Total €${(flight.price * peopleTotal).toFixed(2)}
          `; $('.ticket section').html(flightRender); setTimeout(() => { document.querySelector('.wrap').setAttribute('data-pos', 2); }, 50); }); // Init scroll $(".nano").nanoScroller(); function doFlightsRender(isInit) { var flightsRender = _.map(flights, function(o, i) { var sumText = ""; var [from, t1, to, t2] = o.nodes[0].split(' '); var d1 = new Date(t1), d2 = new Date(t2); if(!isInit) { var ppl = $('.radio.passengers label span'), sum = parseInt(ppl.eq(0).text()) + parseInt(ppl.eq(1).text()) + parseInt(ppl.eq(2).text()); sumText = `${sum} people €${(o.price * sum).toFixed(2)}`; from = $('.fromPlace span').text(); to = $('.toPlace span').text(); } var img; if(o.carrier == 'KL') img = 'https://dl.dropbox.com/s/02ve5kn75rpo0s3/KL.png'; else if(o.carrier == 'BA') img = 'https://dl.dropbox.com/s/6fpuy898zzuk7nn/BA.png'; else img = 'https://dl.dropbox.com/s/dhmufay65yer2jz/AF.png'; return `
          ualogo
          ${o.time} ${d1.toLocaleTimeString().replace(':00','')} - ${d2.toLocaleTimeString().replace(':00','')} ${carrier[o.carrier]} ${from} - ${to} Non-Stop
          ${sumText} €${o.price}
          `; }); $('.list .nano-content').html(flightsRender.join('')); } })();

          Start typing and press Enter to search

          Shopping Cart

          No products in the cart.