Done

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

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  title = 'IronNutrition';
 }

starter-code/src/app/app.module.ts

@@ -5,11 +5,15 @@ import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 import { FoodListComponent } from './food-list/food-list.component';
+import { SearchFilterPipe } from './search-filter.pipe';
+import { CaloriesPipe } from './calories.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
     FoodListComponent,
+    SearchFilterPipe,
+    CaloriesPipe,
   ],
   imports: [
     BrowserModule,

starter-code/src/app/calories.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { CaloriesPipe } from './calories.pipe';
+
+describe('CaloriesPipe', () => {
+  it('create an instance', () => {
+    const pipe = new CaloriesPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

starter-code/src/app/calories.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {FoodInterface} from './food.interface';
+
+@Pipe({
+  name: 'caloriesSum'
+})
+export class CaloriesPipe implements PipeTransform {
+
+  transform(foodCart: Array<FoodInterface>, args?: any): number {
+    return foodCart.reduce((total, food) => {
+      return total + (food.calories * food.quantity)
+      }, 0);
+  }
+}

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

@@ -0,0 +1,104 @@
+/* HELPERS */
+.btn {
+    width: fit-content;
+    padding: 0 1rem;
+    margin: 1rem 0;
+    padding: .2rem 1rem;
+    border-radius: .2rem;
+}
+
+/* LAYOUT */
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.section {
+    width: 40vw;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+/* SEARCH BAR */
+.search-bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.search-bar button {
+    background-color: #fff;
+    border: 1px solid #333;
+}
+
+/* ADD FOOD */
+.new-food-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.form-field {
+    width: 15vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: .4rem;
+}
+
+.form-field label {
+    font-weight: bold;
+}
+
+.form-field button {
+    width: inherit;
+    margin: 1rem 0;
+    background-color: green;
+    border: none;
+    border-radius: .2rem;
+    color: #fff;
+    font-weight: bold;
+    padding: .6rem;
+}
+
+/* FOOD LIST */
+.food-list {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+}
+
+.food-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid black;
+    margin-bottom: 2rem;
+}
+
+.food-item-image, .food-item-data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+}
+
+.food-item-data {
+    flex-direction: column;
+}
+
+.food-item-image img{
+    height: 100px;
+    margin-right: 1rem;
+}
+
+.add-to-cart button{
+    background-color: #fff;
+    border: 1px solid #333;
+}

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

@@ -1,3 +1,50 @@
-<p>
-  food-list works!
-</p>
+<div class="container">
+  <div class="section">
+    <div class="search-bar">
+      <input name="search-input" type="text" [(ngModel)]="searchTerm" placeholder="Search...">
+      <button class="btn" (click)="toggleDisplayForm()">+ Add new food</button>
+    </div>
+
+    <div *ngIf="formVisible" class="new-food-form">
+      <div class="form-field">
+        <label for="new-food-name">Name:</label>
+        <input [(ngModel)]="newFood.name" name="new-food-name" type="text">
+      </div>
+      <div class="form-field">
+        <label for="new-food-calories">Calories:</label>
+        <input [(ngModel)]="newFood.calories" name="new-food-calories" type="number" min="0">
+      </div>
+      <div class="form-field">
+        <label for="new-food-image">Image:</label>
+        <input [(ngModel)]="newFood.image" name="new-food-image" type="text">
+      </div>
+      <div class="form-field">
+        <button (click)="addNewFood()">Add to list</button>
+      </div>
+    </div>
+
+    <ul class="food-list">
+      <li class="food-item" *ngFor="let food of foods | searchFilter : searchTerm">
+        <div class="food-item-image">
+          <img [src]="food.image" [alt]="food.name">
+        </div>
+        <div class="food-item-data">
+          <h3>{{food.name}} <span>{{food.calories}} kcal</span></h3>
+          <div class="add-to-cart">
+            <button class="btn" (click)="addFoodToCart(food)">+</button>
+            <input type="number" [(ngModel)]="food.quantity">
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="section">
+    <h2>Today's Foods {{foodCart | caloriesSum}} kcal</h2>
+    <ul class="shop-cart-list">
+      <li *ngFor="let food of foodCart">
+        {{food.name}} x{{food.quantity}}
+      </li>
+    </ul>
+  </div>
+</div>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {FoodInterface} from '../food.interface';
 import foods from '../foods';
 
 @Component({
@@ -7,10 +8,45 @@ import foods from '../foods';
   styleUrls: ['./food-list.component.css']
 })
 export class FoodListComponent implements OnInit {
-
-  constructor() { }
+  foods: Array<FoodInterface>;
+  origFoods: Array<FoodInterface>;
+  emptyNewFood: FoodInterface = {
+    name: "",
+    calories: 0,
+    image: "",
+    quantity: 1
+  };
+  newFood: FoodInterface;
+  foodCart: Array<FoodInterface>;
+  formVisible: boolean = false;
 
   ngOnInit() {
+    this.foods = foods;
+    this.foods.map((food) => {food.quantity = 1});
+    this.origFoods = this.foods;
+    this.newFood = this.emptyNewFood;
+    this.foodCart = [];
+  }
+
+  toggleDisplayForm() {
+    this.formVisible = !this.formVisible;
   }
 
+  addNewFood() {
+    this.foods.unshift(this.newFood);
+    this.formVisible = false;
+    this.newFood = this.emptyNewFood;
+  }
+
+  addFoodToCart(food: FoodInterface) {
+    if(food.quantity > 0){
+      let alreadyInList = this.foodCart.find(f => f.name === food.name);
+      if(alreadyInList){
+        alreadyInList.quantity += food.quantity;
+        this.foodCart = [...this.foodCart];
+      } else {
+        this.foodCart = [...this.foodCart, {...food}];
+      }
+    }
+  }
 }

starter-code/src/app/food.interface.ts

@@ -0,0 +1,6 @@
+export interface FoodInterface {
+    name: string;
+    calories: number;
+    image: string;
+    quantity: number;
+};

starter-code/src/app/foods.ts

@@ -1,4 +1,6 @@
-const foods: Object[] = [
+import {FoodInterface} from './food.interface';
+
+const foods: FoodInterface[] = [
   {
     name: "Pizza",
     calories: 400,

starter-code/src/app/search-filter.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SearchFilterPipe } from './search-filter.pipe';
+
+describe('SearchFilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SearchFilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

starter-code/src/app/search-filter.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {FoodInterface} from './food.interface';
+
+@Pipe({
+  name: 'searchFilter'
+})
+export class SearchFilterPipe implements PipeTransform {
+  transform(foods: FoodInterface[], searchTerm: string): FoodInterface[] {
+    if(!searchTerm || searchTerm === "") return foods;
+    searchTerm = searchTerm.toLowerCase();
+    return foods.filter((food) => food.name.toLowerCase().includes(searchTerm))
+  }
+}