Activity # 33 Angular recipe grid

app.component.html

<style>

  body {
        background-color: #f2f2f2;
      }

      h1 {
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
        margin-top: 10px;
      }

      .input-container {
        margin-bottom: 20px;
      }

      input[type="text"] {
        width: 10%;
        height: 30px;
        padding: 10px;
        margin-top:  50px;
        border: none;
        border-radius: 4px;
        background-color: #f2f2f2;
        color: #0a0303;
        margin-left: 30px;
        top: 10%;
      }
  button {
      width: 20%;
      height: 40px;
      padding: 10px;
      border: none;

      border-radius: 4px;
      background-color: #62c3fcb2;
      color: #fff;
      cursor: pointer;
      margin-left: 30px;
      position: relative; 
      bottom: 10%;
      margin-top: 20px;

    }
    button:hover{
    background: #f2f2f2;
    color: #333;
    }

    button a {
        text-decoration: none;
        color: #333;
        font-size: 1rem;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-family: 700;
    }
  </style>

<main>



  <h1 class="heading">Recipe  List</h1>

  <button><a  routerLink ='/recipe'>Recipe-list</a></button>



<router-outlet></router-outlet>
</main>

recipe.model.ts

export interface Recipe {
    id: number;
    name: string;
    ingredients: string[];
    image: string; 
  }

recipe,component.ts

import { Component,OnInit } from '@angular/core';
import { Recipe } from './recipe.model';
import { RecipeService } from '../../services/recipe.service';

@Component({
  selector: 'app-recipe',
  templateUrl: './recipe.component.html',
  styleUrl: './recipe.component.css'
})
export class RecipeComponent implements OnInit {
  recipes: Recipe[] = [];

  constructor(private recipeService: RecipeService) {}

  ngOnInit() {
    this.recipes = this.recipeService.getRecipes();
  }

  onAddRecipe() {
    const newRecipe: Recipe = {
      id: this.recipes.length + 1,
      name: 'New Recipe',
      ingredients: ['Ingredient 1', 'Ingredient 2'],
      image: 'https://example.com/default.jpg'
    };
    this.recipeService.addRecipe(newRecipe);

    this.recipes = this.recipeService.getRecipes(); // Update list
  }
}

recipe.service.ts

import { Injectable } from '@angular/core';
import { Recipe } from '../component/recipe/recipe.model';
@Injectable({
  providedIn: 'root'
})
export class RecipeService {
  private recipes: Recipe[] = [

    {
      id: 1,
      name: 'Chicken Curry',
      ingredients: ['Chicken', 'Curry powder', 'Coconut milk', 'Onions', 'Garlic', 'pepper'],
      image: 'https://i.pinimg.com/736x/a5/73/88/a57388fb30ad2d6a39294b15427854e8.jpg'
    },
    {
      id: 2,
      name: 'Adobo (Chicken or pork)',
      ingredients: ['Chicken or pork, soy sauce, vinegar, garlic, bay leaves, black peppercorns, onions.'],
      image: 'https://i.pinimg.com/enabled_lo_mid/736x/fc/93/cf/fc93cf28c0d1d665544c44a409cdd63e.jpg'
    },
    {
      id: 3,
      name: 'Sinigang (Tamarind soup)',
      ingredients: ['Pork belly or shrimp, tamarind paste, tomatoes, kangkong (water spinach), radish, green beans, eggplant, fish sauce.'],
      image: 'https://i.pinimg.com/736x/bf/f3/13/bff313402fb98663ee6fc00ac181424c.jpg'
    },
    {
      id: 4,
      name: 'Kare-kare (Beef stew)',
      ingredients: [' Oxtail or beef, peanut butter, banana blossoms, eggplant, Peanut butter,string beans, annatto oil, bagoong (fermented shrimp paste).'],
      image: 'https://i.pinimg.com/736x/59/85/d6/5985d6f25caf152bf34d13e7c1e8986a.jpg'
    },
    {
      id: 5,
      name: 'Leche flan (Caramel custard)',
      ingredients: ['Egg yolks, condensed milk, evaporated milk, sugar (for caramel), vanilla extract.'],
      image: 'https://i.pinimg.com/736x/0a/9d/20/0a9d207e73ad6720ed55b5032449d20f.jpg'
    },
    {
      id: 6,
      name: 'Pancit canton( Stri friend noodles)',
      ingredients: ['Egg noodles, soy sauce, oyster sauce, chicken or shrimp, cabbage, carrots, celery, garlic, onions.'],
      image: 'https://i.pinimg.com/736x/72/87/b2/7287b273929c757c81c51f0a153041ad.jpg'
    },
    {
      id: 7,
      name: 'Bicol Express',
      ingredients: ['Pork belly, coconut milk, shrimp paste, chili peppers, garlic, onions, ginger'],
      image: 'https://i.pinimg.com/736x/9b/d5/a8/9bd5a8f5ab688adc4d599b5d2e5d7e8c.jpg'
    },
    {
      id: 8,
      name: 'Lechon kawali (Crispy fried pork belly',
      ingredients: ['Pork belly, salt, garlic powder, pepper, water, oil for frying'],
      image: 'https://i.pinimg.com/736x/df/f4/8a/dff48aeb0102aeb8672deb36ed204e76.jpg'
    },
    {
      id: 9,
      name: 'Turon (Banana spring roll)',
      ingredients: ['Ripe saba bananas, jackfruit, sugar, lumpia wrappers, oil for frying.'],
      image: 'https://i.pinimg.com/736x/4f/6f/6d/4f6f6d223843b584e37e08817a25c569.jpg'
    },
    {
      id: 10,
      name: 'Lumpiang shanghai (Filipino spring roll)',
      ingredients: ['Ground pork, minced carrots, garlic, onions, soy sauce, lumpia wrappers, oil for frying.'],
      image: 'https://i.pinimg.com/736x/16/7d/86/167d86aabd23524beaa6c1a4f8543244.jpg'
    },


  ];

  getRecipes() {
    return this.recipes;
  }

  addRecipe(recipe: Recipe) {
    this.recipes.push(recipe);
  }

}

recipe.component.html

<style>
    .recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.recipe-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  background-color: #f9f9f9;
}

.recipe-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

button {
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;

}

@media (max-width: 768px) {
  .recipe-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 15px;
  }

  .recipe-card {
    padding: 10px;
  }

  button {
    padding: 8px 12px;
  }
}


</style>


<div class="recipe-grid">
    <div *ngFor="let recipe of recipes" class="recipe-card">
      <img [src]="recipe.image" alt="{{ recipe.name }}" />
      <h2>{{ recipe.name }}</h2>
      <ul>
        <li *ngFor="let ingredient of recipe.ingredients">{{ ingredient }}</li>
      </ul>
    </div>
  </div>

  <button (click)="onAddRecipe()">Add recipe</button>

DEKSTOP:

TABLET:

MOBILE:

Github repo:

Firebase: