Create script.js
Browse files
script.js
ADDED
@@ -0,0 +1,69 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// Get the DOM elements
|
2 |
+
const chatBox = document.getElementById('chat-box');
|
3 |
+
const userInput = document.getElementById('user-input');
|
4 |
+
|
5 |
+
// Function to simulate a response from the chatbot
|
6 |
+
function botResponse(userMessage) {
|
7 |
+
const lowerCaseMessage = userMessage.toLowerCase();
|
8 |
+
let response = '';
|
9 |
+
|
10 |
+
// Basic responses based on user input
|
11 |
+
if (lowerCaseMessage.includes('hello') || lowerCaseMessage.includes('hi')) {
|
12 |
+
response = "Hello! Welcome to our restaurant. How can I assist you today?";
|
13 |
+
} else if (lowerCaseMessage.includes('menu')) {
|
14 |
+
response = "Our menu includes: Pizza, Pasta, Burger, Salad, and Desserts. What would you like to order?";
|
15 |
+
} else if (lowerCaseMessage.includes('order') || lowerCaseMessage.includes('buy')) {
|
16 |
+
response = "What would you like to order from the menu?";
|
17 |
+
} else if (lowerCaseMessage.includes('pizza')) {
|
18 |
+
response = "Great choice! Our pizzas are delicious. Would you like a small, medium, or large pizza?";
|
19 |
+
} else if (lowerCaseMessage.includes('pasta')) {
|
20 |
+
response = "Yum! Our pasta is freshly made. Would you like it with marinara sauce or Alfredo?";
|
21 |
+
} else if (lowerCaseMessage.includes('burger')) {
|
22 |
+
response = "Our burgers are served with fries. Would you like a vegetarian or beef burger?";
|
23 |
+
} else if (lowerCaseMessage.includes('salad')) {
|
24 |
+
response = "We have a variety of salads. Would you like a Caesar salad or a garden salad?";
|
25 |
+
} else if (lowerCaseMessage.includes('dessert')) {
|
26 |
+
response = "For dessert, we have cakes, ice cream, and pie. What would you like to try?";
|
27 |
+
} else {
|
28 |
+
response = "I'm sorry, I didn't quite get that. Can you please repeat?";
|
29 |
+
}
|
30 |
+
|
31 |
+
// Display the bot response
|
32 |
+
displayMessage(response, 'bot');
|
33 |
+
}
|
34 |
+
|
35 |
+
// Function to display a message in the chat box
|
36 |
+
function displayMessage(message, sender) {
|
37 |
+
const messageElement = document.createElement('div');
|
38 |
+
messageElement.classList.add(sender === 'bot' ? 'bot-message' : 'user-message');
|
39 |
+
messageElement.textContent = message;
|
40 |
+
|
41 |
+
// Append the message to the chat box
|
42 |
+
chatBox.appendChild(messageElement);
|
43 |
+
|
44 |
+
// Scroll to the bottom to see the latest message
|
45 |
+
chatBox.scrollTop = chatBox.scrollHeight;
|
46 |
+
}
|
47 |
+
|
48 |
+
// Function to handle the sending of user input
|
49 |
+
function sendMessage() {
|
50 |
+
const userMessage = userInput.value.trim();
|
51 |
+
|
52 |
+
if (userMessage !== '') {
|
53 |
+
// Display user message
|
54 |
+
displayMessage(userMessage, 'user');
|
55 |
+
|
56 |
+
// Clear the user input field
|
57 |
+
userInput.value = '';
|
58 |
+
|
59 |
+
// Get bot's response after a slight delay
|
60 |
+
setTimeout(() => botResponse(userMessage), 500);
|
61 |
+
}
|
62 |
+
}
|
63 |
+
|
64 |
+
// Allow the user to press "Enter" to send a message
|
65 |
+
userInput.addEventListener('keypress', function(event) {
|
66 |
+
if (event.key === 'Enter') {
|
67 |
+
sendMessage();
|
68 |
+
}
|
69 |
+
});
|