Update static/script.js

static/script.js

@@ -5,8 +5,7 @@ let selectedIngredients = [];
 
 const elements = {
     chatMessages: document.getElementById('chatMessages'),
-    userInput: document.getElementById('userInput'),
-    sendButton: document.querySelector('.chat-input button') // Reference the Send button
+    userInput: document.getElementById('userInput')
 };
 
 function addMessage(role, message) {
@@ -19,7 +18,7 @@ function addMessage(role, message) {
     messageDiv.textContent = message;
     elements.chatMessages.appendChild(messageDiv);
     elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
-    console.log(`Added ${role} message: ${message}`);
+    console.log(Added ${role} message: ${message});
 }
 
 function sendMessage() {
@@ -45,14 +44,14 @@ function handleResponse(userInput) {
     let options = [];
 
     if (conversation.length === 2) { // After name input
-        botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
+        botResponse = Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?;
         options = [
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' },
             { text: 'Both', class: 'gray' }
         ];
     } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
-        botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage}:`;
+        botResponse = Great choice! 🍽️ These are the available ingredients for ${lastMessage}:;
         fetchIngredients(lastMessage);
         return;
     }
@@ -74,17 +73,17 @@ function fetchIngredients(dietaryPreference) {
     .then(response => response.json())
     .then(data => {
         if (data.error) {
-            addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
+            addMessage('bot', Sorry, there was an error fetching ingredients: ${data.error});
         } else {
             const ingredients = data.ingredients || [];
             addMessage('bot', 'Great choice! These are available ingredients:');
             displayIngredientsList(ingredients);
             displaySelectedIngredients();
-            console.log(`Ingredients fetched for ${dietaryPreference}:`, ingredients);
+            console.log(Ingredients fetched for ${dietaryPreference}:, ingredients);
         }
     })
     .catch(error => {
-        addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+        addMessage('bot', Error: Unable to connect to the ingredient database. ${error.message});
     });
 }
 
@@ -157,12 +156,20 @@ function displaySelectedIngredients() {
         nameSpan.textContent = ingredient.name;
         nameSpan.style.flex = '1';
         const removeButton = document.createElement('button');
-        removeButton.innerHTML = '✖'; // Unicode for "X" symbol
-        removeButton.className = 'remove-button';
+        removeButton.innerHTML = '✖'; // Unicode for "X" symbol
         removeButton.onclick = () => {
             selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
             displaySelectedIngredients();
         };
+        removeButton.style.marginLeft = '10px';
+        removeButton.style.padding = '2px 8px';
+        removeButton.style.backgroundColor = '#000000'; // Black background to match image
+        removeButton.style.color = 'white'; // White "X" to match image
+        removeButton.style.border = 'none';
+        removeButton.style.borderRadius = '5px';
+        removeButton.style.cursor = 'pointer';
+        removeButton.style.fontSize = '16px'; // Adjust size for visibility
+        removeButton.style.lineHeight = '1'; // Ensure "X" is centered
         div.appendChild(nameSpan);
         div.appendChild(removeButton);
         selectedArea.appendChild(div);
@@ -186,7 +193,7 @@ function displayOptions(options) {
     options.forEach(opt => {
         const button = document.createElement('button');
         button.textContent = opt.text;
-        button.className = `option-button ${opt.class}`;
+        button.className = option-button ${opt.class};
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
@@ -200,7 +207,7 @@ function displayOptions(options) {
     backButton.className = 'option-button';
     backButton.onclick = () => {
         const userName = conversation.length > 1 ? conversation[1].message : 'User';
-        conversation = [{ role: 'bot', message: `Hi there! I'm Chef Bot! May I know your name?` }, { role: 'user', message: userName }, { role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` }];
+        conversation = [{ role: 'bot', message: Hi there! I'm Chef Bot! May I know your name? }, { role: 'user', message: userName }, { role: 'bot', message: Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer? }];
         selectedIngredients = [];
         elements.chatMessages.innerHTML = '';
         conversation.forEach(msg => addMessage(msg.role, msg.message));
@@ -220,17 +227,12 @@ function sendSelectedIngredients() {
         return;
     }
     const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
-    addMessage('user', `Selected ingredients: ${ingredientsList}`);
-    addMessage('bot', `Great! I’ll suggest a recipe with ${ingredientsList}. How about a yogurt-based curry with onions and tomatoes? Let me know if you'd like to adjust!`);
+    addMessage('user', Selected ingredients: ${ingredientsList});
+    addMessage('bot', Great! I’ll suggest a recipe with ${ingredientsList}. How about a yogurt-based curry with onions and tomatoes? Let me know if you'd like to adjust!);
     selectedIngredients = []; // Reset after sending
     displaySelectedIngredients(); // Update the display
 }
 
-// Add click event listener for the Send button in chat input
-if (elements.sendButton) {
-    elements.sendButton.addEventListener('click', sendMessage);
-}
-
 document.getElementById('userInput').addEventListener('keypress', function(e) {
     if (e.key === 'Enter') {
         sendMessage();