(save) Flights are dynamically added to page, but they're all on top of each other.

Author: adamjaffeback

public/index.html

@@ -45,6 +45,36 @@ <h3>Flights by Price:</h3>
           <div class="flightDuration">2h 45mins</div>
         </div>
       </div>
+
+      <div class="flight">
+        <div class="price">$400</div>
+        <div class="airline">Airoflot</div>
+        <div class="flightInfo">
+          <div class="flightNumber">MH 234</div>
+          <div class="flightTimes">4:00p -> 8:00a</div>
+          <div class="flightDuration">2h 45mins</div>
+        </div>
+      </div>
+
+      <div class="flight">
+        <div class="price">$400</div>
+        <div class="airline">Airoflot</div>
+        <div class="flightInfo">
+          <div class="flightNumber">MH 234</div>
+          <div class="flightTimes">4:00p -> 8:00a</div>
+          <div class="flightDuration">2h 45mins</div>
+        </div>
+      </div>
+
+      <div class="flight">
+        <div class="price">$400</div>
+        <div class="airline">Airoflot</div>
+        <div class="flightInfo">
+          <div class="flightNumber">MH 234</div>
+          <div class="flightTimes">4:00p -> 8:00a</div>
+          <div class="flightDuration">2h 45mins</div>
+        </div>
+      </div>
     </div>
   </div>
 </body>

public/javascripts/flights.js

@@ -0,0 +1,29 @@
+var $ = require( 'jquery' );
+var moment = require( 'moment' );
+
+exports.addFlight = function( targetSelector, flight ) {
+  // creates this:
+
+  // <div class="flight">
+  //   <div class="price">$400</div>
+  //   <div class="airline">Airoflot</div>
+  //   <div class="flightInfo">
+  //     <div class="flightNumber">MH 234</div>
+  //     <div class="flightTimes">4:00p -> 8:00a</div>
+  //     <div class="flightDuration">2h 45mins</div>
+  //   </div>
+  // </div>
+
+  var flightEl = $( '<div></div>', { class: 'flight' } );
+  var newEl = $( '<div class="price">$' + flight.price.toFixed( 0 ) +  '</div>' );
+  flightEl.append( newEl );
+  newEl = $( '<div class="airline">' + flight.airline.name +  '</div>' );
+  flightEl.append( newEl );
+  newEl = $( '<div></div>', { class: 'flightInfo' } );
+  newEl.append( $( '<div class="flightNumber">' +  flight.airline.code + ' ' + flight.flightNum + '</div>' ) );
+  newEl.append( $( '<div class="flightTimes">' + moment( flight.start.dateTime ).format( 'h:mm a' ) + ' -> ' + moment( flight.finish.dateTime ).format( 'h:mm a' ) + '</div>' ) );
+  newEl.append( $( '<div class="flightDuration">' + flight.durationMin + ' mins</div>' ) );
+  flightEl.append( newEl );
+
+  $( targetSelector ).append( flightEl );
+};

public/javascripts/priceMatrix.js

@@ -1,5 +1,6 @@
 var moment = require( 'moment' );
 var $ = require( 'jquery' );
+var flightHelper = require( './flights.js' );
 
 var addPrice = function( airlineCode, price ) {
   $( '#' + airlineCode ).append( '<td class="price">$' + price + '</td>' );
@@ -59,6 +60,8 @@ exports.createMatrix = function( flightOptions ) {
       if ( flight.price < cheapestFlight.price ) {
         cheapestFlight = flight;
       }
+
+      flightHelper.addFlight( '#flights', flight );
     }
 
     addPrice( currentAirlines.code, cheapestFlight.price.toFixed( 0 ) );

public/stylesheets/style.css

@@ -56,6 +56,7 @@ tr:nth-child( even ) {
   display: flex;
   flex-grow: 1;
   width: 100%;
+  flex-direction: column;
 }
 
 .flight {