Done

lab-starter-code/src/app/components/food-list/food-list.component.css

@@ -1,9 +1,15 @@
 
-.container{
+.container-page{
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
+}
+.content{
+    flex-grow: 2;
+    padding-left: 100px;
+    padding-right: 100px;
 }
-h2,h3,h4{
+
+h2,h3,h4,list-food-today{
     display: flex;
     justify-content: center;
 }
@@ -15,11 +21,29 @@ h2,h3,h4{
 }
 img{
     height: 200px;
+    width: 400px;
     padding-right: 20px;
     border-radius: 10%;
 }
 
-.search-container{
+.container-add{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+.container-add-inputs{
+    padding-top: 20px;
+}
+.button-add{
+    margin-top: 20px;
+    display: flex;
+
+}
+
+.list-food{
+    padding-top: 60px;
+}
+
+.list-calories{
     display: flex;
     justify-content: space-around;
 }

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container-page">
   <div>
     <div class="container-food" *ngFor="let food of listFood | searchFood : filterWord">
       <img src="{{food.image}}">
@@ -9,28 +9,45 @@ <h4>{{food.calories}} Calories</h4>
         </div>
         <div>
           <div class="input-group mb-3">
-            <input type="text" [(ngModel)]="food.quantity" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"aria-describedby="button-addon2">
+            <input type="number" [(ngModel)]="food.quantity" class="form-control" placeholder="Quantity" aria-label="Recipient's username"
+              aria-describedby="button-addon2">
             <div class="input-group-append">
-              <button class="btn btn-outline-secondary" type="button" id="button-addon2">Add to List</button>
+              <button (click)="addTolist(food)" class="btn btn-outline-secondary" type="button" id="button-addon2">Add
+                to List</button>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div>
-    <div class="search-container">
-      <div >
-        <h2>Search</h2>
-        <input type="text" [(ngModel)]="filterWord" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
-          aria-describedby="button-addon2">
+  <div class="content">
+    <h2>Search</h2>
+    <input type="text" [(ngModel)]="filterWord" class="form-control" placeholder="Search food" aria-label="Recipient's username"
+      aria-describedby="button-addon2">
+
+    <div class="container-add">
+      <button type="button" (click)="mustShowAddFood()" class="btn btn-secondary">Add New Food</button>
+      <div class="container-add-inputs" *ngIf="mustAddFood">
+        <h5>Name</h5>
+        <input type="text" [(ngModel)]="addFood.name" class="form-control" placeholder="Recipient's username"
+          aria-label="Recipient's username" aria-describedby="button-addon2">
+        <h5>Calories</h5>
+        <input type="number" [(ngModel)]="addFood.calories" class="form-control" placeholder="Recipient's username"
+          aria-label="Recipient's username" aria-describedby="button-addon2">
+        <h5>Image</h5>
+        <input type="text" [(ngModel)]="addFood.image" class="form-control" placeholder="Recipient's username"
+          aria-label="Recipient's username" aria-describedby="button-addon2">
+        <button type="button" (click)="newFood()" class="btn float-right button-add btn-success">Add food</button>
       </div>
-      <button type="button" class="btn btn-secondary">Add new Food</button>  
     </div>
-    <div>
-
+    <div class="list-food">
+      <div class="list-calories">
+        <h2>List Food</h2>
+        <h2>Calories: {{totalCalories}}</h2>
+      </div>
+      <div class="list-food-today" *ngFor="let foodAdded of listFoodAdded">
+        <h4>{{$index}}{{foodAdded}}</h4>
+      </div>
     </div>
-
-
   </div>
 </div>

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

@@ -1,21 +1,64 @@
 import { Component, OnInit } from '@angular/core';
-import  { foods } from '../../foods'
+import { foods } from '../../foods'
 import { FoodModel } from '../../models/food.model'
 @Component({
   selector: 'app-food-list',
   templateUrl: './food-list.component.html',
   styleUrls: ['./food-list.component.css']
 })
 export class FoodListComponent implements OnInit {
-  listFood:Array<FoodModel>
-  filterWord:string
+  listFood: Array<FoodModel>;
+  filterWord: string;
+  addFood: FoodModel;
+  mustAddFood: boolean;
+  listFoodAdded: Array<string>
+  totalCalories: number
+
   constructor() { }
 
   ngOnInit() {
     this.listFood = foods;
     this.filterWord = '';
+    this.addFood = {
+      name: '',
+      calories: 0,
+      image: '',
+      quantity: null
+    }
+    this.mustAddFood = false
+    this.listFoodAdded = []
+    this.totalCalories = 0;
+  }
+
+  mustShowAddFood(): void {
+    this.mustAddFood = !this.mustAddFood
+    this.cleanInputsFood();
+  }
+
+  newFood(): void {
+    this.addFood.image = "../../../assets/food.jpg"
+    this.listFood.push(this.addFood);
+    this.cleanInputsFood();
   }
 
-
+  cleanInputsFood(): void {
+    this.addFood = {
+      name: '',
+      calories: 0,
+      image: '',
+      quantity: 0
+    }
+  }
+  addTolist(food: FoodModel): void {
+    if (food.quantity !== 0 && food.quantity !== null && !this.checkFood(food)) {
+      this.totalCalories = this.totalCalories + ( food.calories * food.quantity);
+      this.listFoodAdded.push(`${food.name} ${food.calories} x ${food.quantity}`);
+    }
+  }
 
+  checkFood(food: FoodModel): boolean {
+    return this.listFoodAdded.some((foodAdded) => foodAdded.includes(food.name));
+  }
 }
+
+

lab-starter-code/src/app/foods.ts

@@ -4,96 +4,96 @@ export const foods: Array<FoodModel> = [
       name: "Pizza",
       calories: 400,
       image: "https://i.imgur.com/eTmWoAN.png",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Salad",
       calories: 150,
       image: "https://i.imgur.com/DupGBz5.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Sweet Potato",
       calories: 120,
       image: "https://i.imgur.com/hGraGyR.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Gnocchi",
       calories: 500,
       image: "https://i.imgur.com/93ekwW0.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Pot Roast",
       calories: 350,
       image: "https://i.imgur.com/WCzJDWz.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Lasagna",
       calories: 750,
       image: "https://i.imgur.com/ClxOafl.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Hamburger",
       calories: 400,
       image: "https://i.imgur.com/LoG39wK.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Pad Thai",
       calories: 475,
       image: "https://i.imgur.com/5ktcSzF.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Almonds",
       calories: 75,
       image: "https://i.imgur.com/JRp4Ksx.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Bacon",
       calories: 175,
       image: "https://i.imgur.com/7GlqDsG.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Hot Dog",
       calories: 275,
       image: "https://i.imgur.com/QqVHdRu.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Chocolate Cake",
       calories: 490,
       image: "https://i.imgur.com/yrgzA9x.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Wheat Bread",
       calories: 175,
       image: "https://i.imgur.com/TsWzMfM.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Orange",
       calories: 85,
       image: "https://i.imgur.com/abKGOcv.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Banana",
       calories: 175,
       image: "https://i.imgur.com/BMdJhu5.jpg",
-      quantity: 0
+      quantity: null
     },
     {
       name: "Yogurt",
       calories: 125,
       image: "https://i.imgur.com/URhdrAm.png",
-      quantity: 0
+      quantity: null
     }
   ];