summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--recipeBuddy/src/app/app.module.ts4
-rw-r--r--recipeBuddy/src/app/main-page/main-page.compomemt.html10
-rw-r--r--recipeBuddy/src/app/main-page/main-page.component.css29
-rw-r--r--recipeBuddy/src/app/main-page/main-page.component.html10
-rw-r--r--recipeBuddy/src/app/main-page/main-page.component.spec.ts25
-rw-r--r--recipeBuddy/src/app/main-page/main-page.component.ts15
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.css35
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.html33
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts25
-rw-r--r--recipeBuddy/src/app/recipe-card/recipe-card.component.ts15
10 files changed, 201 insertions, 0 deletions
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts
index fd2059c..3dd0f53 100644
--- a/recipeBuddy/src/app/app.module.ts
+++ b/recipeBuddy/src/app/app.module.ts
@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';
+import { MainPageComponent } from './main-page/main-page.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';
@@ -12,6 +14,8 @@ import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
+ MainPageComponent,
+ RecipeCardComponent,
CookPageComponent,
StepCardComponent
],
diff --git a/recipeBuddy/src/app/main-page/main-page.compomemt.html b/recipeBuddy/src/app/main-page/main-page.compomemt.html
new file mode 100644
index 0000000..7a25409
--- /dev/null
+++ b/recipeBuddy/src/app/main-page/main-page.compomemt.html
@@ -0,0 +1,10 @@
+<h1>
+ Recipe Buddy
+</h1>
+<div id="container">
+ <div id="left"><button type="button">Add Recipe</button></div>
+ <div id="right">Search: <input type = "text">
+ <input type = "submit"></div>
+ <div id="center"><button type="button">Shopping Cart</button> </div>
+</div>
+<hr> \ No newline at end of file
diff --git a/recipeBuddy/src/app/main-page/main-page.component.css b/recipeBuddy/src/app/main-page/main-page.component.css
new file mode 100644
index 0000000..4dffa18
--- /dev/null
+++ b/recipeBuddy/src/app/main-page/main-page.component.css
@@ -0,0 +1,29 @@
+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;
+ } \ No newline at end of file
diff --git a/recipeBuddy/src/app/main-page/main-page.component.html b/recipeBuddy/src/app/main-page/main-page.component.html
new file mode 100644
index 0000000..7a25409
--- /dev/null
+++ b/recipeBuddy/src/app/main-page/main-page.component.html
@@ -0,0 +1,10 @@
+<h1>
+ Recipe Buddy
+</h1>
+<div id="container">
+ <div id="left"><button type="button">Add Recipe</button></div>
+ <div id="right">Search: <input type = "text">
+ <input type = "submit"></div>
+ <div id="center"><button type="button">Shopping Cart</button> </div>
+</div>
+<hr> \ No newline at end of file
diff --git a/recipeBuddy/src/app/main-page/main-page.component.spec.ts b/recipeBuddy/src/app/main-page/main-page.component.spec.ts
new file mode 100644
index 0000000..39261a3
--- /dev/null
+++ b/recipeBuddy/src/app/main-page/main-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainPageComponent } from './main-page.component';
+
+describe('MainPageComponent', () => {
+ let component: MainPageComponent;
+ let fixture: ComponentFixture<MainPageComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MainPageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MainPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/recipeBuddy/src/app/main-page/main-page.component.ts b/recipeBuddy/src/app/main-page/main-page.component.ts
new file mode 100644
index 0000000..7fadd1c
--- /dev/null
+++ b/recipeBuddy/src/app/main-page/main-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-main-page',
+ templateUrl: './main-page.component.html',
+ styleUrls: ['./main-page.component.css']
+})
+export class MainPageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
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..04b9bd1
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css
@@ -0,0 +1,35 @@
+.example-card {
+ max-width: 400px;
+}
+.example-header-image {
+ background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+ background-size: cover;
+}
+#like-rating {
+ height: auto;
+ width: auto;
+ max-width: 200px;
+ max-height: 1000px;
+ background-size: contain;
+}
+#like-rating img{
+ width:100%;
+}
+#rating {
+ height: auto;
+ width: auto;
+ max-width: 200px;
+ max-height: 1000px;
+}
+#rating img {
+ width:100%;
+}
+#edit {
+ padding: 10px;
+}
+#cart {
+ padding: 10px;
+}
+#delete {
+ padding: 10px;
+}
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..1c8b278
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html
@@ -0,0 +1,33 @@
+<mat-card class="example-card">
+ <mat-card-header>
+ <mat-card-title>Recipe</mat-card-title>
+ <div id="edit">
+ <input type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg"
+ alt="edit" width="24" height="32">
+ </div>
+ <div id="cart">
+ <input type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32">
+ </div>
+ <div id="delete">
+ <input type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32">
+ </div>
+ </mat-card-header>
+ <img mat-card-image src="https://www.azfinesthomes.com/assets/images/image-not-available.jpg" alt="Photo of recipe">
+ <mat-card-content>
+ </mat-card-content>
+ <mat-card-actions>
+ <!--
+ <div id="like-rating">
+ <img src="https://as1.ftcdn.net/jpg/02/36/32/68/500_F_236326831_AMTN6cLvvhi1ImGYYOGFAaJBcuvWwHyx.jpg" alt="Like rating">
+ </div>
+ <div id="rating">
+ <img src="https://www.judsonsmartliving.org/wp-content/uploads/5-stars.png" alt="5 star rating">
+ </div>
+ -->
+ </mat-card-actions>
+</mat-card>
+
+
+<!-- Copyright 2019 Google LLC. All Rights Reserved.
+ Use of this source code is governed by an MIT-style license that
+ can be found in the LICENSE file at http://angular.io/license --> \ 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..c395a42
--- /dev/null
+++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-recipe-card',
+ templateUrl: './recipe-card.component.html',
+ styleUrls: ['./recipe-card.component.css']
+})
+export class RecipeCardComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}