Activity 33: Angular Recipe Grid

With this project I use this interface or model, this is based on the provided figma design. name for the menu name and the img is for the food image. then ID is their unique identifier.

// recipe.model.ts
export interface Recipe { 
  id: number;
  name: string;
  img: string;
}

I created a list of object on my recipe.service.ts the purpose of this is to be able to use the list to other components. All I need to to is to inject the service to those components. but in this case its unnecessary. make sure that the id name and img is same with the one that you put in the model.

//recipe.service.ts

import { Injectable } from '@angular/core';
import { Recipe } from './recipe.model';

@Injectable({
  providedIn: 'root',
})
export class RecipeService {
  recipeList: Recipe[] = [
    {
      id: 1,
      name: 'Choc-Crackle Peanut Butter Cups',
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3aE_ZjNTQgJeEiApzwgUzzvM5L_r8oXDTwA&s',
    },
    {
      id: 2,
      name: 'Pancakes1',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 3,
      name: 'Pancakes2',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 4,
      name: 'Lemon Eton Mess',
      img: 'https://img.taste.com.au/UOkNsfUb/w720-h480-cfill-q80/taste/2020/08/5-ingredient-lemon-eton-mess-164715-2.jpg',
    },
    {
      id: 5,
      name: 'Choc-Crackle Peanut Butter Cups',
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3aE_ZjNTQgJeEiApzwgUzzvM5L_r8oXDTwA&s',
    },
    {
      id: 6,
      name: 'Pancakes',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 7,
      name: 'Lemon Eton Mess',
      img: 'https://img.taste.com.au/UOkNsfUb/w720-h480-cfill-q80/taste/2020/08/5-ingredient-lemon-eton-mess-164715-2.jpg',
    },
    {
      id: 8,
      name: 'Pancakes',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 9,
      name: 'Choc-Crackle Peanut Butter Cups',
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3aE_ZjNTQgJeEiApzwgUzzvM5L_r8oXDTwA&s',
    },
    {
      id: 10,
      name: 'Lemon Eton Mess',
      img: 'https://img.taste.com.au/UOkNsfUb/w720-h480-cfill-q80/taste/2020/08/5-ingredient-lemon-eton-mess-164715-2.jpg',
    },
  ];

  getRecipe() {
    return this.recipeList;
  }
}

in this component I just inject the service that I created so that I can have an access to my list of object from the services and called the getRecipe method that I created.

// recipe.compoent.ts
import { Component } from '@angular/core';
import { Recipe } from './recipe.model';
import { RecipeService } from './recipe.service';
@Component({
  selector: 'app-recipe',
  templateUrl: './recipe.component.html',
  styleUrl: './recipe.component.css',
})
export class RecipeComponent {
  recipies: Recipe[] = [];

  constructor(private recipeService: RecipeService) {}

  ngOnInit(): void {
    this.recipies = this.recipeService.getRecipe();
  }
}

using *ngFor to loop the contents of my list of object and calling it to show the output on the webpage.

<div class="wrapper">
  <div class="wrapper__content">
    <div *ngFor="let rec of recipies" class="wrapper__content-card">
      <img [src]="rec.img" class="card__image" />
      <div class="card__content">
        <h3 class="card__title">{{ rec.name }}</h3>
      </div>
      <div class="card__btn">
        <button class="btn btn-primary">Ingredients</button> 
        <button class="btn btn-secondary">Trending!</button>
      </div>
    </div>
  </div>
</div>

this is the css file for the recipe.component.css

/* recipe.component.css  */

* { 
  font-family: "inter", Arial, Helvetica, sans-serif;
}
.wrapper { 
  min-height: 100vh;
  padding: 3rem;
}

.wrapper__content { 
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;  
  align-items: center;
  justify-content: center;
}

.wrapper__content-card { 
  width: 300px;
  height: 350px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;

  box-shadow: 2px 10px 24px -6px rgba(0,0,0,0.64);
  -webkit-box-shadow: 2px 10px 24px -6px rgba(0,0,0,0.64);
  -moz-box-shadow: 2px 10px 24px -6px rgba(0,0,0,0.64);}

.card__image { 
  height: 200px;
  width: 100%;
}

.card__content { 
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.card__btn { 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px;
}

.btn { 
  padding: 5px 20px;
  border-radius: 20px;
  border: none;
}

.btn-primary { 
  background-color: #1DA1F2;
  color: white;
}

.btn-secondary { 
  background-color: transparent;
  border: 2px solid #17BF63;
}

and this is the css file that I wrote in the style.css its optional, I just fix the formatting and imported the fonts. I wrote it here because this is where universal css designs or code should be added.

/* style.css */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,
opsz,wght@0,14..32,100..900;1,14..32,100..900&family=PT+Sans+Caption:wght@400;700&family=Poppins:ital,
wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,
900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  margin: 0;
  padding: 0;
}

github: https://github.com/thisisnotsnorlax/AngularRecipeGrid.git

firebase: https://angularrecipegrid-9322b.web.app/