Allergy-Friendly Recipe Finder

Error: Tool failed to load. Please check element IDs.

'; return; } // II. D. 2. USA-Relevant Sample Data (Mock Recipe Database) // NOTE: In a real-world scenario, this data would be fetched from an API or a larger database. const RECIPE_DB = [ // Recipe 1: Allergy-Friendly (Top 9 Free) { id: 1, name: "Coconut Chickpea Curry", type: "Main Dish", cuisine: "Asian", free_of: ["Milk", "Eggs", "Peanuts", "Tree Nuts", "Wheat", "Soy", "Fish", "Shellfish", "Sesame"], ingredients: ["Chickpeas", "Coconut Milk", "Spices", "Rice"], instructions: "Stir-fry spices, add chickpeas and coconut milk. Simmer until rice is done." }, // Recipe 2: Gluten/Dairy-Free Dessert { id: 2, name: "Flourless Chocolate Cake", type: "Dessert", cuisine: "American", free_of: ["Milk", "Wheat", "Peanuts", "Shellfish", "Fish"], ingredients: ["Chocolate (dark)", "Eggs", "Sugar", "Butter Substitute (non-dairy)"], instructions: "Melt chocolate. Whisk eggs/sugar. Combine and bake." }, // Recipe 3: Nut/Egg-Free Breakfast { id: 3, name: "Banana Oat Pancakes", type: "Breakfast", cuisine: "American", free_of: ["Peanuts", "Tree Nuts", "Eggs", "Fish", "Shellfish", "Sesame"], ingredients: ["Oat Flour", "Banana", "Milk (Almond/Oat)", "Baking Soda"], instructions: "Mash banana, mix with other ingredients, cook on griddle." }, // Recipe 4: Contains Wheat & Soy (Exclusion Test) { id: 4, name: "Classic Beef Tacos", type: "Main Dish", cuisine: "Mexican", free_of: ["Milk", "Eggs", "Peanuts", "Tree Nuts", "Fish", "Shellfish", "Sesame"], ingredients: ["Ground Beef", "Tortillas (Wheat)", "Spices", "Soy Sauce (Tamari if GF)"], instructions: "Cook beef, season. Serve in warm tortillas with toppings." }, // Recipe 5: Contains Milk & Fish (Exclusion Test) { id: 5, name: "Creamy Salmon Pasta", type: "Main Dish", cuisine: "Mediterranean", free_of: ["Eggs", "Peanuts", "Tree Nuts", "Soy", "Shellfish", "Sesame"], ingredients: ["Salmon", "Cream (Milk)", "Pasta (Wheat)", "Spinach"], instructions: "Cook pasta. Flake salmon. Combine with creamy sauce." }, // Recipe 6: Nut-Free Appetizer { id: 6, name: "Guacamole & Chips", type: "Appetizer", cuisine: "Mexican", free_of: ["Milk", "Eggs", "Peanuts", "Tree Nuts", "Wheat", "Soy", "Fish", "Shellfish", "Sesame"], ingredients: ["Avocado", "Lime", "Onion", "Cilantro", "Salt"], instructions: "Mash avocado. Mix in remaining ingredients. Serve with corn chips." } ]; // II. B. Tab Navigation Logic const tabs = ['dashboard', 'config']; let currentTabIndex = 0; function updateNavButtons() { prevBtn.disabled = currentTabIndex === 0; nextBtn.disabled = currentTabIndex === tabs.length - 1; prevBtn.style.opacity = prevBtn.disabled ? '0.5' : '1'; nextBtn.style.opacity = nextBtn.disabled ? '0.5' : '1'; } window.switchTab = function(tabName) { const activeTab = document.querySelector('.tab-button.active'); const activeContent = document.querySelector('.tab-content.active'); const nextTabBtn = document.getElementById('tab-btn-' + tabName); const nextTabContent = document.getElementById('tab-content-' + tabName); // Guard against null elements if (!nextTabBtn || !nextTabContent) return; if (activeTab) activeTab.classList.remove('active'); if (activeContent) activeContent.classList.remove('active'); nextTabBtn.classList.add('active'); nextTabContent.classList.add('active'); currentTabIndex = tabs.indexOf(tabName); updateNavButtons(); }; window.navigateTabs = function(direction) { const newIndex = currentTabIndex + direction; if (newIndex >= 0 && newIndex < tabs.length) { switchTab(tabs[newIndex]); } }; // II. A. Functionality: Main Filtering Logic window.applyFiltersAndSwitchToDashboard = function() { // 1. Get Filters const excludedAllergens = Array.from(configTabContent.querySelectorAll('.allergen-checkboxes input:checked')).map(cb => cb.value); const dishTypeFilter = document.getElementById('dish-type-select').value; const keywordFilter = document.getElementById('keyword-input').value.trim().toLowerCase(); // 2. Filter Recipes const filteredRecipes = RECIPE_DB.filter(recipe => { // Allergen Exclusion Check const hasExcludedAllergen = excludedAllergens.some(allergen => !recipe.free_of.includes(allergen)); if (hasExcludedAllergen) { return false; } // Dish Type Check if (dishTypeFilter !== 'All' && recipe.type !== dishTypeFilter) { return false; } // Keyword Check (checks name, type, and ingredients) if (keywordFilter.length > 0) { const searchString = (recipe.name + ' ' + recipe.type + ' ' + recipe.ingredients.join(' ')).toLowerCase(); if (!searchString.includes(keywordFilter)) { return false; } } return true; }); // 3. Render Results renderResults(filteredRecipes, excludedAllergens, dishTypeFilter); // 4. Navigate to Dashboard (Mandatory spec step) switchTab('dashboard'); }; function renderResults(recipes, excludedAllergens, dishTypeFilter) { // Update Dashboard Title dashboardTitle.textContent = `Filtered Recipes: Showing ${recipes.length} Results`; // Update Selected Filters Summary const excludedText = excludedAllergens.length > 0 ? excludedAllergens.join(', ') : 'None.'; selectedFiltersEl.innerHTML = `

Active Exclusions: ${excludedText}

Cuisine/Dish Type Filter: ${dishTypeFilter}.

`; // Render Recipe Cards let html = ''; if (recipes.length === 0) { html = ` `; } else { recipes.forEach(recipe => { // Determine which allergens were excluded but are SAFE for this recipe const safeAllergens = excludedAllergens.filter(allergen => recipe.free_of.includes(allergen)); const safeAllergensText = safeAllergens.length > 0 ? safeAllergens.join(', ') : 'All selected allergens.'; html += ` `; }); } resultsContainer.innerHTML = html; } // II. C. PDF Download Functionality (Uses window.print for high-quality, professional output) window.downloadPDF = function() { // III. B. Website Integrity: Use the print media query CSS to hide surrounding elements. window.print(); }; // Initial setup updateNavButtons(); // Pre-populate with a general filter to show the initial state applyFiltersAndSwitchToDashboard(); });