Building a Simple Chatbot (No AI Required) - Part 1

Ever wanted to build a chatbot but don't want to mess with AI APIs? Let me show you how to build one with just HTML, CSS, and JavaScript.

Let's Build a Chatbot

Not every chatbot needs to be powered by ChatGPT. Sometimes you just need a simple bot that can handle FAQs or guide users through a process. Today I'm going to show you how to build one from scratch.

This is Part 1 of a series - we'll start with the basics and build up from there.

> **Check out the live demo**: simple-chatbot on GitHub

The Basic Structure

We need three files:

• `index.html` - The chat interface
• `chatbot.css` - Styling
• `chatbot.js` - The brain

The HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Chatbot</title>
  <link rel="stylesheet" href="chatbot.css">
</head>
<body>
  <div class="chat-container">
    <div class="chat-header">
      <h2>ChatBot</h2>
    </div>
    <div class="chat-messages" id="chatMessages">
      <!-- Messages will appear here -->
    </div>
    <div class="chat-input">
      <input type="text" id="userInput" placeholder="Type a message...">
      <button id="sendBtn">Send</button>
    </div>
  </div>
  <script src="chatbot.js"></script>
</body>
</html>

Nothing fancy - just a container with a header, message area, and input field.

The CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-container {
  width: 400px;
  height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  background: #4f46e5;
  color: white;
  padding: 1rem;
  text-align: center;
}

.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.message {
  max-width: 80%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  line-height: 1.4;
}

.message.user {
  background: #4f46e5;
  color: white;
  align-self: flex-end;
}

.message.bot {
  background: #e5e7eb;
  color: #1f2937;
  align-self: flex-start;
}

User messages go right, bot messages go left. Classic chat layout.

What's Next

In [Part 2](/blog/building-simple-chatbot-no-ai-part-2), we'll add the JavaScript that actually makes the bot respond. We'll look at:

• Pattern matching for different user inputs
• Randomized responses to feel more natural
• Handling edge cases

The full source code is on GitHub: github.com/adhddev/simple-chatbot

See you in the next part!

Back to Journal