1. Create the HTML Structure
This HTML will define the chat area and input fields:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple AI Chatbot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div id="chatbox">
<div class="message bot">Hi! I'm your AI chatbot. How can I help you today?</div>
</div>
<input type="text" id="userInput" placeholder="Type your message here...">
<button onclick="sendMessage()">Send</button>
</div>
<script src="script.js"></script>
</body>
</html>
2. Add Basic CSS (style.css)
This CSS adds some basic styling for the chatbot interface:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.chat-container {
width: 400px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#chatbox {
height: 300px;
overflow-y: scroll;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
}
.message {
padding: 8px;
margin: 5px 0;
border-radius: 5px;
}
.bot {
background-color: #d1e7dd;
align-self: flex-start;
}
.user {
background-color: #add8e6;
align-self: flex-end;
text-align: right;
}
input, button {
width: 100%;
padding: 8px;
margin-top: 5px;
font-size: 16px;
}
3. Add JavaScript for Functionality (script.js)
This JavaScript code will handle the user's input, simulate AI responses, and display the conversation:
function sendMessage() {
const userInput = document.getElementById("userInput").value;
if (userInput.trim() === "") return;
// Display user message
displayMessage(userInput, "user");
// Clear input field
document.getElementById("userInput").value = "";
// Generate a bot response after a short delay
setTimeout(() => {
const botResponse = generateResponse(userInput);
displayMessage(botResponse, "bot");
}, 500);
}
function displayMessage(message, sender) {
const chatbox = document.getElementById("chatbox");
const messageDiv = document.createElement("div");
messageDiv.className = `message ${sender}`;
messageDiv.innerText = message;
chatbox.appendChild(messageDiv);
// Scroll to the bottom
chatbox.scrollTop = chatbox.scrollHeight;
}
function generateResponse(input) {
// Simple responses (can be replaced with more complex logic or API call)
const responses = [
"Interesting, tell me more!",
"I'm here to listen.",
"Can you explain that further?",
"I'm not sure, but I'll try to help."
];
// Choose a random response
return responses[Math.floor(Math.random() * responses.length)];
}
Explanation
HTML: Creates a chat interface with a chat display area, input box, and button.
CSS: Styles the chat messages to differentiate between user and bot messages.
JavaScript: Handles user input, generates basic bot responses, and displays messages in the chatbox.
Adding AI Responses
To make it more intelligent, you could connect this to a server-side API (like OpenAI's ChatGPT API) by making asynchronous requests from JavaScript to get responses.
