geethareddy commited on
Commit
db0aaca
·
verified ·
1 Parent(s): db4b5e6

Update static/script.js

Browse files
Files changed (1) hide show
  1. static/script.js +21 -19
static/script.js CHANGED
@@ -5,8 +5,7 @@ let selectedIngredients = [];
5
 
6
  const elements = {
7
  chatMessages: document.getElementById('chatMessages'),
8
- userInput: document.getElementById('userInput'),
9
- sendButton: document.querySelector('.chat-input button') // Reference the Send button
10
  };
11
 
12
  function addMessage(role, message) {
@@ -19,7 +18,7 @@ function addMessage(role, message) {
19
  messageDiv.textContent = message;
20
  elements.chatMessages.appendChild(messageDiv);
21
  elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
22
- console.log(`Added ${role} message: ${message}`);
23
  }
24
 
25
  function sendMessage() {
@@ -45,14 +44,14 @@ function handleResponse(userInput) {
45
  let options = [];
46
 
47
  if (conversation.length === 2) { // After name input
48
- botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
49
  options = [
50
  { text: 'Vegetarian', class: 'green' },
51
  { text: 'Non-Vegetarian', class: 'red' },
52
  { text: 'Both', class: 'gray' }
53
  ];
54
  } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
55
- botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage}:`;
56
  fetchIngredients(lastMessage);
57
  return;
58
  }
@@ -74,17 +73,17 @@ function fetchIngredients(dietaryPreference) {
74
  .then(response => response.json())
75
  .then(data => {
76
  if (data.error) {
77
- addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
78
  } else {
79
  const ingredients = data.ingredients || [];
80
  addMessage('bot', 'Great choice! These are available ingredients:');
81
  displayIngredientsList(ingredients);
82
  displaySelectedIngredients();
83
- console.log(`Ingredients fetched for ${dietaryPreference}:`, ingredients);
84
  }
85
  })
86
  .catch(error => {
87
- addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
88
  });
89
  }
90
 
@@ -157,12 +156,20 @@ function displaySelectedIngredients() {
157
  nameSpan.textContent = ingredient.name;
158
  nameSpan.style.flex = '1';
159
  const removeButton = document.createElement('button');
160
- removeButton.innerHTML = ''; // Unicode for "X" symbol
161
- removeButton.className = 'remove-button';
162
  removeButton.onclick = () => {
163
  selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
164
  displaySelectedIngredients();
165
  };
 
 
 
 
 
 
 
 
 
166
  div.appendChild(nameSpan);
167
  div.appendChild(removeButton);
168
  selectedArea.appendChild(div);
@@ -186,7 +193,7 @@ function displayOptions(options) {
186
  options.forEach(opt => {
187
  const button = document.createElement('button');
188
  button.textContent = opt.text;
189
- button.className = `option-button ${opt.class}`;
190
  button.onclick = () => {
191
  addMessage('user', opt.text);
192
  conversation.push({ role: 'user', message: opt.text });
@@ -200,7 +207,7 @@ function displayOptions(options) {
200
  backButton.className = 'option-button';
201
  backButton.onclick = () => {
202
  const userName = conversation.length > 1 ? conversation[1].message : 'User';
203
- 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?` }];
204
  selectedIngredients = [];
205
  elements.chatMessages.innerHTML = '';
206
  conversation.forEach(msg => addMessage(msg.role, msg.message));
@@ -220,17 +227,12 @@ function sendSelectedIngredients() {
220
  return;
221
  }
222
  const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
223
- addMessage('user', `Selected ingredients: ${ingredientsList}`);
224
- 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!`);
225
  selectedIngredients = []; // Reset after sending
226
  displaySelectedIngredients(); // Update the display
227
  }
228
 
229
- // Add click event listener for the Send button in chat input
230
- if (elements.sendButton) {
231
- elements.sendButton.addEventListener('click', sendMessage);
232
- }
233
-
234
  document.getElementById('userInput').addEventListener('keypress', function(e) {
235
  if (e.key === 'Enter') {
236
  sendMessage();
 
5
 
6
  const elements = {
7
  chatMessages: document.getElementById('chatMessages'),
8
+ userInput: document.getElementById('userInput')
 
9
  };
10
 
11
  function addMessage(role, message) {
 
18
  messageDiv.textContent = message;
19
  elements.chatMessages.appendChild(messageDiv);
20
  elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
21
+ console.log(Added ${role} message: ${message});
22
  }
23
 
24
  function sendMessage() {
 
44
  let options = [];
45
 
46
  if (conversation.length === 2) { // After name input
47
+ botResponse = Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?;
48
  options = [
49
  { text: 'Vegetarian', class: 'green' },
50
  { text: 'Non-Vegetarian', class: 'red' },
51
  { text: 'Both', class: 'gray' }
52
  ];
53
  } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
54
+ botResponse = Great choice! 🍽️ These are the available ingredients for ${lastMessage}:;
55
  fetchIngredients(lastMessage);
56
  return;
57
  }
 
73
  .then(response => response.json())
74
  .then(data => {
75
  if (data.error) {
76
+ addMessage('bot', Sorry, there was an error fetching ingredients: ${data.error});
77
  } else {
78
  const ingredients = data.ingredients || [];
79
  addMessage('bot', 'Great choice! These are available ingredients:');
80
  displayIngredientsList(ingredients);
81
  displaySelectedIngredients();
82
+ console.log(Ingredients fetched for ${dietaryPreference}:, ingredients);
83
  }
84
  })
85
  .catch(error => {
86
+ addMessage('bot', Error: Unable to connect to the ingredient database. ${error.message});
87
  });
88
  }
89
 
 
156
  nameSpan.textContent = ingredient.name;
157
  nameSpan.style.flex = '1';
158
  const removeButton = document.createElement('button');
159
+ removeButton.innerHTML = '✖'; // Unicode for "X" symbol
 
160
  removeButton.onclick = () => {
161
  selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
162
  displaySelectedIngredients();
163
  };
164
+ removeButton.style.marginLeft = '10px';
165
+ removeButton.style.padding = '2px 8px';
166
+ removeButton.style.backgroundColor = '#000000'; // Black background to match image
167
+ removeButton.style.color = 'white'; // White "X" to match image
168
+ removeButton.style.border = 'none';
169
+ removeButton.style.borderRadius = '5px';
170
+ removeButton.style.cursor = 'pointer';
171
+ removeButton.style.fontSize = '16px'; // Adjust size for visibility
172
+ removeButton.style.lineHeight = '1'; // Ensure "X" is centered
173
  div.appendChild(nameSpan);
174
  div.appendChild(removeButton);
175
  selectedArea.appendChild(div);
 
193
  options.forEach(opt => {
194
  const button = document.createElement('button');
195
  button.textContent = opt.text;
196
+ button.className = option-button ${opt.class};
197
  button.onclick = () => {
198
  addMessage('user', opt.text);
199
  conversation.push({ role: 'user', message: opt.text });
 
207
  backButton.className = 'option-button';
208
  backButton.onclick = () => {
209
  const userName = conversation.length > 1 ? conversation[1].message : 'User';
210
+ 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? }];
211
  selectedIngredients = [];
212
  elements.chatMessages.innerHTML = '';
213
  conversation.forEach(msg => addMessage(msg.role, msg.message));
 
227
  return;
228
  }
229
  const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
230
+ addMessage('user', Selected ingredients: ${ingredientsList});
231
+ 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!);
232
  selectedIngredients = []; // Reset after sending
233
  displaySelectedIngredients(); // Update the display
234
  }
235
 
 
 
 
 
 
236
  document.getElementById('userInput').addEventListener('keypress', function(e) {
237
  if (e.key === 'Enter') {
238
  sendMessage();