summaryrefslogtreecommitdiff
path: root/recipeBuddy
diff options
context:
space:
mode:
Diffstat (limited to 'recipeBuddy')
-rw-r--r--recipeBuddy/src/app/app.module.ts6
-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, 202 insertions, 1 deletions
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts
index f657163..8467740 100644
--- a/recipeBuddy/src/app/app.module.ts
+++ b/recipeBuddy/src/app/app.module.ts
@@ -2,10 +2,14 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
+import { MainPageComponent } from './main-page/main-page.component';
+import { RecipeCardComponent } from './recipe-card/recipe-card.component';
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ MainPageComponent,
+ RecipeCardComponent
],
imports: [
BrowserModule
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() {
+ }
+
+}