Update static/script.js

static/script.js

@@ -18,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() {
@@ -44,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;
     }
@@ -73,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});
     });
 }
 
@@ -117,12 +117,6 @@ function displayIngredientsList(ingredients) {
         name.style.textAlign = 'center';
         name.style.marginTop = '5px';
         name.style.fontSize = '12px';
-        const description = document.createElement('div');
-        description.textContent = ingredient.description; // Display the description
-        description.style.fontSize = '10px';
-        description.style.color = '#666';
-        description.style.marginTop = '5px';
-
         const button = document.createElement('button');
         button.textContent = 'Add';
         button.onclick = () => {
@@ -131,10 +125,8 @@ function displayIngredientsList(ingredients) {
                 displaySelectedIngredients();
             }
         };
-        
         item.appendChild(img);
         item.appendChild(name);
-        item.appendChild(description); // Add description below name
         item.appendChild(button);
         ingredientsList.appendChild(item);
     });
@@ -201,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 });
@@ -215,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));
@@ -235,8 +227,8 @@ 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
 }