ChatGPT #288
Description
<title>Mini Chatbot</title>
<style>
body {
font-family: Arial;
background-color: #111;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#chatbox {
width: 300px;
height: 300px;
border: 2px solid #444;
padding: 10px;
overflow-y: auto;
background-color: #222;
}
input {
width: 280px;
margin-top: 10px;
padding: 5px;
border: none;
outline: none;
}
</style>
<script>
function sendMessage() {
const input = document.getElementById('userInput');
const chatbox = document.getElementById('chatbox');
const userText = input.value.trim();
if (userText === '') return;
chatbox.innerHTML += `
You: ${userText}
`; input.value = ''; // Simple chatbot responses let botReply = ''; if (userText.toLowerCase().includes('hello')) { botReply = 'Hey there!'; } else if (userText.toLowerCase().includes('how are you')) { botReply = 'I’m just code, but I’m vibing!'; } else if (userText.toLowerCase().includes('bye')) { botReply = 'Later 👋'; } else { botReply = 'I don’t know that one yet 😅'; } chatbox.innerHTML += `Bot: ${botReply}
`; chatbox.scrollTop = chatbox.scrollHeight; } </script>