finish Project basic

project/src/app/app.component.html

@@ -1,7 +1,9 @@
+<app-header></app-header>
 <div class="container">
   <div class="row">
     <div class="col-md-12">
-      <h2>I'm working!</h2>
+      <app-recipes></app-recipes>
+      <app-shopping-list></app-shopping-list>
     </div>
   </div>
 </div>

project/src/app/app.module.ts

@@ -4,9 +4,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { RecipesComponent } from './recipes/recipes.component';
-import { RecipesListComponent } from './recipes/recipes-list/recipes-list.component';
-import { RecipesDetailComponent } from './recipes/recipes-detail/recipes-detail.component';
-import { RecipesItemComponent } from './recipes/recipe-list/recipes-item/recipes-item.component';
 import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
 import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
 import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
@@ -18,9 +15,6 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed
     AppComponent,
     HeaderComponent,
     RecipesComponent,
-    RecipesListComponent,
-    RecipesDetailComponent,
-    RecipesItemComponent,
     RecipeListComponent,
     RecipeDetailComponent,
     RecipeItemComponent,

project/src/app/header/header.component.html

@@ -1 +1,22 @@
-<p>header works!</p>
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a href="#" class="navbar-brand">Recipe Book</a>
+        </div>
+        <div class="navbar-default">
+            <ul class="nav navbar-nav">
+                <li><a href="#">Recipe</a></li>
+                <li><a href="#">Shopping List</a></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" role="button">Manage<span Class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li><a>/li>href="#">Saving data</a></li>
+                        <li><a href="#">Fetching data</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>

project/src/app/recipes/recipe-detail/recipe-detail.component.html

@@ -1 +1,36 @@
-<p>recipe-detail works!</p>
+<div class="row">
+  <div class="col-xs-12">
+    <img src="" alt="" class="img-responsive">
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    <h1>Recipe Name</h1>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    <div class="btn-group">
+      <button
+        type="button"
+        class="btn btn-primary dropdown-toggle">
+        Manage Recipe <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu">
+        <li><a href="#">To Shopping List</a></li>
+        <li><a href="#">Edit Recipe</a></li>
+        <li><a href="#">Delete Recipe</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    Description
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    Ingredients
+  </div>
+</div>

project/src/app/recipes/recipe-detail/recipe-detail.component.ts

@@ -9,7 +9,7 @@ export class RecipeDetailComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit() {
   }
 
 }

project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html

@@ -1 +1,3 @@
-<p>recipe-item works!</p>
+<p>
+  recipe-item works!
+</p>

project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts

@@ -9,7 +9,7 @@ export class RecipeItemComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit() {
   }
 
 }

project/src/app/recipes/recipe-list/recipe-list.component.html

@@ -1 +1,28 @@
-<p>recipe-list works!</p>
+<div class="row">
+  <div class="col-xs-12">
+    <button class="btn btn-success">New Recipe</button>
+  </div>
+</div>
+<hr>
+<div class="row">
+  <div class="col-xs-12">
+    <a
+      href="#"
+      class="list-group-item clearfix"
+      *ngFor="let recipe of recipes">
+      <div class="pull-left">
+        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
+        <p class="list-group-item-text">{{ recipe.description }}</p>
+      </div>
+      <span class="pull-right">
+        <img
+          [src]="recipe.imagePath"
+          alt="{{ recipe.name }}"
+          class="img-responsive"
+          style="max-height: 50px;">
+      </span>
+    </a>
+    <app-recipe-item></app-recipe-item>
+  </div>
+</div>
+

project/src/app/recipes/recipe-list/recipe-list.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
+import { Recipe } from '../recipe.model';
+
 @Component({
   selector: 'app-recipe-list',
   templateUrl: './recipe-list.component.html',
   styleUrls: ['./recipe-list.component.css']
 })
 export class RecipeListComponent implements OnInit {
+  recipes: Recipe[] = [
+    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
+    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
+  ];
 
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit() {
   }
 
 }

project/src/app/recipes/recipe.model.ts

@@ -0,0 +1,11 @@
+export class Recipe {
+  public name: string;
+  public description: string;
+  public imagePath: string;
+
+  constructor(name: string, desc: string, imagePath: string) {
+    this.name = name;
+    this.description = desc;
+    this.imagePath = imagePath;
+  }
+}

project/src/app/recipes/recipes.component.html

@@ -1 +1,8 @@
-<p>recipes works!</p>
+<div class="row">
+  <div class="col-md-5">
+    <app-recipe-list></app-recipe-list>
+  </div>
+  <div class="col-md-7">
+    <app-recipe-detail></app-recipe-detail>
+  </div>
+</div>

project/src/app/recipes/recipes.component.ts

@@ -9,7 +9,7 @@ export class RecipesComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit() {
   }
 
 }

project/src/app/shared/ingredient.model.ts

@@ -0,0 +1,4 @@
+export class Ingredient {
+  // short form that sets the property and asign the value to them
+  constructor(public name: string, public amount: number) {}
+}

project/src/app/shopping-list/shopping-edit/shopping-edit.component.html

@@ -1 +1,23 @@
-<p>shopping-edit works!</p>
+<div class="row">
+  <div class="col-xs-12">
+    <form>
+      <div class="row">
+        <div class="col-sm-5 form-group">
+          <label for="name">Name</label>
+          <input type="text" id="name" class="form-control">
+        </div>
+        <div class="col-sm-2 form-group">
+          <label for="amount">Amount</label>
+          <input type="number" id="amount" class="form-control">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12">
+          <button class="btn btn-success" type="submit">Add</button>
+          <button class="btn btn-danger" type="button">Delete</button>
+          <button class="btn btn-primary" type="button">Clear</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

project/src/app/shopping-list/shopping-edit/shopping-edit.component.ts

@@ -9,7 +9,7 @@ export class ShoppingEditComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit() {
   }
 
 }

project/src/app/shopping-list/shopping-list.component.html

@@ -1 +1,15 @@
-<p>shopping-list works!</p>
+<div class="row">
+  <div class="col-xs-10">
+    <app-shopping-edit></app-shopping-edit>
+    <hr>
+    <ul class="list-group">
+      <a
+        class="list-group-item"
+        style="cursor: pointer"
+        *ngFor="let ingredient of ingredients"
+      >
+        {{ ingredient.name }} ({{ ingredient.amount }})
+      </a>
+    </ul>
+  </div>
+</div>

project/src/app/shopping-list/shopping-list.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
+import { Ingredient } from '../shared/ingredient.model';
+
 @Component({
   selector: 'app-shopping-list',
   templateUrl: './shopping-list.component.html',
   styleUrls: ['./shopping-list.component.css']
 })
 export class ShoppingListComponent implements OnInit {
+  ingredients: Ingredient[] = [
+    new Ingredient('Apples', 5),
+    new Ingredient('Tomatoes', 10),
+  ];
 
   constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit() {
   }
 
 }