diff --git a/app.js b/app.js
new file mode 100644
index 0000000..3d50821
--- /dev/null
+++ b/app.js
@@ -0,0 +1,288 @@
+// App State
+let selectedIngredients = new Set();
+let currentRecipes = [];
+
+// DOM Elements
+const ingredientSearch = document.getElementById('ingredient-search');
+const suggestionsContainer = document.getElementById('suggestions');
+const selectedIngredientsContainer = document.getElementById('selected-ingredients');
+const recipesContainer = document.getElementById('recipes-container');
+const recipeCount = document.getElementById('recipe-count');
+const modal = document.getElementById('recipe-modal');
+const recipeDetails = document.getElementById('recipe-details');
+
+// Initialize
+function init() {
+ setupEventListeners();
+ updateRecipes();
+}
+
+// Event Listeners
+function setupEventListeners() {
+ ingredientSearch.addEventListener('input', handleSearch);
+ ingredientSearch.addEventListener('focus', handleSearch);
+
+ // Close suggestions when clicking outside
+ document.addEventListener('click', (e) => {
+ if (!e.target.closest('.search-box')) {
+ suggestionsContainer.classList.remove('active');
+ }
+ });
+
+ // Close modal when clicking outside
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ closeModal();
+ }
+ });
+
+ // Close modal with close button
+ document.querySelector('.close-btn').addEventListener('click', closeModal);
+
+ // Close modal with Escape key
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && modal.classList.contains('active')) {
+ closeModal();
+ }
+ });
+}
+
+// Search and Autocomplete
+function handleSearch(e) {
+ const searchTerm = e.target.value.toLowerCase().trim();
+
+ if (searchTerm.length === 0) {
+ suggestionsContainer.classList.remove('active');
+ return;
+ }
+
+ const matches = ALL_INGREDIENTS.filter(ingredient =>
+ ingredient.toLowerCase().includes(searchTerm) &&
+ !selectedIngredients.has(ingredient)
+ );
+
+ displaySuggestions(matches, searchTerm);
+}
+
+function displaySuggestions(matches, searchTerm) {
+ if (matches.length === 0) {
+ suggestionsContainer.classList.remove('active');
+ return;
+ }
+
+ suggestionsContainer.innerHTML = matches.slice(0, 10).map(ingredient => {
+ const highlighted = highlightMatch(ingredient, searchTerm);
+ return `${highlighted}
`;
+ }).join('');
+
+ suggestionsContainer.classList.add('active');
+
+ // Add click listeners to suggestions
+ suggestionsContainer.querySelectorAll('.suggestion-item').forEach(item => {
+ item.addEventListener('click', () => {
+ addIngredient(item.dataset.ingredient);
+ ingredientSearch.value = '';
+ suggestionsContainer.classList.remove('active');
+ ingredientSearch.focus();
+ });
+ });
+}
+
+function highlightMatch(text, searchTerm) {
+ const index = text.toLowerCase().indexOf(searchTerm.toLowerCase());
+ if (index === -1) return text;
+
+ const before = text.slice(0, index);
+ const match = text.slice(index, index + searchTerm.length);
+ const after = text.slice(index + searchTerm.length);
+
+ return `${before}${match}${after}`;
+}
+
+// Ingredient Management
+function addIngredient(ingredient) {
+ if (selectedIngredients.has(ingredient)) return;
+
+ selectedIngredients.add(ingredient);
+ updateSelectedIngredients();
+ updateRecipes();
+}
+
+function removeIngredient(ingredient) {
+ selectedIngredients.delete(ingredient);
+ updateSelectedIngredients();
+ updateRecipes();
+}
+
+function updateSelectedIngredients() {
+ if (selectedIngredients.size === 0) {
+ selectedIngredientsContainer.innerHTML = `
+
+
🥕
+
Start adding ingredients to find recipes!
+
+ ${capitalizeFirst(ingredient)}
+
+
+ `).join('');
+}
+
+// Recipe Matching and Display
+function updateRecipes() {
+ if (selectedIngredients.size === 0) {
+ recipesContainer.innerHTML = `
+
+
👨🍳
+
Add some ingredients and I'll suggest delicious recipes!
+
+
😔
+
No recipes found with these ingredients. Try adding more!
+
+
${recipe.image}
+
${Math.round(recipe.matchScore)}% match
+
${recipe.name}
+
+ ⏱️ ${recipe.time}
+ 👥 ${recipe.servings}
+ 📊 ${recipe.difficulty}
+
+ ${recipe.missingIngredients.length > 0 ? `
+
+ Missing: ${recipe.missingIngredients.slice(0, 3).map(ing => capitalizeFirst(ing)).join(', ')}
+ ${recipe.missingIngredients.length > 3 ? ` +${recipe.missingIngredients.length - 3} more` : ''}
+
+ ` : '
✓ You have all ingredients!
'}
+
+
${recipe.image}
+
${recipe.name}
+
+
+ ⏱️ ${recipe.time}
+ 👥 ${recipe.servings} servings
+ 📊 ${recipe.difficulty}
+ 🏷️ ${recipe.category}
+
+
+ ${matchScore > 0 ? `
+
+ ${Math.round(matchScore)}% ingredient match
+
+ ` : ''}
+
+ ${hasAllIngredients ? `
+
+ 🎉 You have all the ingredients for this recipe!
+
+ ` : ''}
+
+
+
Ingredients
+
+ ${recipe.ingredients.map(ing => {
+ const hasIngredient = selectedIngredients.has(ing);
+ return `- ${capitalizeFirst(ing)}${hasIngredient ? ' ✓' : ''}
`;
+ }).join('')}
+
+
+
+
+
Instructions
+
+ ${recipe.instructions.map(step => `- ${step}
`).join('')}
+
+
+
+ ${recipe.missingIngredients && recipe.missingIngredients.length > 0 ? `
+
+ Missing Ingredients:
+ ${recipe.missingIngredients.map(ing => capitalizeFirst(ing)).join(', ')}
+
+ ` : ''}
+
+
+
+
+
+ What's in your fridge?
+
+
+
+
+
+
🥕
+
Start adding ingredients to find recipes!
+
+
+
+
👨🍳
+
Add some ingredients and I'll suggest delicious recipes!
+
+
+