9 files changed, 234 insertions, 5 deletions
diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts
index bb7c96e..12a8f58 100644
--- a/recipeBuddy/src/app/app-routing.module.ts
+++ b/recipeBuddy/src/app/app-routing.module.ts
@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { CookPageComponent } from './cook-page/cook-page.component';
+import { RecipeCardComponent } from './recipe-card/recipe-card.component';
 import { AddRecipeComponent } from './add-recipe/add-recipe.component';
 
 const routes: Routes = [
-	{ path: '', redirectTo: '/cook', pathMatch: 'full' },
+	{ path: '', redirectTo: '/main', pathMatch: 'full' },
 	{ path: 'cook', component: CookPageComponent },
+	{ path: 'main', component: RecipeCardComponent },
 	{ path: 'add', component: AddRecipeComponent }
 ];
 
diff --git a/recipeBuddy/src/app/app.component.css b/recipeBuddy/src/app/app.component.css
index c62f266..fa69a91 100644
--- a/recipeBuddy/src/app/app.component.css
+++ b/recipeBuddy/src/app/app.component.css
@@ -2,6 +2,7 @@
 h1 {
   font-size: 1.2em;
   margin-bottom: 0;
+  text-align: center;
 }
 h2 {
   font-size: 2em;
@@ -26,3 +27,12 @@ nav a:hover {
 nav a.active {
   color: #039be5;
 }
+#left{
+  float:left;width:100px;
+  }
+#right{
+  float:right;width:175px;
+  }
+#center{
+  margin:0 auto;width:100px;
+  }
+\ No newline at end of file
diff --git a/recipeBuddy/src/app/app.component.html b/recipeBuddy/src/app/app.component.html
index 014c6b0..18b63ba 100644
--- a/recipeBuddy/src/app/app.component.html
+++ b/recipeBuddy/src/app/app.component.html
@@ -1,2 +1,20 @@
-<h1>{{title}}</h1>
+<h1>
+  Recipe Buddy
+</h1>
+<div id="container">
+  <div id="left">
+    <div id="add">
+      <input (click)="addPage()" type="image" src="https://image.flaticon.com/icons/png/512/61/61183.png"
+      alt="add" width="60" height="60">
+    </div>
+  </div>
+  <div id="right">Search: <input type = "text"> 
+  <input (click)="submitSearch()" type = "submit"></div>
+  <div id="center">
+    <div id="cart">
+      <input (click)="shoppingCart()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="60" height ="60">
+    </div> 
+  </div>
+</div>
+<hr>
 <router-outlet></router-outlet>
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts
index 359254e..71f236f 100644
--- a/recipeBuddy/src/app/app.module.ts
+++ b/recipeBuddy/src/app/app.module.ts
@@ -4,12 +4,16 @@ import { FormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material';
 
 import { AppComponent } from './app.component';
+import { RecipeCardComponent } from './recipe-card/recipe-card.component';
 import { CookPageComponent} from './cook-page/cook-page.component';
-import { StepCardComponent } from './cook-page/step-card/step-card.component';
 
 import { AppRoutingModule } from './app-routing.module';
 
-import { HttpClientModule } from '@angular/common/http';
+import {HttpClientModule } from '@angular/common/http';
+
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ScrollDispatchModule} from '@angular/cdk/scrolling';
 import { AddRecipeComponent } from './add-recipe/add-recipe.component';
 
 import { ReactiveFormsModule } from '@angular/forms';
@@ -23,8 +27,8 @@ import { MatButtonModule } from '@angular/material/button';
 @NgModule({
   declarations: [
     AppComponent,
+    RecipeCardComponent,
     CookPageComponent,
-    StepCardComponent,
     AddRecipeComponent
   ],
   imports: [
@@ -32,6 +36,8 @@ import { MatButtonModule } from '@angular/material/button';
     AppRoutingModule,
     MatCardModule,
     HttpClientModule,
+	ScrollingModule,
+	ScrollDispatchModule,
     ReactiveFormsModule,
     NoopAnimationsModule,
     MatInputModule,
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css
new file mode 100644
index 0000000..7b0fd3b
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css
@@ -0,0 +1,73 @@
+.example-viewport {
+     height: 500px;
+     width: 100%;
+     display: flex;
+	 margin-left: auto;
+	 margin-right: auto;
+}
+p {
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+h1 {
+  text-align: center;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+h2 
+{
+font-family:'Times New Roman', Times, serif;
+}
+button{
+  background-color: #D87620;
+  color: white;
+  padding : 15px 25px;
+  cursor: pointer;
+}
+#container{
+  width:100%;
+  }
+#left{
+  float:left;width:100px;
+  }
+#right{
+  float:right;width:175px;
+  }
+#center{
+  margin:0 auto;width:100px;
+  }
+.example-card {
+  float: left;
+  width: 100%;
+  margin: 10px;
+}
+#edit {
+  padding: 10px;
+}
+.edit:hover{
+  border:solid;
+}
+#cart {
+  padding: 10px;
+}
+#delete {
+  padding: 10px;
+}
+.example-card:hover {
+  border: solid;
+}
+#card-title {
+  font-weight: bold;
+  cursor: pointer;
+  padding: 10px;
+}
+#imgContainer {
+	padding:10px;
+	text-align:center;
+}
+#ratingContainer {
+	padding:10px;
+}
+#cardContainer {
+	width: 35%;
+	padding: 5%;
+	float: left;
+}
+\ No newline at end of file
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.html b/recipeBuddy/src/app/recipe-card/recipe-card.component.html
new file mode 100644
index 0000000..7a9f8d4
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html
@@ -0,0 +1,34 @@
+<cdk-virtual-scroll-viewport [itemSize]="1" class="example-viewport">
+<div *cdkVirtualFor="let recipe of recipes" class="example-test">
+<div id="cardContainer">
+  <mat-card class="example-card">
+    <mat-card-header>
+      <div id="card-title">
+        <mat-card-title>{{recipe.name}}</mat-card-title>
+      </div>
+      <div id="edit">
+        <input (click)="edit(getId(recipe))" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg"
+        alt="edit" width="24" height="32">
+      </div>
+      <div id="cart">
+        <input (click)="shoppingCart()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32">
+      </div>
+      <div id="delete">
+        <input (click)="delete(getId(recipe))" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32">
+      </div>
+    </mat-card-header>
+	<div *ngIf="recipe.photos.length > 1000; else elseBlock" id="imgContainer">
+    <img mat-card-image src={{recipe.photos[0]}} alt="Photo of recipe">
+	</div>
+	<ng-template #elseBlock>
+	<img mat-card-image src="https://seeklogo.net/wp-content/themes/seeklogo-2017/images/not-available.jpg" alt="No image available" width="150" height="220">
+	</ng-template>
+	<div id="ratingContainer">
+	<p>Rating: {{recipe.rating}}</p>
+	</div>
+  </mat-card>
+  </div>
+ </div>
+</cdk-virtual-scroll-viewport>
+
+<!--No image found web address: https://www.azfinesthomes.com/assets/images/image-not-available.jpg -->
+\ No newline at end of file
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts
new file mode 100644
index 0000000..ea6f5b7
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecipeCardComponent } from './recipe-card.component';
+
+describe('RecipeCardComponent', () => {
+  let component: RecipeCardComponent;
+  let fixture: ComponentFixture<RecipeCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RecipeCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecipeCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts
new file mode 100644
index 0000000..a9a4618
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts
@@ -0,0 +1,60 @@
+import {Component,OnInit} from '@angular/core';
+import{BackendService} from '../REST_service/backend.service';
+import{Recipe} from '../DataModels/recipe';
+
+/**
+ * @title Card with multiple sections
+ */
+@Component({
+  selector: 'RecipeCardComponent',
+  templateUrl: 'recipe-card.component.html',
+  styleUrls: ['recipe-card.component.css']
+})
+export class RecipeCardComponent implements OnInit {
+	
+	constructor(private restService: BackendService) {}
+	
+	
+	recipes: Recipe[] = []; //array of recipe objects
+
+  ngOnInit() {
+	  this.restService.getRecipes().subscribe(
+	  res => {
+		  var i: number;
+		  for(i = 0; i < res.length; i++) {
+			  this.restService.getRecipe(res[i]).subscribe(
+				res2 => {
+					this.recipes = [...this.recipes, res2]
+					console.log(res2.photos)
+				}, err => {/*Deal with error*/}, () => {/*Code for complete observable*/}
+				
+     );
+    }
+  },
+  err => {
+//Deal with error
+  },
+ () => {
+//Complete observable
+  }
+);
+  }
+  
+  shoppingCart() {
+    /**Code here to open shopping cart */
+  }
+  
+  cookPage(id){
+    /**Code here to go to cook page for recipe with id */
+	//this.recipes[id];
+  }
+  
+  edit(id) {
+    /**Code here to edit recipe with id */
+  }
+
+  delete(id) {
+    /**Code here to delete recipe with id */
+  }
+}
+  
+\ No newline at end of file
diff --git a/recipeBuddy/src/styles.css b/recipeBuddy/src/styles.css
index 7e7239a..c7564ff 100644
--- a/recipeBuddy/src/styles.css
+++ b/recipeBuddy/src/styles.css
@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }