From 33ff048f5efb30e767780f24424588af562ea400 Mon Sep 17 00:00:00 2001 From: Jacob Date: Tue, 3 Dec 2019 08:58:29 -0500 Subject: Added new recipe card and main page components. Added new files in each of these components for html, css, ts, and spec.ts. HTML and CSS files were updated with code from stackblitz. Apparently this thing also thinks I changed the app.module.ts file, but I do not think I did. --- recipeBuddy/src/app/app.module.ts | 6 +++- .../src/app/main-page/main-page.compomemt.html | 10 +++++++ .../src/app/main-page/main-page.component.css | 29 ++++++++++++++++++ .../src/app/main-page/main-page.component.html | 10 +++++++ .../src/app/main-page/main-page.component.spec.ts | 25 ++++++++++++++++ .../src/app/main-page/main-page.component.ts | 15 ++++++++++ .../src/app/recipe-card/recipe-card.component.css | 35 ++++++++++++++++++++++ .../src/app/recipe-card/recipe-card.component.html | 33 ++++++++++++++++++++ .../app/recipe-card/recipe-card.component.spec.ts | 25 ++++++++++++++++ .../src/app/recipe-card/recipe-card.component.ts | 15 ++++++++++ 10 files changed, 202 insertions(+), 1 deletion(-) create mode 100644 recipeBuddy/src/app/main-page/main-page.compomemt.html create mode 100644 recipeBuddy/src/app/main-page/main-page.component.css create mode 100644 recipeBuddy/src/app/main-page/main-page.component.html create mode 100644 recipeBuddy/src/app/main-page/main-page.component.spec.ts create mode 100644 recipeBuddy/src/app/main-page/main-page.component.ts create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.css create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.html create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.spec.ts create mode 100644 recipeBuddy/src/app/recipe-card/recipe-card.component.ts (limited to 'recipeBuddy/src/app') 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 @@ +

+ Recipe Buddy +

+
+
+ +
+
+
\ 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 @@ +

+ Recipe Buddy +

+
+
+ +
+
+
\ 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; + + 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 @@ + + + Recipe +
+ +
+
+ +
+
+ +
+
+ Photo of recipe + + + + + +
+ + + \ 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; + + 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() { + } + +} -- cgit v1.1