diff options
3 files changed, 305 insertions, 34 deletions
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.css b/recipeBuddy/src/app/recipe-card/recipe-card.component.css index 04b9bd1..d52f971 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.css +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.css @@ -1,5 +1,37 @@ +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; + } .example-card { max-width: 400px; + float: left; + width:25%; + padding: 0px 35px; } .example-header-image { background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); @@ -27,9 +59,23 @@ #edit { padding: 10px; } +.edit:hover{ + border:solid; +} #cart { padding: 10px; } #delete { padding: 10px; } +#previous { + float:left; +} +.example-card:hover { + border: solid; +} +#card-title { + font-weight: bold; + cursor: pointer; + padding: 10px; +}
\ No newline at end of file diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.html b/recipeBuddy/src/app/recipe-card/recipe-card.component.html index 1c8b278..53573db 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.html +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html @@ -1,33 +1,131 @@ -<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"> +<h1> + Recipe Buddy +</h1> +<div id="container"> + <div id="left"> + <div id="add"> + <input (click)="addPage()" type="image" src="https://image.flaticon.com/icons/png/512/61/61183.png" + alt="add" width="60" height="60"> </div> + </div> + <div id="right">Search: <input type = "text"> + <input (click)="submitSearch()" type = "submit"></div> + <div id="center"> <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> + <input (click)="shoppingCart()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="60" height ="60"> + </div> + </div> +</div> +<hr> +<div id="previous"> + <input (click)="previous()" type="image" src="https://www.pngfind.com/pngs/m/9-95287_double-left-chevron-svg-png-icon-free-download.png" + alt="previous" width="45" height="45"> +</div> +<div id="cardContainer"> + <mat-card class="example-card"> + <mat-card-header> + <div id="card-title"> + <mat-card-title (click)="cookPage1()">{{recipeName1}}</mat-card-title> + </div> + <div id="edit"> + <input (click)="edit1()" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" + alt="edit" width="24" height="32"> + </div> + <div id="cart"> + <input (click)="shoppingCart1()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32"> + </div> + <div id="delete"> + <input (click)="delete1()" 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={{recipeImage1}} alt="Photo of recipe" width="150" height="220"> + <img src={{likeRatingImg1}} alt="like rating" width="50" height="50"> + <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> + <mat-card class="example-card"> + <mat-card-header> + <div id="card-title"> + <mat-card-title (click)="cookPage2()">{{recipeName2}}</mat-card-title> + </div> + <div id="edit"> + <input (click)="edit2()" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" + alt="edit" width="24" height="32"> + </div> + <div id="cart"> + <input (click)="shopoingCart2()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32"> + </div> + <div id="delete"> + <input (click)="delete2()" 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={{recipeImage2}} alt="Photo of recipe" width="150" height="220"> + <img src={{likeRatingImg2}} alt="like rating" width="50" height="50"> + <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> + <mat-card class="example-card"> + <mat-card-header> + <div id="card-title"> + <mat-card-title (click)="clickPage3()">{{recipeName3}}</mat-card-title> + </div> + <div id="edit"> + <input (click)="edit3()" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" + alt="edit" width="24" height="32"> + </div> + <div id="cart"> + <input (click)="shoppingCart3()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32"> + </div> + <div id="delete"> + <input (click)="delete3()" 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={{recipeImage3}} alt="Photo of recipe" width="150" height="220"> + <img src={{likeRatingImg3}} alt="like rating" width="50" height="50"> + <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> +</div> +<div id="next"> + <input (click)="next()" type="image" src="data:image/png;base64,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" + alt="next" width="45" height="45"> +</div> + <!-- 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 + can be found in the LICENSE file at http://angular.io/license --> + + +<!--No image found web address: https://www.azfinesthomes.com/assets/images/image-not-available.jpg -->
\ No newline at end of file diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts index c395a42..e5e3a03 100644 --- a/recipeBuddy/src/app/recipe-card/recipe-card.component.ts +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.ts @@ -1,15 +1,142 @@ -import { Component, OnInit } from '@angular/core'; +import {Component,OnInit} from '@angular/core'; +/** + * @title Card with multiple sections + */ @Component({ - selector: 'app-recipe-card', - templateUrl: './recipe-card.component.html', - styleUrls: ['./recipe-card.component.css'] + selector: 'card-fancy-example', + templateUrl: 'card-fancy-example.html', + styleUrls: ['card-fancy-example.css'], }) -export class RecipeCardComponent implements OnInit { - - constructor() { } +export class CardFancyExample implements OnInit { + recipeNumber: number; + totalRecipeNum: number; + recipeNames: string[] = ["Pizza", "Pancakes", "Pasta", "Chicken", "Eggs", "Sandwich", "Meatballs"]; + recipeName1: string; + recipeName2: string; + recipeName3: string; + recipeImgs: string[] = ["https://images.unsplash.com/photo-1534308983496-4fabb1a015ee?ixlib=rb-1.2.1&w=1000&q=80", + "https://www.mamaknowsglutenfree.com/wp-content/uploads/2019/01/gluten-free-pancakes-rc.jpg", + "https://feedmephoebe.com/wp-content/uploads/2017/10/Homemade-Gluten-Free-Pasta-Recipe-Tuscan-Pici-Spaghetti-Noodles-19.jpg", "https://images.all-free-download.com/images/graphicthumb/chicken_picture_3_167117.jpg", "https://www.photos-public-domain.com/wp-content/uploads/2011/11/fried-eggs.jpg", "https://image.freepik.com/free-photo/sandwich_1339-1108.jpg", "https://www.glutenfreepalate.com/wp-content/uploads/2019/05/Gluten-Free-Meatballs-3.2-720x720.jpg"]; + faceImgs: string[] = ["https://making-the-web.com/sites/default/files/clipart/174377/sad-face-pictures-free-174377-9562118.png","https://cdn.shopify.com/s/files/1/1061/1924/products/Neutral_Face_Emoji_large.png?v=1571606037","https://img.clipartlook.com/smiley-face-clipart-free-happy-face-clip-art-free-250_250.png" ] + likeRatings: number[] = [2,2,0,1,2,0,1] + likeRatingImg1: string; + likeRatingImg2: string; + likeRatingImg3: string; + recipeImage1: string; + recipeImage2: string; + recipeImage3: string; ngOnInit() { + this.recipeNumber = 0; + this.totalRecipeNum = this.recipeNames.length; + this.recipeName1 = this.recipeNames[this.recipeNumber]; + this.recipeName2 = this.recipeNames[this.recipeNumber + 1]; + this.recipeName3 = this.recipeNames[this.recipeNumber + 2]; + this.recipeImage1 = this.recipeImgs[this.recipeNumber]; + this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1]; + this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2]; + this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]]; + this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]]; + this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]]; + } + + addPage() { + /**Code here to open add page */ + } + submitSearch() { + /**Code here to submit search */ + } + shoppingCart() { + /**Code here to open shopping cart with no ingredients */ + } + + previous() { + if(this.recipeNumber > 2) + { + this.recipeNumber = this.recipeNumber - 3; + this.recipeName1 = this.recipeNames[this.recipeNumber]; + this.recipeName2 = this.recipeNames[this.recipeNumber + 1]; + this.recipeName3 = this.recipeNames[this.recipeNumber + 2]; + this.recipeImage1 = this.recipeImgs[this.recipeNumber]; + this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1]; + this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2]; + this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]]; + this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]]; + this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]]; + } else + { + this.recipeNumber = 0; + this.recipeName1 = this.recipeNames[this.recipeNumber]; + this.recipeName2 = this.recipeNames[this.recipeNumber + 1]; + this.recipeName3 = this.recipeNames[this.recipeNumber + 2]; + this.recipeImage1 = this.recipeImgs[this.recipeNumber]; + this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1]; + this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2]; + this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]]; + this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]]; + this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]]; + } + } + next() { + this.recipeNumber = this.recipeNumber + 3; + if(this.recipeNumber + 3 > this.totalRecipeNum) + { + this.recipeNumber = this.totalRecipeNum - 3; + } + this.recipeName1 = this.recipeNames[this.recipeNumber]; + this.recipeName2 = this.recipeNames[this.recipeNumber + 1]; + this.recipeName3 = this.recipeNames[this.recipeNumber + 2]; + this.recipeImage1 = this.recipeImgs[this.recipeNumber]; + this.recipeImage2 = this.recipeImgs[this.recipeNumber + 1]; + this.recipeImage3 = this.recipeImgs[this.recipeNumber + 2]; + this.likeRatingImg1 = this.faceImgs[this.likeRatings[this.recipeNumber]]; + this.likeRatingImg2 = this.faceImgs[this.likeRatings[this.recipeNumber + 1]]; + this.likeRatingImg3 = this.faceImgs[this.likeRatings[this.recipeNumber + 2]]; + } + + cookPage1(){ + /**Code here to go to cook page for recipe in position 1 */ + } + edit1() { + /**Code here to edit recipe in position 1 */ + } + shoppingCart1() { + /**Code here to open shopping cart with ingredients from the recipe in position 1 */ + } + delete1() { + /**Code here to delete recipe in position 1 */ + } + + cookPage2(){ + /**Code here to go to cook page for recipe in position 2 */ + } + edit2() { + /**Code here to edit recipe in position 2 */ + } + shoppingCart2() { + /**Code here to open shopping cart with ingredients from the recipe in position 2 */ + } + delete2() { + /**Code here to delete recipe in position 2 */ + } + + cookPage3(){ + /**Code here to go to cook page for recipe in position 3 */ + } + edit3() { + /**Code here to edit recipe in position 3 */ + } + shoppingCart3() { + /**Code here to open shopping cart with ingredients from the recipe in position 3 */ + } + delete3() { + /**Code here to delete recipe in position 3 */ } } + + +/** 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 |