css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>
  <title>HC Airline Ticket Reservation System</title>
  <link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet">
</head>

<body>
  <div class="maincontent overlay container-fluid">
    <div class="myHeader">
      <h1 class="text-center">[HC] Airline Ticket Reservation System</h1>
      <h2 class="text-center">A Webpage made by Harsh to practice JavaScript</h2>
      <h2 class="text-center text-danger">[Under Development] <br />Warning : Everything may not yet work perfectly or as desired</h2>
    </div>
    <br />
    <br />
    <div class="flightList container">
      <h3 class=" choosehead text-center">Choose one of the following flights:</h3>
      <div class="row flightHeader">
        <div class="col-sm-2">
          <h4 class="text-center">Serial No</h4>
        </div>
        <div class="col-sm-2">
          <h4 class="text-center">Flight No</h4>
        </div>
        <div class="col-sm-2">
          <h4 class="text-center">Flight Name</h4>
        </div>
        <div class="col-sm-2">
          <h4 class="text-center">Origin</h4>
        </div>
        <div class="col-sm-2">
          <h4 class="text-center">Destination</h4>
        </div>
        <div class="col-sm-2">
          <h4 class="text-center">Price(Rs)</h4>
        </div>
      </div>
      <div class="flightsMain">
        <div class="allFlights">
        
           <div class="row flight 4563" id="4563">
          <div class="col-sm-2">
            <h5 class="text-center srno flightNo1"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flno flightNo1"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flnm flightNo1"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flsrc flightNo1"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center fldst flightNo1"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flprc flightNo1"></h5>
          </div>
        </div>
        <div class="row flight 8205" id="8205">
          <div class="col-sm-2">
            <h5 class="text-center srno flightNo2"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flno flightNo2"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flnm flightNo2"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flsrc flightNo2"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center fldst flightNo2"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flprc flightNo2"></h5>
          </div>
        </div>
        <div class="row flight 5455" id="5455">
          <div class="col-sm-2">
            <h5 class="text-center srno flightNo3"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flno flightNo3"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flnm flightNo3"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flsrc flightNo3"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center fldst flightNo3"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flprc flightNo3"></h5>
          </div>
        </div>
        <div class="row flight 2853" id="2853">
          <div class="col-sm-2">
            <h5 class="text-center srno flightNo4"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flno flightNo4"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flnm flightNo4"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flsrc flightNo4"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center fldst flightNo4"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flprc flightNo4" </h5>
          </div>
        </div>
        <div class="row flight 2956" id="2956">
          <div class="col-sm-2">
            <h5 class="text-center srno flightNo5"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flno flightNo5"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flnm flightNo5"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flsrc flightNo5"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center fldst flightNo5"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flprc flightNo5"></h5>
          </div>
        </div>
        <div class="row flight 2653" id="2653">
          <div class="col-sm-2">
            <h5 class="text-center flightNo6 srno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo6 flno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo6 flnm"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo6 flsrc"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo6 fldst"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center  flightNo6 flprc"></h5>
          </div>
        </div>
        <div class="row flight 5959" id="5959">
          <div class="col-sm-2">
            <h5 class="text-center  flightNo7 srno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center   flightNo7 flno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center  flightNo7 flnm"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center  flightNo7 flsrc"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center  flightNo7 fldst"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center  flightNo7 flprc"></h5>
          </div>
        </div>
        <div class="row flight 2468" id="2468">
          <div class="col-sm-2">
            <h5 class="text-center  flightNo8 srno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center  flightNo8 flno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo8 flnm"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo8 flsrc"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo8 fldst"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo8 flprc"></h5>
          </div>
        </div>
        <div class="row flight 5012" id="5012">
          <div class="col-sm-2">
            <h5 class="text-center flightNo9 srno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo9 flno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo9 flnm"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo9 flsrc"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo9 fldst"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo9 flprc"></h5>
          </div>
        </div>
        <div class="row flight 1752" id="1752">
          <div class="col-sm-2">
            <h5 class="text-center flightNo10 srno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo10 flno"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo10 flnm"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo10 flsrc"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo10 fldst"></h5>
          </div>
          <div class="col-sm-2">
            <h5 class="text-center flightNo10 flprc"></h5>
          </div>
        </div>
        
        </div>
        
        <div id="returnError4"></div>
        
        <div class="flight morefl"><h5 class="text-center">Click to choose another flight</h5></div>

        <div id="moreflights" class="flightcopy">
          <form id="moreFlight">
            <h4 class="text-center ">Find another flight</h5>
            <div class="row">
              <div class="col-sm-6">
                <h5 class="text-center">From City:</h5>
              </div>
              <div class="col-sm-6">
                <input id="fromCity" class="text-center" type="text" name="fCity" placeholder="eg: New York" required>
              </div>
            </div>
              <div class="row">
                <div class="col-sm-6">
                  <h5 class="text-center">To City:</h5>
                </div>
                <div class="col-sm-6 text-left">
                  <input id="toCity" class="text-center" type="text" name="tCity" placeholder="eg: London" required>
                </div>
              </div>
            
            <div class="row">
                <div class="col-sm-6">
                  <h5 class="text-center">Preferred Flight:</h5>
                </div>
                <div class="col-sm-6 text-left">
                  <input id="enteredName" class="text-center" type="text" name="entFname" placeholder="eg: American Airlines" required>
                </div>
              </div>
            
            
            <div class="row" style="margin-top:30px;">
              <div class="col-sm-4">
                <h5 class="text-center">This a</h5>
              </div>
              <div class="col-sm-4">
                <label class="custom-control custom-radio">
  <input checked="checked" id="radio1" name="myRadio" value="int" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">International flight</span>
</label>
              </div>
              <div class="col-sm-4">
                <label class="custom-control custom-radio">
  <input id="radio2" value="dom" name="myRadio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Domestic Flight</span>
</label>
              </div>
            </div>
              <div class="row">
                <div class="col-sm-12">
                  <br />
                  <div class="text-center">
                    <button type="button" id="searchFlight" class="text-center btn btn-info text-center ">Search for a flight</button>

                    </form>
                  <div id="returnError3"></div>
                </div>
              </div>
            </div>
            
        </div>
      </div>
      <br />
      <br />
    </div>
  </div>
  <div class="container inputs my-3">
    <form id="enterFlightNo">
      <div class="row">
        <div class="col-sm-4">
          <p class="text-left">Enter flight number you want to travel in: <br /><span class="text-center text-info">Enter "list" to see the complete list again.</span></p>
        </div>
        <div class="col-sm-4">
          <input id="fNo" class="text-center" type="text" name="fnum" placeholder="Flight Number eg:4563"><br>
        </div>
        <div class="col-sm-4">
          <button type="button" id="flightNoBtn" class="btn btn-primary text-right">Submit</button>
        </div>
      </div>
    </form>
    <div id="returnError"></div>
    <button type="button" id="reFlightNo" class="text-center btn-block btn btn-info text-right">Click here to Re-Enter Flight Number</button>
    <br />
    <button type="button" id="rePassNo" class="text-center btn-block btn btn-info text-right">Click here to Re-Enter Number of Passengers</button>
    <br />
    <form id="enterPassengers">
      <div class="row">
        <div class="col-sm-4">
          <p class="text-left">Enter number of passengers traveling:</p>
        </div>
        <div class="col-sm-4">
          <input class="text-center" type="text" id="passNo" name="pnum" placeholder="No of passenger eg:2"><br>
        </div>
        <div class="col-sm-4">
          <button type="button" id="passengerBtn" class="btn btn-primary text-right">Submit</button>
        </div>
      </div>
    </form>
    <div id="returnError2"></div>
    <br />
    
    
    <form id="pNames">       
        <div id="passengerNames"></div>
    </form>
    
    
    
    <form class="text-center" id="extraStuff">
       <div class="form-check">
    <label class="form-check-label">
      <input id="Bclass" type="checkbox" class="form-check-input">
      Travel in Bussiness class (+ ₹5000 per passenger)
    </label>
  </div>
      <div class="form-check">
    <label class="form-check-label">
      <input id="getFood" type="checkbox" class="form-check-input">
      Include Food (+ ₹850 per passenger)
    </label>
  </div>
      
      <div class="yourTotal text-center text-info"></div>
      <button type="button" id="confirm" class="text-center btn-block btn btn-info text-right">Confirm Booking</button>
    </form>
  </div>
  </div>

<div class="myFooter">
  <p class="text-center">Webpage coded by Harsh Chandra <a target="_blank" href="http//:www.HarshHC.tk">#MadeByHC</a></p>
</div>
</body>
            
          
!
            
              body{
  font-family: Jockey one;
  background-color: #2C3335;
  color:red;
}

.container-fluid{
   padding: 0px;
}

.myHeader{
  padding: 10px;
  background-color: #1D2021;
  color:#0AB5D4;
  padding-top: 25px;
}

h1{
  font-size: 50px;
}

.flightList{
  background-color: #474D4F;
  padding: 20px;
  border-radius:12px
}

h3{
  padding:15px;
  color:#EEF1F2;
  padding-bottom: 25px;
  font-size: 35px;
}

.flightHeader{
  background:#555E5F;
  padding: 10px;
  border-radius:12px;
  color:#0AB5D4;
}
.flightsMain{
  padding-top: 25px;
  color:white;
}

.flight{
  padding:5px;
  margin: 10px;
  border-color: #98A0A2;
}

flight:hover:{
  opacity: 0.6;
}

.flight {
transition: .5s;
opacity: 1;
  border:1px;
  border-style:solid;
  border-radius:20px;
    border-color: #98A0A2;
}
.flight:hover {
  background-color: #202627;
  color:white;
  transform:scale(1.1);
  padding:20px;
}

.inputs{
  
  background-color: #474D4F;
  padding: 20px;
  border-radius:12px;
  color:#EEF2F2;
  font-size: 20px;
  letter-spacing: 0.3px;
}

input{
  border-radius:10px;
  border:2px;
  margin:2px;
}

.myFooter{
  margin-top: 40px;;
  padding: 10px;
  background-color: #1D2021;
  color:#0AB5D4;
  padding-top: 25px;
}

.myFooter p{
  font-size: 25px;
}

.confirmation{
  
}

.flightcopy {
transition: .5s;
opacity: 1;
  border:1px;
  border-style:solid;
  border-radius:20px;
    border-color: #98A0A2;
  padding:15px;
}
.flightcopy:hover {
  background-color: #202627;
  color:white;
  transform:scale(1.1);
  padding:20px;
}

.inputs{
  margin-top:30px;
}
            
          
!
            
              var flight;
var passenger;
var total;
var flightSrNo;
var checker1 = false;
var currentSrNo = 10;
var flsrno = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flightNumbers = ["4563", "8205", "5455", "2853", "2956", "2653", "5959", "2468", "5012", "1752"];
var flnm = ["Indian Airlines", "Aero Float", "Emirates", "Lufthansa", "Singapore Air", "Etihad Airways", "Turkish Airlines", "American Airlines", "Thai Airways", "Qatar Airways"];
var flsrc = ["Delhi", "Kolkata", "Mumbai", "Chennai", "Goa", "Cochin", "Pune", "Assam", "Jaipur", "Mumbai"];
var fldst = ["London", "Moscow", "Dubai", "Berlin", "Singapore", "Abu Dhabi", "Istanbul", "New York", "Bangkok", "Al Khor"];
var prices = [40000, 30000, 20000, 35000, 20000, 20000, 25000, 45000, 20000, 25000];
$(document).ready(function() {
  ///////////Adding html and making the flight list visible///////

  for (var i = 0; i <= flsrno.length; i++) {
    $(".flightNo" + (i + 1) + ".srno").text(flsrno[i]);
    $(".flightNo" + (i + 1) + ".flno").text(flightNumbers[i]);
    $(".flightNo" + (i + 1) + ".flnm").text(flnm[i]);
    $(".flightNo" + (i + 1) + ".flsrc").text(flsrc[i]);
    $(".flightNo" + (i + 1) + ".fldst").text(fldst[i]);
    $(".flightNo" + (i + 1) + ".flprc").text("₹" + prices[i]);
  }

  ////////////////////Main Program//////////////////////////////
  $("body").hide();
  $("body").fadeIn(1000);
  $("h2").fadeOut(10000);
  $("#moreflights").hide();
  $("#enterPassengers").hide();
  $("#reFlightNo").hide();
  $("#rePassNo").hide();
  $("#extraStuff").hide();
  $("#confirm").hide();
  $("#flightNoBtn").on("click", function() {
    flight = $("#fNo").val();
    mainsystem(flight);
  });
  $(".flight").on("click", function() {
    flight = $(this).attr('id');
    mainsystem(flight);
  });

  function mainsystem(flightnum) {
    if (flight == "list") {
      $('.flight').fadeIn(1000);
      $(".choosehead").fadeIn(500);
    } else if (flight > 0) {
      var test = false;
      for (var i = 0; i < flightNumbers.length; i++) {
        if (flightNumbers[i] == flight) {
          flightSrNo = i;
          console.log(flightSrNo);
          test = true;
          break;
        }
      }
      if (test === false) {
        $("#returnError").html('<p class="text-danger text-center">Flight not found!</p>');
        $('.flight').fadeIn(1000);
        $(".choosehead").fadeIn(500);
      } else {
        $("#returnError").html("");
        var no = "#" + flight;
        $('.flight').not(no).slideUp(1000);
        $(no).fadeIn(1200);
        $(".choosehead").fadeOut(500);
        $("#enterFlightNo").fadeOut(500);
        $("#enterPassengers").fadeIn(500);
        $("#reFlightNo").show().on("click", function() {
          $("#enterFlightNo").fadeIn(500);
          $("#reFlightNo").hide();
          $("#enterPassengers").hide();
          $("#rePassNo").hide();
          $("#extraStuff").hide();
          $("#confirm").hide();
          $("#returnError2").html('');
        });

        $("#passengerBtn").on("click", function() {
          passenger = $("#passNo").val();
          if (passenger <= 0) {
            $("#returnError2").html('');
            $("#returnError2").html('<p class="text-danger text-center">Invalid number of passengers!</p>');
          } else if (passenger > 200) {
            $("#returnError2").html('');
            $("#returnError2").html('<p class="text-danger text-center">Number of passengers you input exceeds flight capacity of 200 !</p>');
          } else if (passenger > 0 && passenger <= 200) {
            total = prices[flightSrNo] * passenger;
            $("#passengerNames").show();
            // $("#returnError2").html('<p class="confirmation text-center">That will cost you a total of &#8377;' + total + '</p>');
            $("#enterPassengers").fadeOut(300);
            // $("#rePassNo").fadeIn(400).on("click", function() {
            //   $("#rePassNo").hide();
            //   $("#extraStuff").hide();
            //   $("#confirm").hide();
            //   $("#enterPassengers").fadeIn(300);
            //   $("#extraStuff").reset();
            //   $('#Bclass').attr('checked', false);
            // });;
            $("#reFlightNo").hide();
            // $("#extraStuff").show();
            
            $("#confirm").show();
            $(".yourTotal").html("");
            total = prices[flightSrNo] * passenger;
            $(".yourTotal").html("Your total amount: ₹" + total);
            $("#Bclass").click(function() {
              
    if ($("#Bclass").is(':checked')) {
                
                var additionalPrice = 5000 * passenger;
                total = (prices[flightSrNo] * passenger) + additionalPrice;
                $(".yourTotal").html("");
                $(".yourTotal").html("Your total amount: ₹" + total);
              } else {
                var additionalPrice = 5000 * passenger;
                total = total- additionalPrice;
                $(".yourTotal").html("");
                $(".yourTotal").html("Your total amount: ₹" + total);
              }
  
              
              
            });
            $("#getFood").click(function() {
              if ($("#getFood").is(':checked')) {
                var additionalPrice = 850 * passenger;
                total = total + additionalPrice;
                $(".yourTotal").html("");
                $(".yourTotal").html("Your total amount: ₹" + total);
              } else {
                var additionalPrice = 850 * passenger;
                total = total - additionalPrice;
                $(".yourTotal").html("");
                $(".yourTotal").html("Your total amount: ₹" + total);
              }

            });

          } else {
            $("#returnError2").html('');
            $("#returnError2").html('<p class="text-danger text-center">Invalid number of passengers!</p>');
          }
        });

      }
    }
  }
  ///Starting of more flight system:

  $(".morefl").on("click", function() {
    $(".flight").fadeOut(800);
    $(".inputs").fadeOut(800);
    $("#moreflights").show(1000);
  });

  var fromCity = $("#fromCity").val();
  var toCity = $("#toCity").val();
  $("#searchFlight").on("click", function() {
    if ($('#fromCity').val() == '') {
      $("#returnError3").html("");
      $("#returnError3").html('<p class="text-danger text-center">City name cannot be blank</p>');
    } else if ($('#toCity').val() == '') {
      $("#returnError3").html("");
      $("#returnError3").html('<p class="text-danger text-center">City name cannot be blank</p>');
    } else if ($('#enteredName').val() == '') {
      $("#returnError3").html("");
      $("#returnError3").html('<p class="text-danger text-center">Flight Name cannot be blank!</p>');
    } else {
      $("#returnError3").html("");
      fromCity = $("#fromCity").val();
      toCity = $("#toCity").val();
      var newFlightNumber = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
      var newSrno = currentSrNo + 1;
      currentSrNo = newSrno;
      var newFlight = $("#enteredName").val();
      var randomPrice = $("input[name='myRadio']:checked").val();
      console.log(randomPrice);
      if (randomPrice == "int") {
        randomPrice = (Math.floor(Math.random() * (50 - 15 + 1)) + 15) * 1000;
      } else if (randomPrice == "dom") {

        randomPrice = (Math.floor(Math.random() * (12 - 2 + 1)) + 2) * 1000;
      }

      ////PUSHING EVERYTHING!!!

      flsrno.push(newSrno);
      flightNumbers.push(newFlightNumber);
      flnm.push(newFlight);
      flsrc.push(fromCity);
      fldst.push(toCity);
      prices.push(randomPrice);

      //Done pushing :P

      $(".allFlights").append('<div class="row flight"' + newFlightNumber + '" id="' + newFlightNumber + '"><div class="col-sm-2"><h5 class="text-center srno flightNo' + newSrno + '">' + newSrno + '</h5></div><div class="col-sm-2"><h5 class="text-center flno flightNo' + newSrno + '">' + newFlightNumber + '</h5></div><div class="col-sm-2"><h5 class="text-center flnm flightNo' + newSrno + '">' + newFlight + '</h5></div><div class="col-sm-2"><h5 class="text-center flsrc flightNo' + newSrno + '">' + fromCity + '</h5></div><div class="col-sm-2"><h5 class="text-center fldst flightNo' + newSrno + '">' + toCity + '</h5></div><div class="col-sm-2"><h5 class="text-center flprc flightNo' + newSrno + '">₹' + randomPrice + '</h5></div></div>');
      $(".flight").show();
      $(".inputs").show();
      $("#moreflights").hide();
      $("#returnError4").html("");
      $(".flight").click(function() {
        flight = $(this).attr('id');
        mainsystem(flight);
        console.log(flight);
      });
      $("#returnError4").html('<p class="text-info text-center"> 1 flight was found!');
      $("#returnError4").fadeOut(3000);
      $("#returnError4  ").html("");
    }

  });
  //End of more flight system
  
  //Passenger Names:
  for(var i=0;i<passenger;i++){
    $("#passengerNames").append('<div class="row"><div class="col-sm-6"><p class="text-right">Enter Passenger '+(i+1)+'\'s full name : </p></div><div class="col-sm-6"><input id="pNm" class="text-center" type="text" name="pName" placeholder="Full Name eg:Bill Gates"><br></div></div>');
  }
  
  
  
  
  
  
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console