Update static/script.js

static/script.js

@@ -190,8 +190,49 @@ function displaySelectedIngredients() {
         div.textContent = ingredient.name;
         selectedArea.appendChild(div);
     });
+
+    // Check if there are selected ingredients
+    if (selectedIngredients.length > 0) {
+        // Create and display the Submit button
+        let submitButton = document.querySelector('.submit-button');
+        if (!submitButton) {
+            submitButton = document.createElement('button');
+            submitButton.className = 'submit-button';
+            submitButton.textContent = 'Submit Ingredients';
+            submitButton.onclick = () => {
+                submitIngredients(selectedIngredients);
+            };
+            chatMessages.appendChild(submitButton);
+        }
+    }
 }
 
+function submitIngredients(selectedIngredients) {
+    // Here, you can send the selected ingredients to the backend or perform any other action
+    console.log("Submitting ingredients: ", selectedIngredients);
+
+    // Example: Send to the backend (this is just an example, adjust according to your backend)
+    fetch('/submit_ingredients', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ ingredients: selectedIngredients })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            addMessage('bot', 'Your ingredients have been successfully submitted!');
+        } else {
+            addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: ${error.message}`);
+    });
+}
+
+
 function displayOptions(options) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {