60 lines
2.0 KiB
HTML
60 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Simple Rule-Based Bot</title>
|
|
<!--<link rel=
|
|
"stylesheet" href="style.css">-->
|
|
<style>
|
|
#chatbox { border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 10px; }
|
|
.user { text-align: right; color: blue; }
|
|
.bot { text-align: left; color: green; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chatbox"></div>
|
|
<input type="text" id="userInput" placeholder="Ask me something...">
|
|
<button onclick="sendMessage()">Send</button>
|
|
|
|
<script>
|
|
const chatbox = document.getElementById('chatbox');
|
|
const userInput = document.getElementById('userInput');
|
|
|
|
function addMessage(sender, text) {
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add(sender);
|
|
messageElement.textContent = text;
|
|
chatbox.appendChild(messageElement);
|
|
chatbox.scrollTop = chatbox.scrollHeight;
|
|
}
|
|
|
|
function getBotResponse(input) {
|
|
input = input.toLowerCase();
|
|
if (input.includes("hello") || input.includes("hi")) {
|
|
return "Hello! How can I help you?";
|
|
} else if (input.includes("how are you")) {
|
|
return "I'm just a bot, but I'm functioning perfectly!";
|
|
} else if (input.includes("bye")) {
|
|
return "Goodbye! Have a great day!";
|
|
} else {
|
|
return "I'm not sure how to answer that yet.";
|
|
}
|
|
}
|
|
|
|
function sendMessage() {
|
|
const userMessage = userInput.value;
|
|
if (userMessage.trim() === '') return;
|
|
|
|
addMessage('user', `You: ${userMessage}`);
|
|
const botResponse = getBotResponse(userMessage);
|
|
addMessage('bot', `Bot: ${botResponse}`);
|
|
|
|
userInput.value = '';
|
|
}
|
|
//userInput.addEventListener('keypress', function (e) {
|
|
// if (e.key === 'Enter') {
|
|
// sendMessage();
|
|
// }
|
|
//});
|
|
</script>
|
|
</body>
|
|
</html> |