diff options
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() { + } + +} |