Posts
-
Chatbot in HTML
Below is a simple implementation of a chatbot using HTML, CSS, and JavaScript. This example creates a basic chat interface that allows for user interaction.
This code will create a simple webpage with a chat interface. Users can type messages, click the send button, and receive a basic response from the chatbot.
-
Chatbot in HTML
Below is a simple implementation of a chatbot using HTML, CSS, and JavaScript. This example creates a basic chat interface that allows for user interaction.
This code will create a simple webpage with a chat interface. Users can type messages, click the send button, and receive a basic response from the chatbot.
<!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;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
#chatbox {
width: 300px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: scroll;
background-color: white;
}
#userInput {
width: 240px;
padding: 10px;
margin-top: 10px;
}
#sendBtn {
padding: 10px;
}
.message {
margin: 5px;
padding: 5px;
border-radius: 5px;
}
.user {
background-color: #d1e7dd;
align-self: flex-end;
}
.bot {
background-color: #f8d7da;
align-self: flex-start;
}
#chatContainer {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<h1>Chatbot</h1>
<div id="chatContainer">
<div id="chatbox"></div>
<input type="text" id="userInput" placeholder="Type your message here..." />
<button id="sendBtn">Send</button>
</div>
<script>
document.getElementById('sendBtn').addEventListener('click', function() {
const input = document.getElementById('userInput');
const userMessage = input.value;
if (userMessage) {
addMessage(userMessage, 'user');
input.value = '';
setTimeout(() => {
addMessage(getBotResponse(userMessage), 'bot');
}, 1000);
}
});
function addMessage(message, sender) {
const chatbox = document.getElementById('chatbox');
const messageDiv = document.createElement('div');
messageDiv.classList.add('message', sender);
messageDiv.textContent = message;
chatbox.appendChild(messageDiv);
chatbox.scrollTop = chatbox.scrollHeight;
}
function getBotResponse(userMessage) {
const response = "I'm just a simple bot. You said: " + userMessage;
return response;
}
</script>
</body>
</html>
DAR-1640 