Skip to content

RecipeJS foundation layout #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
imran-s-creator wants to merge 1 commit into
base: main
Choose a base branch
from
Open

RecipeJS foundation layout #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
// Recipe data - Foundation for all 4 parts
const recipes = [
{
id: 1,
title: "Classic Spaghetti Carbonara",
time: 25,
difficulty: "easy",
description: "A creamy Italian pasta dish made with eggs, cheese, pancetta, and black pepper.",
category: "pasta"
},
{
id: 2,
title: "Chicken Tikka Masala",
time: 45,
difficulty: "medium",
description: "Tender chicken pieces in a creamy, spiced tomato sauce.",
category: "curry"
},
{
id: 3,
title: "Homemade Croissants",
time: 180,
difficulty: "hard",
description: "Buttery, flaky French pastries that require patience but deliver amazing results.",
category: "baking"
},
{
id: 4,
title: "Greek Salad",
time: 15,
difficulty: "easy",
description: "Fresh vegetables, feta cheese, and olives tossed in olive oil and herbs.",
category: "salad"
},
{
id: 5,
title: "Beef Wellington",
time: 120,
difficulty: "hard",
description: "Tender beef fillet coated with mushroom duxelles and wrapped in puff pastry.",
category: "meat"
},
{
id: 6,
title: "Vegetable Stir Fry",
time: 20,
difficulty: "easy",
description: "Colorful mixed vegetables cooked quickly in a savory sauce.",
category: "vegetarian"
},
{
id: 7,
title: "Pad Thai",
time: 30,
difficulty: "medium",
description: "Thai stir-fried rice noodles with shrimp, peanuts, and tangy tamarind sauce.",
category: "noodles"
},
{
id: 8,
title: "Margherita Pizza",
time: 60,
difficulty: "medium",
description: "Classic Italian pizza with fresh mozzarella, tomatoes, and basil.",
category: "pizza"
}
];

// DOM Selection - Get the container where recipes will be displayed
const recipeContainer = document.querySelector('#recipe-container');
console.log('recipeContainer', recipeContainer);

// Function to create HTML for a single recipe card
const createRecipeCard = (recipe) => {
return `
<div class="recipe-card" data-id="${recipe.id}">
<h3>${recipe.title}</h3>
<div class="recipe-meta">
<span>⏱️ ${recipe.time} min</span>
<span class="difficulty ${recipe.difficulty}">${recipe.difficulty}</span>
</div>
<p>${recipe.description}</p>
</div>
`;
};

console.log(createRecipeCard(recipes[0]));
console.log('Total recipes:', recipes.length);
console.log('First recipe:', recipes[0]);

// Function to render recipes to the DOM
const renderRecipes = (recipesToRender) => {
const recipeCardsHTML = recipesToRender
.map(createRecipeCard)
.join('');

recipeContainer.innerHTML = recipeCardsHTML;
console.log('Rendering complete!');
};

// Initialize: Render all recipes when page loads
renderRecipes(recipes);
21 changes: 21 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RecipeJS - Your Functional Cooking Companion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>🍳 RecipeJS</h1>
<p>Your Functional Cooking Companion</p>
</header>
<main>
<div id="recipe-container">
<!-- Recipe cards will be rendered here by JavaScript -->
</div>
</main>
<script src="app.js"></script>
</body>
</html>
104 changes: 104 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}

/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 2rem 1rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}

header p {
font-size: 1.1rem;
opacity: 0.9;
}

/* Main Container */
main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}

/* Recipe Container - Flexbox Grid */
#recipe-container {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
}

/* Recipe Card */
.recipe-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 1.5rem;
width: 300px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recipe-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.recipe-card h3 {
color: #667eea;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}

.recipe-meta {
display: flex;
gap: 1rem;
margin: 0.75rem 0;
font-size: 0.9rem;
color: #666;
}

.recipe-card p {
color: #555;
line-height: 1.5;
}

/* Difficulty Badges */
.difficulty {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: bold;
}

.difficulty.easy {
background-color: #d4edda;
color: #155724;
}

.difficulty.medium {
background-color: #fff3cd;
color: #856404;
}

.difficulty.hard {
background-color: #f8d7da;
color: #721c24;
}