From 33ff048f5efb30e767780f24424588af562ea400 Mon Sep 17 00:00:00 2001
From: Jacob <gatelyjm@clarkson.edu>
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.

---
 .../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 ++++++++++
 4 files changed, 108 insertions(+)
 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/recipe-card')

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() {
+  }
+
+}
-- 
cgit v1.1