summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app
diff options
context:
space:
mode:
authorJacob <gatelyjm@clarkson.edu>2019-12-03 08:58:29 -0500
committerTucker Evans <tuckerevans24@gmail.com>2019-12-07 15:02:44 -0500
commit33ff048f5efb30e767780f24424588af562ea400 (patch)
treee37e66274d43269bc4d606aa325477ffa37aca67 /recipeBuddy/src/app
parent445816bc374be098156b33e2c7051091f391786f (diff)
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.
Diffstat (limited to 'recipeBuddy/src/app')
-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() {
+ }
+
+}