document.addEventListener("DOMContentLoaded", function () {
const recipes = [
{
name: "Caprese Pasta",
link: "https://wealleattogether.com/caprese-pasta-salad/",
img: "https://wealleattogether.com/wp-content/uploads/2024/07/caprese-pasta-salad-hero.webp"
},
{
name: "Chicken Tinga Tacos",
link: "https://wealleattogether.com/chicken-tinga",
img: "https://wealleattogether.com/wp-content/uploads/2024/07/chicken-tinga-tacos.webp"
},
{
name: "Dry Fried Green Beans",
link: "https://wealleattogether.com/dry-fried-green-beans-sichuan/",
img: "https://wealleattogether.com/wp-content/uploads/2024/07/dry-fried-green-beans.webp"
},
{
name: "Tomates Farcies",
link: "https://wealleattogether.com/tomates-farcies-meat-stuffed-tomatoes/",
img: "https://wealleattogether.com/wp-content/uploads/2024/07/tomates-farcies-stuffed-tomatoes.webp"
},
{
name: "Grilled Romaine Greek Salad",
link: "https://wealleattogether.com/easy-grilled-romaine-lettuce-greek-salad/",
img: "https://wealleattogether.com/wp-content/uploads/2024/07/grilled-romaine-greek-salad-hero.webp"
}
];
const selected = new Set();
function toggleSelection(index) {
const btn = document.getElementById(`select-btn-${index}`);
if (selected.has(index)) {
selected.delete(index);
btn.classList.remove("selected");
} else {
selected.add(index);
btn.classList.add("selected");
}
}
function generateGroceryList() {
const outputDiv = document.getElementById("groceryListOutput");
if (selected.size === 0) {
outputDiv.innerHTML = "No recipes selected. ";
return;
}
const output = [...selected]
.map(i => `${recipes[i].name} Selected Recipes:
(Ingredient list functionality coming soon.)
`;
}
function renderRecipes() {
const grid = document.getElementById("mealGrid");
if (!grid) return;
grid.innerHTML = recipes.map((recipe, i) => `
🛒
`).join("");
}
// Expose toggleSelection to global scope so onclick works
window.toggleSelection = toggleSelection;
renderRecipes();
document.getElementById("generateListBtn").addEventListener("click", generateGroceryList);
});
