Here's a working food recommendation dashboard with input, selection, and filtering functionality: Food Recommendation Dashboard

Food Recommendation Engine

Find your perfect meal based on preferences

Set Your Preferences

Recommended Meals

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; color: #333; } .dashboard { max-width: 1200px; margin: 0 auto; padding: 2rem; } header { text-align: center; margin-bottom: 2rem; } header h1 { color: #2c3e50; margin-bottom: 0.5rem; } .content { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; } .preferences { background-color: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .preferences h2 { margin-bottom: 1.5rem; color: #2c3e50; } .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 500; } select, input[type="number"] { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; } select[multiple] { height: 100px; } input[type="range"] { width: 100%; margin-top: 0.5rem; } button { background-color: #3498db; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-weight: 500; width: 100%; } button:hover { background-color: #2980b9; } .results { background-color: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .results h2 { margin-bottom: 1.5rem; color: #2c3e50; } .food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .food-card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: transform 0.2s; } .food-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .food-image { height: 150px; background-color: #eee; background-size: cover; background-position: center; } .food-info { padding: 1rem; } .food-info h3 { margin-bottom: 0.5rem; color: #2c3e50; } .food-meta { display: flex; justify-content: space-between; color: #7f8c8d; font-size: 0.9rem; margin-top: 0.5rem; } .tag { display: inline-block; padding: 0.25rem 0.5rem; background-color: #ecf0f1; border-radius: 4px; font-size: 0.8rem; margin-right: 0.5rem; margin-top: 0.5rem; } // Sample food data const foodDatabase = [ { id: 1, name: "Margherita Pizza", cuisine: "italian", diet: "vegetarian", spice: 1, time: 20, description: "Classic pizza with tomato sauce, mozzarella, and basil", image: "https://images.unsplash.com/photo-1574071318508-1cdbab80d002" }, { id: 2, name: "Chicken Tacos", cuisine: "mexican", diet: "none", spice: 3, time: 25, description: "Soft tortillas with grilled chicken, salsa, and avocado", image: "https://images.unsplash.com/photo-1565299585323-38d6b0865b47" }, { id: 3, name: "Vegetable Curry", cuisine: "indian", diet: "vegan", spice: 4, time: 35, description: "Spicy mix of vegetables in aromatic curry sauce", image: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c" }, { id: 4, name: "Sushi Platter", cuisine: "japanese", diet: "none", spice: 2, time: 15, description: "Assorted fresh sushi with wasabi and soy sauce", image: "https://images.unsplash.com/photo-1579871494447-9811cf80d66c" }, { id: 5, name: "Cheeseburger", cuisine: "american", diet: "none", spice: 2, time: 15, description: "Juicy beef patty with cheese, lettuce, and special sauce", image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd" }, { id: 6, name: "Pasta Carbonara", cuisine: "italian", diet: "none", spice: 1, time: 30, description: "Creamy pasta with pancetta, eggs, and parmesan", image: "https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb" }, { id: 7, name: "Vegan Burrito", cuisine: "mexican", diet: "vegan", spice: 2, time: 20, description: "Bean and rice burrito with guacamole and salsa", image: "https://images.unsplash.com/photo-1547592180-85f173990554" }, { id: 8, name: "Ramen", cuisine: "japanese", diet: "none", spice: 3, time: 25, description: "Noodle soup with pork, egg, and vegetables", image: "https://images.unsplash.com/photo-1526318896980-cf78c088244c" } ]; // DOM elements const form = document.getElementById('preference-form'); const resultsContainer = document.getElementById('food-results'); const spiceInput = document.getElementById('spice'); const spiceValue = document.getElementById('spice-value'); // Update spice level display spiceInput.addEventListener('input', () => { spiceValue.textContent = spiceInput.value; }); // Form submission handler form.addEventListener('submit', (e) => { e.preventDefault(); const preferences = getPreferences(); const recommendations = getRecommendations(preferences); displayResults(recommendations); }); // Get user preferences from form function getPreferences() { const cuisineSelect = document.getElementById('cuisine'); const selectedCuisines = Array.from(cuisineSelect.selectedOptions).map(option => option.value); return { cuisines: selectedCuisines.length > 0 ? selectedCuisines : ['italian', 'mexican', 'japanese', 'indian', 'american'], diet: document.getElementById('diet').value, spice: parseInt(document.getElementById('spice').value), time: parseInt(document.getElementById('time').value) }; } // Filter food based on preferences function getRecommendations(preferences) { return foodDatabase.filter(food => { // Check cuisine if (!preferences.cuisines.includes(food.cuisine)) return false; // Check dietary restrictions if (preferences.diet !== 'none' && food.diet !== preferences.diet) return false; // Check spice level (within 1 level of preference) if (Math.abs(food.spice - preferences.spice) > 1) return false; // Check preparation time if (food.time > preferences.time) return false; return true; }); } // Display results function displayResults(foods) { resultsContainer.innerHTML = ''; if (foods.length === 0) { resultsContainer.innerHTML = '

No matching foods found. Try adjusting your preferences.

'; return; } foods.forEach(food => { const foodCard = document.createElement('div'); foodCard.className = 'food-card'; foodCard.innerHTML = `

${food.name}

${food.description}

${food.time} mins Spice: ${'🌶️'.repeat(food.spice)}

${food.cuisine} ${food.diet !== 'none' ? `${food.diet}` : ''}

`; resultsContainer.appendChild(foodCard); }); } // Initial load with default preferences const defaultPreferences = { cuisines: ['italian', 'mexican', 'japanese', 'indian', 'american'], diet: 'none', spice: 2, time: 30 }; displayResults(getRecommendations(defaultPreferences)); This dashboard includes: 1. A preferences form with multiple cuisine selection, dietary restrictions, spice level, and prep time 2. A recommendation engine that filters foods based on user preferences 3. A responsive grid display of matching food items with images and details 4. Interactive elements like range sliders and multi-select 5. Sample food data with various attributes for filtering