Activity 33: Angular Recipe Grid

Recipe Component HTML

<div class="header">RARE FOODIE</div>
<div class="food container">
    <div class="foodcontainer" *ngFor="let recipe of recipe">
        <div class="foodimg">
            <img [src]="recipe.img" alt="">
        </div>

        <div class="foodinfo">
            <h3 class="foodtitle">{{ recipe.name }}</h3>
            <p class="fooddescription">{{ recipe.details }}</p>
            <div class="button-container">
                <button class="btn add-to-cart">See Recipe</button>
                <button class="btn buy-now">Ingredients</button>
            </div>
        </div>
    </div>
</div>

Recipe Component CSS

body {
  background-color: #fff5e6; 
  font-family: 'Arial', sans-serif;
  margin: 0;
}

.header {
  font-size: 3em; 
  font-weight: bold;
  color: #d45d00; 
  text-align: center;
  margin: 20px 0;
}

.food.container {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
  gap: 20px; 
  padding: 20px; 
}

.foodcontainer {
  background-color: #ffffff; 
  border-radius: 10px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
  overflow: hidden; 
  transition: transform 0.3s; 
}

.foodcontainer:hover {
  transform: scale(1.05); 
}

.foodimg img {
  width: 100%; 
  height: auto; 
}

.foodinfo {
  padding: 10px; 
  text-align: center; 
}

.foodtitle {
  font-size: 1.5em; 
  color: #d45d00; 
}

.fooddescription {
  font-size: 15px; 
  color: #555555; 
}

.button-container {
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-top: 10px; 
}

.btn {
    padding: 10px 15px; 
    border-radius: 50px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 1em;
    border: none;
    transition: background-color .3s, transform .2s;
}

.add-to-cart {
    background-color: #ffcc00; 
    color: white; 
}

.add-to-cart:hover {
    background-color: #e6b800; 
}
.buy-now {
    background-color: #d45d00; 
    color: white; 
}

.buy-now:hover {
    background-color: #b44d00;
}

Recipe Component Typescript

import { CommonModule } from '@angular/common';
import { Component, NgModule } from '@angular/core';
import { NgModel } from '@angular/forms';
import { Recipe } from './act33-model';
import { RecipeService } from '../act33-service';


@Component({
  selector: 'app-act33-recipe',
  templateUrl: './act33-recipe.component.html',
  styleUrl: './act33-recipe.component.css'
})
export class Act33RecipeComponent {
  recipe: Recipe[]=[];
  constructor(private recipeService:RecipeService){

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

Recipe Model Typescript

export interface Recipe{
    id:number;
    name:string;
    details:string;
    img:string;
}

Recipe Service Typescript

import { Injectable } from "@angular/core";
import { Recipe } from "./act33-Recipe/act33-model";

@Injectable({
providedIn: "root", 
})
export class RecipeService{
    private food: Recipe[]=[
        {
            id: 1,
            name: 'Fried Grasshopper',
            details:'Grasshopper was caught in Oz',
            img:'bug1.jpg',
        },
        {
            id: 2,
            name: 'Clam Deluxe',
            details:'A special clam that was harvested in Atlantis',
            img:'bug2.jpg',
        },
        {
            id: 3,
            name: 'Stir-fried Maggots ',
            details:'Cultured maggots from Wonderland',
            img:'bug3.jpg',
        },
        {
            id: 4,
            name: 'Expensive Fried Frogs',
            details:'Frogs imported from Hogwarts',
            img:'bug4.jpg',
        },
        {
            id: 5,
            name: 'Lechong Buwaya',
            details:'Crocodile from Neverland,filled with human flesh',
            img:'bug5.jpg',
        },
        {
            id: 6,
            name: 'Fancy Chocolate Bichessa',
            details:"Chocolate imported from Willy Wonka's Chocolate Factory",
            img:'bug6.jpg',
        },
        {
            id: 7,
            name: 'Pinoy Fruit Salad',
            details:'Very pinoy ingredients and milk was produced by Boysen',
            img:'bug7.jpg',
        },
        {
            id: 8,
            name: 'Sphaghelly',
            details:'A spaghetty inside the jelatin, and sausages',
            img:'bug8.jpg',
        },
        {
            id: 9,
            name: 'Grilled Tarantula',
            details:'Tarantula imported from China, and it was cooked with its family',
            img:'bug9.jpg',
        },
        {
            id: 10,
            name: 'Sweet Sausage Sandwich',
            details:'Combination of abomination, sweet and savory!',
            img:'bug10.jpg',
        },
        {
            id: 11,
            name: 'Century Egg',
            details:'An egg preserved for centuries',
            img:'bug11.jpeg',
        },
        {
            id: 12,
            name: 'Yummy Fried Kitty',
            details:'Expensive delicacy with cursed ingredients',
            img:'bug12.jpg',
        },

    ];

    getRecipe():Recipe[]{
        return this.food;
    }
}

OUTPUT

Firebase: https://activity-33-d43a1.web.app/

GitHub: https://github.com/Sukucee/Act_33-Angular-Recipe-Grid.git