My Recipe Collection
No recipes match your criteria.
';
return;
}
grid.innerHTML = filtered.map(r => `
${r.Name}
${r.Cuisine}
${r.Course}
`).join('');
}
function renderRecipesTable() {
const table = document.getElementById('recipes-table');
const headers = ['Name', 'Cuisine', 'Course', 'Prep Time (min)', 'Cook Time (min)', 'Ingredients', 'Instructions'];
table.innerHTML = `
${headers.map(h=>`| ${h} | `).join('')}Actions |
${recipesData.map(r => `
|
|
|
|
|
|
|
|
`).join('')}
`;
}
function populateFilters() {
const cuisines = ['all', ...new Set(recipesData.map(r => r.Cuisine))];
const courses = ['all', ...new Set(recipesData.map(r => r.Course))];
cuisineFilter.innerHTML = cuisines.map(c => `
`).join('');
courseFilter.innerHTML = courses.map(c => `
`).join('');
}
window.showRecipeModal = (id) => {
const recipe = recipesData.find(r => r.id === id);
if (!recipe) return;
const modalContent = document.getElementById('modal-content');
modalContent.innerHTML = `
${recipe.Name}
Cuisine: ${recipe.Cuisine} | Course: ${recipe.Course} | Time: ${recipe.PrepTime + recipe.CookTime} min
Ingredients
${recipe.Ingredients.split('\n').map(i => i.trim() ? `- ${i.trim()}
` : '').join('')}
Instructions
${recipe.Instructions.split('\n').map(i => i.trim() ? `- ${i.trim()}
` : '').join('')}
`;
document.getElementById('rcd-download-pdf-btn').dataset.id = id;
document.getElementById('recipe-modal').style.display = 'flex';
}
function closeModal() { document.getElementById('recipe-modal').style.display = 'none'; }
document.getElementById('modal-close-btn').addEventListener('click', closeModal);
document.getElementById('recipe-modal').addEventListener('click', (e) => { if(e.target === e.currentTarget) closeModal(); });
document.getElementById('rcd-download-pdf-btn').addEventListener('click', (e) => {
const content = document.getElementById('modal-content');
const recipeName = content.querySelector('h3').textContent;
html2canvas(content, { scale: 2 }).then(canvas => {
const { jsPDF } = window.jspdf;
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgProps = pdf.getImageProperties(imgData);
const imgHeight = (imgProps.height * (pdfWidth - 20)) / imgProps.width; // A4 with margin
pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, imgHeight);
pdf.save(`${recipeName.replace(/ /g, '_')}.pdf`);
});
});
function addRecipe() {
recipesData.unshift({ id: Date.now(), Name: 'New Recipe', Cuisine: 'Home', Course: 'Main', PrepTime: 10, CookTime: 20, Ingredients: '1. Ingredient', Instructions: '1. Instruction' });
renderAll();
}
document.getElementById('rcd-add-recipe-btn').addEventListener('click', addRecipe);
document.getElementById('recipes-table').addEventListener('change', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA') {
const id = parseInt(e.target.closest('tr').dataset.id);
const key = e.target.dataset.key;
const value = (e.target.type === 'number') ? parseInt(e.target.value) || 0 : e.target.value;
const recipe = recipesData.find(r => r.id === id);
if (recipe) recipe[key] = value;
renderAll();
}
});
document.getElementById('recipes-table').addEventListener('click', (e) => {
if (e.target.classList.contains('remove-recipe-btn')) {
const id = parseInt(e.target.dataset.id);
recipesData = recipesData.filter(r => r.id !== id);
renderAll();
}
});
function initialize() {
recipesData = [
{ id: 1, Name: 'Spaghetti Carbonara', Cuisine: 'Italian', Course: 'Main', PrepTime: 10, CookTime: 15, Ingredients: '200g Spaghetti\n100g Pancetta\n2 large Eggs\n50g Pecorino cheese\nBlack pepper', Instructions: '1. Cook pasta.\n2. Fry pancetta.\n3. Mix eggs and cheese.\n4. Combine everything.' },
{ id: 2, Name: 'Chicken Tacos', Cuisine: 'Mexican', Course: 'Main', PrepTime: 20, CookTime: 25, Ingredients: '500g Chicken breast\n8 Tortillas\n1 Onion\nSalsa, Lime, Cilantro', Instructions: '1. Cook chicken.\n2. Warm tortillas.\n3. Assemble tacos with toppings.' },
{ id: 3, Name: 'Chocolate Lava Cake', Cuisine: 'Dessert', Course: 'Dessert', PrepTime: 15, CookTime: 12, Ingredients: '100g Dark chocolate\n100g Butter\n2 Eggs\n50g Sugar\n20g Flour', Instructions: '1. Melt chocolate and butter.\n2. Whisk eggs and sugar, fold in chocolate.\n3. Bake until edges are set.' },
];
renderAll();
}
initialize();
});
