<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe Finder | Learn with Arshyan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #e67e22;
--primary-dark: #d35400;
--secondary: #27ae60;
--light: #f9f9f9;
--dark: #2c3e50;
--text: #34495e;
--gray: #95a5a6;
--light-gray: #ecf0f1;
--card-bg: #ffffff;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Header Styles */
header {
text-align: center;
padding: 40px 0 20px;
margin-bottom: 30px;
}
.brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 40px;
box-shadow: var(--shadow);
}
.brand-text h1 {
font-family: 'Playfair Display', serif;
font-size: 42px;
font-weight: 700;
color: var(--dark);
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.brand-text p {
font-size: 18px;
color: var(--primary-dark);
max-width: 600px;
margin: 0 auto;
}
.project-tag {
background: var(--primary);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 16px;
font-weight: 500;
margin-top: 15px;
display: inline-block;
}
/* Search Section */
.search-section {
background: var(--card-bg);
border-radius: 20px;
padding: 30px;
margin-bottom: 40px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.search-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(to right, var(--primary), var(--secondary));
}
.search-section h2 {
text-align: center;
font-size: 28px;
margin-bottom: 25px;
color: var(--dark);
font-family: 'Playfair Display', serif;
}
.search-container {
display: flex;
gap: 15px;
max-width: 800px;
margin: 0 auto;
}
.search-box {
flex: 1;
position: relative;
}
.search-box input {
width: 100%;
padding: 16px 20px 16px 50px;
border-radius: 12px;
border: 2px solid var(--light-gray);
font-size: 16px;
transition: var(--transition);
}
.search-box input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
}
.search-box i {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--gray);
font-size: 20px;
}
.search-btn {
background: linear-gradient(to right, var(--primary), var(--primary-dark));
color: white;
border: none;
padding: 0 30px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 10px rgba(230, 126, 34, 0.3);
display: flex;
align-items: center;
gap: 10px;
}
.search-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(230, 126, 34, 0.4);
}
.filters {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 20px;
background: var(--light-gray);
border: none;
border-radius: 30px;
font-size: 14px;
cursor: pointer;
transition: var(--transition);
}
.filter-btn.active, .filter-btn:hover {
background: var(--primary);
color: white;
}
/* Recipe Grid */
.recipes-section {
margin-bottom: 50px;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 32px;
text-align: center;
margin-bottom: 30px;
color: var(--dark);
position: relative;
padding-bottom: 15px;
}
.section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary);
border-radius: 2px;
}
.recipes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
}
.recipe-card {
background: var(--card-bg);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
cursor: pointer;
}
.recipe-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.card-image {
height: 200px;
overflow: hidden;
position: relative;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.recipe-card:hover .card-image img {
transform: scale(1.05);
}
.card-time {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
color: var(--dark);
font-family: 'Playfair Display', serif;
}
.card-meta {
display: flex;
justify-content: space-between;
color: var(--gray);
font-size: 14px;
margin-bottom: 15px;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-cuisine {
background: var(--light-gray);
padding: 4px 12px;
border-radius: 20px;
font-size: 13px;
}
.view-btn {
background: var(--primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 5px;
}
.view-btn:hover {
background: var(--primary-dark);
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow-y: auto;
padding: 20px;
}
.modal-content {
background: white;
border-radius: 20px;
max-width: 900px;
margin: 50px auto;
position: relative;
animation: modalOpen 0.5s ease;
}
@keyframes modalOpen {
from { opacity: 0; transform: translateY(-50px); }
to { opacity: 1; transform: translateY(0); }
}
.close-modal {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: var(--primary);
color: white;
border: none;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.close-modal:hover {
background: var(--primary-dark);
transform: rotate(90deg);
}
.modal-header {
position: relative;
height: 400px;
overflow: hidden;
}
.modal-header img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modal-header-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
}
.modal-title {
font-family: 'Playfair Display', serif;
font-size: 36px;
margin-bottom: 10px;
}
.modal-meta {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
}
.modal-body {
padding: 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
@media (max-width: 768px) {
.modal-body {
grid-template-columns: 1fr;
}
}
.ingredients, .instructions {
background: var(--light);
border-radius: 15px;
padding: 25px;
}
.section-heading {
font-family: 'Playfair Display', serif;
font-size: 24px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary);
color: var(--dark);
}
.ingredients-list {
list-style-type: none;
}
.ingredients-list li {
padding: 10px 0;
border-bottom: 1px dashed var(--light-gray);
display: flex;
gap: 10px;
}
.ingredients-list li:last-child {
border-bottom: none;
}
.ingredients-list li i {
color: var(--primary);
}
.instructions-list {
list-style-type: none;
counter-reset: step-counter;
}
.instructions-list li {
margin-bottom: 20px;
counter-increment: step-counter;
position: relative;
padding-left: 40px;
}
.instructions-list li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
/* Footer */
footer {
text-align: center;
padding: 30px 0;
color: var(--gray);
font-size: 16px;
border-top: 1px solid var(--light-gray);
margin-top: 30px;
}
footer a ,span{
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
footer a , span:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 768px) {
.search-container {
flex-direction: column;
}
.brand-text h1 {
font-size: 32px;
}
.section-title {
font-size: 28px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="brand">
<div class="logo">
<i class="fas fa-utensils"></i>
</div>
<div class="brand-text">
<h1>Recipe Finder</h1>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>Discover thousands of delicious recipes from around the world</p>
<div class="project-tag">Project 5: Learn with Arshyan</div>
</div>
</div>
</header>
<section class="search-section">
<h2>Find Your Perfect Recipe</h2>
<div class="search-container">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="search-input" placeholder="Search for recipes, ingredients, or cuisines...">
</div>
<button class="search-btn" id="search-btn">
<i class="fas fa-search"></i> Search
</button>
</div>
<div class="filters">
<button class="filter-btn active">All</button>
<button class="filter-btn">Vegetarian</button>
<button class="filter-btn">Vegan</button>
<button class="filter-btn">Gluten-Free</button>
<button class="filter-btn">Dessert</button>
<button class="filter-btn">Quick & Easy</button>
</div>
</section>
<section class="recipes-section">
<h2 class="section-title">Popular Recipes</h2>
<div class="recipes-grid" id="recipes-grid">
<!-- Recipe cards will be dynamically inserted here -->
</div>
</section>
<footer>
<p>Created by <a href="#">Learn with Arshyan</a> | Recipe Finder Project | Source Code: <span>learnwitharshyan.com/code </span> | © 2025</p>
</footer>
</div>
<!-- Recipe Detail Modal -->
<div class="modal" id="recipe-modal">
<div class="modal-content">
<button class="close-modal" id="close-modal">×</button>
<div class="modal-header">
<img decoding="async" id="modal-image" src="" alt="Recipe">
<div class="modal-header-content">
<h2 class="modal-title" id="modal-title"></h2>
<div class="modal-meta" id="modal-meta"></div>
</div>
</div>
<div class="modal-body">
<div class="ingredients">
<h3 class="section-heading">Ingredients</h3>
<ul class="ingredients-list" id="ingredients-list"></ul>
</div>
<div class="instructions">
<h3 class="section-heading">Instructions</h3>
<ol class="instructions-list" id="instructions-list"></ol>
</div>
</div>
</div>
</div>
<script>
// Recipe Data - Fixed to show different recipes
const recipes = [
{
id: 1,
title: "Homemade Margherita Pizza",
image: "https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
time: 30,
rating: 4.8,
reviews: 120,
calories: 420,
cuisine: "Italian",
ingredients: [
"2 1/2 cups all-purpose flour",
"1 teaspoon salt",
"1 teaspoon sugar",
"1 tablespoon active dry yeast",
"1 cup warm water",
"2 tablespoons olive oil",
"1/2 cup tomato sauce",
"2 cups shredded mozzarella",
"Fresh basil leaves",
"Salt and pepper to taste"
],
instructions: [
"In a large bowl, combine flour, salt, sugar, and yeast. Mix well.",
"Add warm water and olive oil to the dry ingredients. Stir until a dough forms.",
"Knead the dough on a floured surface for about 5 minutes until smooth and elastic.",
"Place dough in a greased bowl, cover, and let rise in a warm place for 1 hour.",
"Preheat oven to 475°F (245°C). Punch down dough and divide into two balls.",
"Roll out each ball on a floured surface to form a 12-inch circle.",
"Transfer dough to a pizza stone or baking sheet. Spread tomato sauce over the dough, leaving a border for the crust.",
"Sprinkle mozzarella evenly over the sauce. Top with fresh basil leaves.",
"Bake for 12-15 minutes until crust is golden and cheese is bubbly.",
"Remove from oven, let cool for 5 minutes, slice, and serve."
]
},
{
id: 2,
title: "Grilled Garlic Butter Steak",
image: "https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
time: 45,
rating: 4.9,
reviews: 95,
calories: 550,
cuisine: "American",
ingredients: [
"2 ribeye steaks (1.5 inches thick)",
"4 tablespoons butter, softened",
"4 garlic cloves, minced",
"1 tablespoon fresh rosemary, chopped",
"1 tablespoon olive oil",
"Salt and freshly ground black pepper",
"1 teaspoon smoked paprika"
],
instructions: [
"Remove steaks from refrigerator 30 minutes before cooking.",
"In a small bowl, mix butter, minced garlic, and rosemary. Set aside.",
"Pat steaks dry and season generously with salt, pepper, and smoked paprika.",
"Preheat grill to high heat (about 450-500°F).",
"Brush steaks with olive oil and place on hot grill.",
"Grill for 4-5 minutes per side for medium-rare, or until desired doneness.",
"During last minute of cooking, top each steak with garlic butter.",
"Remove steaks from grill and let rest for 5-10 minutes before slicing.",
"Serve with grilled vegetables or your favorite side dish."
]
},
{
id: 3,
title: "Creamy Mushroom Pasta",
image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
time: 25,
rating: 4.7,
reviews: 85,
calories: 380,
cuisine: "Italian",
ingredients: [
"12 oz fettuccine pasta",
"2 tablespoons olive oil",
"3 garlic cloves, minced",
"1 lb mixed mushrooms, sliced",
"1 cup heavy cream",
"1/2 cup grated parmesan cheese",
"2 tablespoons fresh parsley, chopped",
"Salt and pepper to taste",
"Red pepper flakes (optional)"
],
instructions: [
"Cook pasta according to package directions until al dente. Reserve 1 cup pasta water.",
"Heat olive oil in a large skillet over medium-high heat.",
"Add garlic and sauté for 30 seconds until fragrant.",
"Add mushrooms and cook for 6-8 minutes until golden brown and tender.",
"Reduce heat to medium and add heavy cream and parmesan cheese. Stir until cheese melts.",
"Season with salt, pepper, and red pepper flakes if using.",
"Add cooked pasta to the skillet and toss to coat. Add pasta water as needed to reach desired consistency.",
"Garnish with fresh parsley and extra parmesan before serving."
]
},
{
id: 4,
title: "California Sushi Rolls",
image: "https://images.unsplash.com/photo-1484980972926-edee96e0960d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
time: 60,
rating: 4.8,
reviews: 110,
calories: 320,
cuisine: "Japanese",
ingredients: [
"2 cups sushi rice, cooked",
"4 nori sheets",
"1 avocado, sliced",
"1 cucumber, julienned",
"8 imitation crab sticks",
"1 tablespoon rice vinegar",
"1 teaspoon sugar",
"1/2 teaspoon salt",
"Sesame seeds for garnish",
"Soy sauce for serving",
"Pickled ginger and wasabi (optional)"
],
instructions: [
"Mix rice vinegar, sugar, and salt in a small bowl. Fold into cooked rice and let cool.",
"Place bamboo sushi mat on work surface. Put nori sheet on mat, shiny side down.",
"Wet hands and spread 1/2 cup rice evenly over nori, leaving 1-inch border at top.",
"Sprinkle sesame seeds over rice. Carefully flip nori so rice is facing down.",
"Arrange crab sticks, avocado, and cucumber horizontally across the center.",
"Using the mat, roll nori tightly away from you, applying gentle pressure.",
"Moisten the top border with water to seal the roll.",
"Repeat with remaining ingredients. Slice each roll into 8 pieces with a sharp knife.",
"Serve with soy sauce, pickled ginger, and wasabi."
]
},
{
id: 5,
title: "Chocolate Lava Cake",
image: "https://images.unsplash.com/photo-1606313564200-e75d5e30476c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
time: 35,
rating: 4.9,
reviews: 150,
calories: 480,
cuisine: "French",
ingredients: [
"6 oz dark chocolate (70% cacao)",
"1/2 cup unsalted butter",
"2 large eggs",
"2 large egg yolks",
"1/4 cup granulated sugar",
"Pinch of salt",
"2 tablespoons all-purpose flour",
"Powdered sugar for dusting",
"Vanilla ice cream for serving"
],
instructions: [
"Preheat oven to 425°F (220°C). Butter and flour four 6-oz ramekins.",
"Melt chocolate and butter in a double boiler, stirring until smooth.",
"In a medium bowl, whisk eggs, egg yolks, sugar, and salt until pale and thick.",
"Gradually whisk the melted chocolate mixture into the egg mixture.",
"Fold in flour until just combined. Divide batter among prepared ramekins.",
"Bake for 12-14 minutes until edges are firm but centers are soft.",
"Let cakes cool for 1 minute, then invert onto plates.",
"Dust with powdered sugar and serve immediately with ice cream."
]
},
{
id: 6,
title: "Mediterranean Salad Bowl",
image: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
time: 20,
rating: 4.6,
reviews: 90,
calories: 320,
cuisine: "Mediterranean",
ingredients: [
"4 cups mixed greens",
"1 cup cherry tomatoes, halved",
"1 cucumber, diced",
"1/2 red onion, thinly sliced",
"1/2 cup Kalamata olives",
"1/2 cup feta cheese, crumbled",
"1/4 cup fresh parsley, chopped",
"1/4 cup olive oil",
"2 tablespoons lemon juice",
"1 teaspoon dried oregano",
"Salt and pepper to taste"
],
instructions: [
"In a large bowl, combine mixed greens, tomatoes, cucumber, red onion, and olives.",
"In a small bowl, whisk together olive oil, lemon juice, oregano, salt, and pepper.",
"Pour dressing over salad and toss to combine.",
"Top with crumbled feta cheese and fresh parsley.",
"Serve immediately with grilled pita bread on the side."
]
}
];
// DOM Elements
const recipesGrid = document.getElementById('recipes-grid');
const recipeModal = document.getElementById('recipe-modal');
const closeModal = document.getElementById('close-modal');
const modalImage = document.getElementById('modal-image');
const modalTitle = document.getElementById('modal-title');
const modalMeta = document.getElementById('modal-meta');
const ingredientsList = document.getElementById('ingredients-list');
const instructionsList = document.getElementById('instructions-list');
const searchBtn = document.getElementById('search-btn');
const searchInput = document.getElementById('search-input');
// Render recipe cards
function renderRecipeCards() {
recipesGrid.innerHTML = '';
recipes.forEach(recipe => {
const card = document.createElement('div');
card.className = 'recipe-card';
card.dataset.id = recipe.id;
card.innerHTML = `
<div class="card-image">
<img decoding="async" src="${recipe.image}" alt="${recipe.title}">
<div class="card-time"><i class="fas fa-clock"></i> ${recipe.time} min</div>
</div>
<div class="card-content">
<h3 class="card-title">${recipe.title}</h3>
<div class="card-meta">
<span><i class="fas fa-star"></i> ${recipe.rating} (${recipe.reviews})</span>
<span><i class="fas fa-fire"></i> ${recipe.calories} cal</span>
</div>
<div class="card-footer">
<span class="card-cuisine">${recipe.cuisine}</span>
<button class="view-btn">View <i class="fas fa-arrow-right"></i></button>
</div>
</div>
`;
recipesGrid.appendChild(card);
});
// Add event listeners to each card
document.querySelectorAll('.recipe-card').forEach(card => {
card.addEventListener('click', () => {
const recipeId = parseInt(card.dataset.id);
const recipe = recipes.find(r => r.id === recipeId);
if (recipe) {
showRecipeModal(recipe);
}
});
});
}
// Show recipe in modal
function showRecipeModal(recipe) {
// Set image and title
modalImage.src = recipe.image;
modalImage.alt = recipe.title;
modalTitle.textContent = recipe.title;
// Set meta info
modalMeta.innerHTML = `
<div class="meta-item"><i class="fas fa-clock"></i> ${recipe.time} min</div>
<div class="meta-item"><i class="fas fa-user"></i> 4 servings</div>
<div class="meta-item"><i class="fas fa-fire"></i> ${recipe.calories} calories</div>
<div class="meta-item"><i class="fas fa-star"></i> ${recipe.rating} (${recipe.reviews} reviews)</div>
`;
// Set ingredients
ingredientsList.innerHTML = '';
recipe.ingredients.forEach(ingredient => {
const li = document.createElement('li');
li.innerHTML = `<i class="fas fa-check-circle"></i> ${ingredient}`;
ingredientsList.appendChild(li);
});
// Set instructions
instructionsList.innerHTML = '';
recipe.instructions.forEach((instruction, index) => {
const li = document.createElement('li');
li.textContent = instruction;
instructionsList.appendChild(li);
});
// Show modal
recipeModal.style.display = 'block';
}
// Close modal
function closeRecipeModal() {
recipeModal.style.display = 'none';
}
// Handle search
function handleSearch() {
const searchTerm = searchInput.value.toLowerCase().trim();
const activeFilter = document.querySelector('.filter-btn.active').textContent;
if (!searchTerm && activeFilter === 'All') {
renderRecipeCards();
return;
}
const filteredRecipes = recipes.filter(recipe => {
const matchesSearch = recipe.title.toLowerCase().includes(searchTerm) ||
recipe.ingredients.some(ing => ing.toLowerCase().includes(searchTerm)) ||
recipe.cuisine.toLowerCase().includes(searchTerm);
const matchesFilter = activeFilter === 'All' ||
(activeFilter === 'Vegetarian' && recipe.title.toLowerCase().includes('vegetarian')) ||
(activeFilter === 'Vegan' && recipe.title.toLowerCase().includes('vegan')) ||
(activeFilter === 'Gluten-Free' && recipe.title.toLowerCase().includes('gluten-free')) ||
(activeFilter === 'Dessert' && recipe.cuisine === 'French') ||
(activeFilter === 'Quick & Easy' && recipe.time <= 30);
return matchesSearch && matchesFilter;
});
renderFilteredRecipes(filteredRecipes);
}
// Render filtered recipes
function renderFilteredRecipes(filteredRecipes) {
recipesGrid.innerHTML = '';
if (filteredRecipes.length === 0) {
recipesGrid.innerHTML = `
<div class="no-results" style="grid-column: 1/-1; text-align: center; padding: 40px;">
<i class="fas fa-search" style="font-size: 60px; color: var(--gray); margin-bottom: 20px;"></i>
<h3 style="color: var(--dark); margin-bottom: 10px;">No recipes found</h3>
<p>Try adjusting your search or filter criteria</p>
</div>
`;
return;
}
filteredRecipes.forEach(recipe => {
const card = document.createElement('div');
card.className = 'recipe-card';
card.dataset.id = recipe.id;
card.innerHTML = `
<div class="card-image">
<img decoding="async" src="${recipe.image}" alt="${recipe.title}">
<div class="card-time"><i class="fas fa-clock"></i> ${recipe.time} min</div>
</div>
<div class="card-content">
<h3 class="card-title">${recipe.title}</h3>
<div class="card-meta">
<span><i class="fas fa-star"></i> ${recipe.rating} (${recipe.reviews})</span>
<span><i class="fas fa-fire"></i> ${recipe.calories} cal</span>
</div>
<div class="card-footer">
<span class="card-cuisine">${recipe.cuisine}</span>
<button class="view-btn">View <i class="fas fa-arrow-right"></i></button>
</div>
</div>
`;
recipesGrid.appendChild(card);
});
// Add event listeners to each card
document.querySelectorAll('.recipe-card').forEach(card => {
card.addEventListener('click', () => {
const recipeId = parseInt(card.dataset.id);
const recipe = recipes.find(r => r.id === recipeId);
if (recipe) {
showRecipeModal(recipe);
}
});
});
}
// Initialize the app
function initApp() {
// Render initial recipe cards
renderRecipeCards();
// Add event listeners
closeModal.addEventListener('click', closeRecipeModal);
window.addEventListener('click', (e) => {
if (e.target === recipeModal) {
closeRecipeModal();
}
});
// Filter buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
handleSearch();
});
});
// Search button and input
searchBtn.addEventListener('click', handleSearch);
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') handleSearch();
});
}
// Initialize on load
document.addEventListener('DOMContentLoaded', initApp);
</script>
</body>
</html>]]>
