[webptmad0418] Adrián Moreno

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

@@ -0,0 +1,5 @@
+.food-list-wrapper {
+  width: 50%;
+  background-color: antiquewhite;
+  padding: 5em;
+}

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

@@ -1,4 +1,3 @@
-<h1>
-  {{title}}
-</h1>
-<app-food-list></app-food-list>
+<div class="food-list-wrapper">
+  <app-food-list></app-food-list>
+</div>

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!';
+    
 }

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

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import { FoodListComponent } from './food-list/food-list.component';
+import { FoodListComponent } from './components/food-list/food-list.component';
 
 @NgModule({
   declarations: [

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

@@ -0,0 +1,33 @@
+.data {
+  margin: 0 0 2em 0;
+  padding: 1em;
+  color: #757575;
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+.data img {
+  width: 100%;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  width: 40%;
+  text-align: center;
+}
+
+.search-wrapper {
+  margin: 0 0 2em 0;
+}
+
+#add-new-food-a {
+  text-decoration: none;
+  color: black;
+  cursor: pointer;
+}

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

@@ -0,0 +1,33 @@
+<div class="search-wrapper">
+  <label for="search-field">Search food</label><br>
+  <hr>
+  <input id="search-field" type="text" placeholder="Search">
+</div>
+
+
+<a href="javascript: void(0);" (click)="addNewFoodPressed()" id="add-new-food-a">Add new food</a><br>
+<hr>
+
+<div *ngIf="newFoodVisible" class="search-wrapper">
+  <input id="food-name" type="text" placeholder="Name" [(ngModel)]="newFood.name"><br>
+  <input id="food-calories" type="text" placeholder="Calories" [(ngModel)]="newFood.calories"><br>
+  <input id="food-img" type="text" placeholder="Image URL" [(ngModel)]="newFood.image"><br>  
+  <button (click)="addNewFood()">Add food</button>
+</div>
+
+  <ul class="foods">
+    <li *ngFor="let food of foodList" class="food">
+      <div class="data">
+        <img src="{{food.image}}">
+        <h4>{{food.name}} <small>{{food.calories}}</small></h4>
+        <button (click)="addQuantity(food)">+</button><input type="number" [(ngModel)]="food.quantity">
+      </div>
+    </li>
+  </ul>
+
+  <!-- <div>
+    <p>{{newFood.name}}</p>
+    <p>{{newFood.calories}}</p>
+    <img src="{{newFood.image}}">
+    <p>{{newFood.quantity}}</p>
+  </div> -->

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import foods from '../../../shared/data/foods';
+import { Food } from '../../models/food.model'
+
+@Component({
+  selector: 'app-food-list',
+  templateUrl: './food-list.component.html',
+  styleUrls: ['./food-list.component.css']
+})
+export class FoodListComponent {
+  foodList: Array<Food> = foods;
+  newFood: Food = {
+    name: '',
+    calories: 0,
+    image: '',
+    quantity: 0
+  }
+  newFoodVisible: Boolean = false;
+
+  addNewFoodPressed(): void {
+    this.newFoodVisible = !this.newFoodVisible;
+  }
+
+  addNewFood() {
+    this.foodList.push(this.newFood);
+
+  }
+}

starter-code/src/app/models/food.model.ts

@@ -0,0 +1,6 @@
+export class Food {
+  name: String;
+  calories: Number;
+  image: String;  
+  quantity: Number;
+}

starter-code/src/shared/data/foods.ts

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

starter-code/src/styles.css

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+  margin: 0;
+  padding: 0;
+}