<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple AI Chatbot</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#chat-container {
width: 400px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
padding: 20px;
}
#messages {
height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
.bot { color: blue; margin: 5px 0; }
.user { color: green; margin: 5px 0; text-align: right; }
input {
width: 80%;
padding: 8px;
}
button {
padding: 8px 12px;
}
</style>
</head>
<body>
<div id="chat-container">
<h2>AI Chatbot</h2>
<div id="messages"></div>
<input type="text" id="userInput" placeholder="Ask me something...">
<button onclick="sendMessage()">Send</button>
</div>
<script>
const messagesDiv = document.getElementById("messages");
function sendMessage() {
let input = document.getElementById("userInput").value;
if (input.trim() === "") return;
addMessage("You: " + input, "user");
document.getElementById("userInput").value = "";
// Simple AI Responses
let reply = "";
input = input.toLowerCase();
if (input.includes("hello") || input.includes("hi")) {
reply = "Hello! How can I help you?";
} else if (input.includes("your name")) {
reply = "I’m a simple AI chatbot made with HTML & JS.";
} else if (input.includes("age")) {
reply = "I don’t have an age, but you said you are 29 🙂.";
} else if (input.includes("bye")) {
reply = "Goodbye! Have a great day!";
} else {
reply = "Sorry, I don’t understand that yet.";
}
setTimeout(() => addMessage("Bot: " + reply, "bot"), 500);
}
function addMessage(msg, type) {
let p = document.createElement("p");
p.className = type;
p.textContent = msg;
messagesDiv.appendChild(p);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
</script>
</body>
</html>
