a silly chatbot
My first personal project, just a silly chatbot that can play a guess the number game, be a simple calculator, tell jokes, write a to do list for you, and write mad lib stories.
-
Overview This project transforms a classic rule-based chatbot into a modern, intelligent, and conversational AI application. By leveraging the Google Gemini API, the chatbot can understand context, answer a wide range of questions, and engage in natural, human-like dialogue. The front-end is built with pure HTML, CSS, and JavaScript, ensuring a clean, responsive, and fully custom user interface without reliance on external frameworks like Tailwind CSS.
-
Key Features Intelligent Conversation: Powered by the Gemini API for dynamic and context-aware responses.
Modern, Custom UI: A sleek and intuitive chat interface styled from scratch with CSS for a unique look and feel.
Fully Responsive: The layout seamlessly adapts to all screen sizes, from mobile phones to desktop monitors.
Real-time Interaction: Messages are displayed instantly, with a loading indicator while the AI is "thinking."
Zero Dependencies: Runs directly in the browser with no need for complex setup or installation.
- Technology Stack Front-End:
HTML5: For the core structure and content of the application.
CSS3: For all custom styling, animations, and responsive design. We will use Flexbox and Grid for layout.
JavaScript (ES6+): For all application logic, including DOM manipulation, event handling, and API communication.
Artificial Intelligence:
Google Gemini API: The "brain" of the chatbot, used for generating intelligent and relevant responses. We will interact with it via its REST API using JavaScript's fetch method.
Development Environment:
Visual Studio Code: Recommended code editor.
Git & GitHub: For version control and project management.
- Project Roadmap We will build the application in distinct, manageable phases.
Phase 1: UI Foundation (HTML & CSS) Objective: Create a visually appealing and static version of the chat interface.
Tasks:
HTML Structure: Define the main layout, including the chat window, message area, and user input form.
CSS Styling:
Design the overall theme (colors, fonts, spacing).
Style the chat bubbles for both the user and the AI.
Create a clean and functional input field and send button.
Responsiveness: Use media queries to ensure the layout works perfectly on mobile, tablet, and desktop screens.
Phase 2: Core Chat Logic (JavaScript & Gemini API) Objective: Breathe life into the UI, enabling real-time messaging and AI-powered responses.
Tasks:
DOM Manipulation: Write JavaScript to capture user input and dynamically add new message bubbles to the chat window.
API Integration:
Create a function to send the user's message to the Gemini API using fetch.
Implement a loading indicator to provide visual feedback while waiting for the API response.
Display Responses: Process the response from the API and display it in a new AI message bubble.
User Experience: Ensure the chat window automatically scrolls to the latest message.
Phase 3: Enhancements & Polish Objective: Refine the application with advanced features and a better user experience.
Tasks:
Error Handling: Gracefully manage potential API errors or network issues.
UI Polish: Add subtle animations and transitions for a smoother feel.
Conversation History (Future Goal): Explore using localStorage or Firestore to save and load chat history, allowing conversations to persist between sessions.
- Getting Started This application is designed to be incredibly simple to run.
Clone the repository to your local machine.
Create the index.html, style.css, and main.js files.
Open the index.html file in any modern web browser.
That's it! You can start chatting with the AI immediately.