Build Simple Chat Bot
Yash Patel
![Yash Patel]()
Yash Patel
SEO Executive & WordPress Developer | Technical Audits, Google Search ,Blockchain Mentor
The HTML structure defines the layout of the chat bot interface.It includes a chat container with a chat box for displaying messages and an input container for users to type their messages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Bot</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.chat-container {
max-width: 500px;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.chat-box {
height: 300px;
overflow-y: scroll;
padding: 10px;
background-color: #fff;
}
.input-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #eee;
}
.input-container input[type="text"] {
flex-grow: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
margin-right: 10px;
}
.input-container input[type="submit"] {
padding: 8px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.running-tiger {
width: 40px;
height: 40px;
position: absolute;
bottom: 0;
left: -40px;
animation: run 2s linear infinite;
}
@keyframes run {
to {
transform: translateX(100%);
}
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-box" id="chat-box"></div>
<div class="input-container">
<input type="text" id="user-input" placeholder="Type your message...">
<input type="submit" value="Send" onclick="sendMessage()">
<img src="https://emojicdn.elk.sh/??" alt="Running Tiger" class="running-tiger" id="loading" style="display: none;">
</div>
</div>
<script>
// Bot responses
const responses = {
"hi": "Hello!",
"hello": "Hi there!",
"hey": "Hi, how are you?",
"hiya": "Hello, nice to see you!",
"what's up": "Hey! Not much, just hanging out. How about you?",
"greetings": "Hello! How can I assist you today?",
"good morning": "Morning! How are you doing today?",
"hi, how are you": "I'm good, thanks for asking! How about you?",
"hello, how's it going": "Hey! Things are going well, how about you?",
"hi there": "Hello, nice to meet you!",
"what is atqor": "atQor is an Azure first company.",
"what is windows": "Windows is a widely used operating system developed by Microsoft. It provides a graphical interface for users to interact with their computers.",
"what is microsoft office": "Microsoft Office is a suite of productivity applications that includes programs like Word, Excel, PowerPoint, and Outlook, among others. It's used for tasks such as word processing, spreadsheet creation, presentations, and email management.",
"what is microsoft azure": "Microsoft Azure is a cloud computing platform and set of services provided by Microsoft. It offers computing power, storage, and other resources over the internet, allowing businesses to build, deploy, and manage applications and services.",
"what is microsoft excel": "Microsoft Excel is a spreadsheet program used for organizing, analyzing, and presenting data. It features calculation, graphing tools, pivot tables, and a macro programming language called Visual Basic for Applications (VBA).",
"what is microsoft powerpoint": "Microsoft PowerPoint is a presentation program used to create slideshows composed of text, graphics, and multimedia elements. It's commonly used for business presentations, educational purposes, and more.",
"what is microsoft outlook": "Microsoft Outlook is an email client and personal information manager. It's used for email communication, managing calendars, contacts, tasks, and more.",
"what is microsoft teams": "Microsoft Teams is a collaboration platform that integrates chat, video meetings, file storage, and application integration. It's designed to facilitate teamwork and communication within organizations.",
"what is microsoft edge": "Microsoft Edge is a web browser developed by Microsoft. It's designed for faster, safer browsing and includes features like built-in security tools, integration with Microsoft services, and support for extensions.",
"what is microsoft onedrive": "Microsoft OneDrive is a cloud storage service that allows users to store files and data online. It enables file sharing, synchronization across devices, and collaboration with others.",
"what is microsoft sql server": "Microsoft SQL Server is a relational database management system (RDBMS) developed by Microsoft. It's used for storing and retrieving data as requested by other software applications, particularly web applications."
};
// Function to send message
function sendMessage() {
const userInput = document.getElementById("user-input").value;
if (userInput.trim() === "") return;
const chatBox = document.getElementById("chat-box");
const userMessage = document.createElement("p");
userMessage.textContent = "You: " + userInput;
chatBox.appendChild(userMessage);
const runningTiger = document.getElementById("loading");
runningTiger.style.display = "inline-block";
setTimeout(function() {
const botResponse = document.createElement("p");
botResponse.textContent = "Bot: " + getResponse(userInput.toLowerCase());
chatBox.appendChild(botResponse);
runningTiger.style.display = "none";
chatBox.scrollTop = chatBox.scrollHeight;
}, 4000);
document.getElementById("user-input").value = "";
}
// Function to get bot response
function getResponse(userInput) {
for (const [key, value] of Object.entries(responses)) {
if (userInput.includes(key)) {
return value;
}
}
return "I'm sorry, I didn't understand that.";
}
</script>
</body>
</html>