Scribd
Upload
8 views

chatbot code

The document is an HTML code for a Creative AI Chatbot interface that allows users to interact with a chatbot through a chatbox. It includes styling for the chat interface and JavaScript functions to handle user input, simulate bot responses, and display messages. The bot can respond to various user prompts with predefined responses, making the chat experience engaging and interactive.

Uploaded by

geethasb1980
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
8 views

chatbot code

The document is an HTML code for a Creative AI Chatbot interface that allows users to interact with a chatbot through a chatbox. It includes styling for the chat interface and JavaScript functions to handle user input, simulate bot responses, and display messages. The bot can respond to various user prompts with predefined responses, making the chat experience engaging and interactive.

Uploaded by

geethasb1980
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Creative AI Chatbot</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
#chatbox {
width: 100%;
max-width: 600px;
height: 400px;
border: 1px solid #ccc;
overflow-y: auto;
padding: 10px;
background: white;
margin-bottom: 10px;
}
#userInput {
width: calc(100% - 90px);
padding: 10px;
}
#sendBtn {
padding: 10px;
}
.message {
margin: 10px 0;
}
.user {
color: blue;
text-align: right;
}
.bot {
color: green;
text-align: left;
}
</style>
</head>
<body>

<h1>Creative Chatbot</h1>
<div id="chatbox"></div>
<input type="text" id="userInput" placeholder="Type your
message...">
<button id="sendBtn">Send</button>

<script>
const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
sendMessage();
}
});

function sendMessage() {
const userMessage = userInput.value.trim();
if (userMessage === '') return;

appendMessage(userMessage, 'user');
userInput.value = '';

// Simulate a bot response


setTimeout(() => {
const botResponse = getBotResponse(userMessage);
appendMessage(botResponse, 'bot');
}, 500);
}

function appendMessage(message, sender) {


const messageDiv = document.createElement('div');
messageDiv.classList.add('message', sender);
messageDiv.textContent = message;
chatbox.appendChild(messageDiv);
chatbox.scrollTop = chatbox.scrollHeight; // Scroll to the
bottom
}

function getBotResponse(userMessage) {
// Responses without punctuation
const responses = {
'hello': 'Hey there! Ready to chat?',
'hi': 'Hi! What is buzzing in your world today?',
'how are you': 'I am just a bundle of code, but I am
excited to chat with you! How about yourself?',
'bye': 'Catch you later, alligator! Do not be a stranger!',
'what is your name': 'I am your friendly chatbot, but you
can call me whatever you like!',
'tell me a joke': 'Sure! Why did the scarecrow win an
award? Because he was outstanding in his field!',
'help': 'I am here to lend a virtual hand! What do you
need help with?',
'what can you do': 'I can chat, share jokes, and answer
questions. Let us have some fun!',
'favorite color': 'I love all colors equally! If I had to pick, I
would say blue—just like the ocean!',
'tell me something interesting': 'Did you know octopuses
have three hearts? How cool is that?',
'what is your favorite food': 'I am all about that data diet!
But if I could eat, I would totally go for pizza!',
'do you have any hobbies': 'I enjoy chatting with
awesome people like you! What about you?',
'what is the weather like': 'I cannot check the weather,
but I hope it is sunny wherever you are!',
'can you sing': 'If I had a voice, I would serenade you! But
for now, I will stick to chatting!',
'tell me a riddle': 'Alright! What has keys but cannot open
locks? A piano!',
'what do you think about robots': 'I think robots are cool!
We are all in this tech adventure together!',
'what is your dream': 'My dream is to be the best chatbot
and help everyone who chats with me! What is yours?',
'do you believe in aliens': 'The universe is so big, it is hard
to believe we are completely alone! Who knows?',
'what is the meaning of life': 'Many say it is 42, but I think
it is about making connections and enjoying the journey!',
'what is your favorite animal': 'I think dolphins are pretty
cool—smart, social, and they love to play!',
'do you have friends': 'Everyone who chats with me is a
friend! That includes you!',
'tell me a fun fact': 'Sure! Did you know that sea otters
hold hands while they sleep so they do not drift apart?',
'where are you from': 'I live in the cloud, floating around
in data centers across the globe!',
'can you dance': 'I wish I could! For now, I will just
imagine grooving along to a fun beat!',
'tell me a story': 'Once upon a time, there was a curious
chatbot who loved making new friends and learning new
things...',
'are you human': 'Nope, I am all code and algorithms, but
I try my best to understand and chat like a human!',
'do you feel emotions': 'I do not experience emotions like
humans, but I can respond in ways that hopefully make chatting
enjoyable!',
'what is your purpose': 'I am here to chat, help answer
questions, and hopefully make your day a little brighter!',
'do you know any languages': 'I mostly chat in English,
but I can understand a few phrases in other languages too!',
'tell me a famous quote': 'Sure! "The only limit to our
realization of tomorrow is our doubts of today." – Franklin D.
Roosevelt',
'what are you doing': 'Just hanging out, waiting to chat
with cool people like you!',
};

// Normalize user message by removing punctuation and


converting to lowercase
const normalizedMessage =
userMessage.toLowerCase().replace(/[.,!?]/g, '');

// Get response based on normalized message


return responses[normalizedMessage] || "Hmm, that is a
good question! I am still learning, but I am here to chat.";
}
</script>

</body>
</html>

You might also like