iteration 4 and half of bonus

starter-code/src/app/food-list/food-list.component.html

@@ -6,10 +6,29 @@
     <input type="text" class="form-control" placeholder="Search by title..." name="searchPattern" [(ngModel)]="searchPattern">
   </div>
   <div class="row">
-    <div *ngFor="let food of foods | foodFinder:searchPattern" class="col-4">
-      <img [src]="food.image" alt="">
-      <h4>{{food.name}}</h4>
-      <p>Calories: {{food.calories}}</p>
+    <div class="col-8">
+      <div class="row">
+        <div *ngFor="let food of foods | foodFinder:searchPattern" class="col-6">
+          <img [src]="food.image" alt="">
+          <h4>{{food.name}}</h4>
+          <p>Calories: {{food.calories}}</p>
+          <input type="number" placeholder="quantity" [(ngModel)]="food.quantity">
+          <button (click)="onClickAddFood(food)">Add</button>
+        </div>
+      </div>
+    </div>
+    <div class="col-4">
+      <div class="row">
+        <h4>Food for today:</h4>
+        <div>
+          <ul *ngFor="let selectedFood of selectedFoods">
+            <li>&nbsp;{{selectedFood.name}} x{{selectedFood.quantity}}</li>
+          </ul>
+        </div>
+        <div>
+          <p>total calories:</p>
+        </div>
+      </div>
     </div>
   </div>
 

starter-code/src/app/food-list/food-list.component.ts

@@ -9,9 +9,18 @@ import foods from '../foods';
 export class FoodListComponent {
   foods: Array<Food> = foods;
   foodToCreate: Food = new Food();
+  selectedFoods: Array<Food> = [];
+  totalCalories: number = 0;
+
 
   onClickCreateFood(): void {
     this.foods.push(this.foodToCreate);
     this.foodToCreate = new Food();
   }
+
+  onClickAddFood(foodItem): void {
+    this.selectedFoods.push(foodItem);
+  }
+
+
 }

starter-code/src/styles.css

@@ -1,4 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 img {
     max-width: 100%;
+}
+
+h4 {
+    width: 100%;
 }