bonus

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

@@ -12,21 +12,21 @@
           <img [src]="food.image" alt="">
           <h4>{{food.name}}</h4>
           <p>Calories: {{food.calories}}</p>
-          <input type="number" placeholder="quantity" [(ngModel)]="food.quantity">
+          <input type="number"  [(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>
+        <div class="d-block">
           <ul *ngFor="let selectedFood of selectedFoods">
-            <li>&nbsp;{{selectedFood.name}} x{{selectedFood.quantity}}</li>
+            <li>{{selectedFood.name}} x{{selectedFood.quantity}}</li>
           </ul>
         </div>
         <div>
-          <p>total calories:</p>
+          <h4>total calories: {{totalCalories}}</h4>
         </div>
       </div>
     </div>

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

@@ -11,7 +11,6 @@ export class FoodListComponent {
   foodToCreate: Food = new Food();
   selectedFoods: Array<Food> = [];
   totalCalories: number = 0;
-
 
   onClickCreateFood(): void {
     this.foods.push(this.foodToCreate);
@@ -20,6 +19,10 @@ export class FoodListComponent {
 
   onClickAddFood(foodItem): void {
     this.selectedFoods.push(foodItem);
+    if (foodItem.quantity == 0) {
+      foodItem.quantity++;
+    }
+    this.totalCalories += (foodItem.calories * foodItem.quantity);
   }
 
 

starter-code/src/styles.css

@@ -3,6 +3,6 @@ img {
     max-width: 100%;
 }
 
-h4 {
+h4, .d-block {
     width: 100%;
 }