tbvinh · July 19, 2024 15:01
diff --git a/chatbot.html b/chatbot.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Chatbot</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .chat-container {
      max-width: 500px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
    .chat-box {
      width: 100%;
      height: 300px;
      overflow-y: auto;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
    .user-input {
      width: calc(100% - 80px);
      padding: 10px;
    }
    .send-btn {
      width: 60px;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    .message {
      margin: 10px 0;
    }
    .message.user {
      text-align: right;
    }
    .message.bot {
      text-align: left;
    }
  </style>
 </head>
 <body>
  <div class="chat-container">
    <div class="chat-box" id="chat-box"></div>
    <input type="text" id="user-input" class="user-input" placeholder="Type a message">
    <button id="send-btn" class="send-btn">Send</button>
  </div>

  <script>
  const chatBox = document.getElementById('chat-box');
 const userInput = document.getElementById('user-input');
 const sendBtn = document.getElementById('send-btn');

 const responses = {
  "hi": "Hello! How can I help you today?",
  "hello": "Hi there! What can I do for you?",
  "how are you": "I'm a bot, so I don't have feelings, but thanks for asking! How can I assist you?",
  "what is your name": "I'm a chatbot created to help you with basic tasks.",
  "bye": "Goodbye! Have a great day!",
  "default": "I'm sorry, I don't understand that. Can you please rephrase?"
 };

 sendBtn.addEventListener('click', () => {
  const userText = userInput.value.trim().toLowerCase();
  if (userText) {
    addMessage(userText, 'user');
    const botResponse = responses[userText] || responses["default"];
    addMessage(botResponse, 'bot');
    userInput.value = '';
  }
 });

 function addMessage(text, sender) {
  const messageElement = document.createElement('div');
  messageElement.classList.add('message', sender);
  messageElement.textContent = text;
  chatBox.appendChild(messageElement);
  chatBox.scrollTop = chatBox.scrollHeight;
 }

 // Optional: Allow pressing "Enter" to send the message
 userInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    sendBtn.click();
  }
 });

  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Chatbot</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	}
	.chat-container {
	max-width: 500px;
	margin: 50px auto;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 10px;
	}
	.chat-box {
	width: 100%;
	height: 300px;
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 10px;
	}
	.user-input {
	width: calc(100% - 80px);
	padding: 10px;
	}
	.send-btn {
	width: 60px;
	padding: 10px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	}
	.message {
	margin: 10px 0;
	}
	.message.user {
	text-align: right;
	}
	.message.bot {
	text-align: left;
	}
	</style>
	</head>
	<body>
	<div class="chat-container">
	<div class="chat-box" id="chat-box"></div>
	<input type="text" id="user-input" class="user-input" placeholder="Type a message">
	<button id="send-btn" class="send-btn">Send</button>
	</div>

	<script>
	const chatBox = document.getElementById('chat-box');
	const userInput = document.getElementById('user-input');
	const sendBtn = document.getElementById('send-btn');

	const responses = {
	"hi": "Hello! How can I help you today?",
	"hello": "Hi there! What can I do for you?",
	"how are you": "I'm a bot, so I don't have feelings, but thanks for asking! How can I assist you?",
	"what is your name": "I'm a chatbot created to help you with basic tasks.",
	"bye": "Goodbye! Have a great day!",
	"default": "I'm sorry, I don't understand that. Can you please rephrase?"
	};

	sendBtn.addEventListener('click', () => {
	const userText = userInput.value.trim().toLowerCase();
	if (userText) {
	addMessage(userText, 'user');
	const botResponse = responses[userText] \|\| responses["default"];
	addMessage(botResponse, 'bot');
	userInput.value = '';
	}
	});

	function addMessage(text, sender) {
	const messageElement = document.createElement('div');
	messageElement.classList.add('message', sender);
	messageElement.textContent = text;
	chatBox.appendChild(messageElement);
	chatBox.scrollTop = chatBox.scrollHeight;
	}

	// Optional: Allow pressing "Enter" to send the message
	userInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	sendBtn.click();
	}
	});

	</script>
	</body>
	</html>