codex-lv2-may-2025

🧪 Chatbot Project - Leveled Learning Guide

Welcome to the Chatbot Project! This guide breaks down the entire project into 32 manageable levels that build upon each other to create a complete AI chatbot application.

📚 How to Use This Guide

• Start with Level 1 and work through them sequentially
• Each level builds on the previous one
• Use the navigation bars in each level to jump between levels
• Check off items in your project README as you complete each level
• Commit your work after completing each major step

---

🎯 Project Overview

You’ll build a complete AI chatbot that:

• ✅ Has a beautiful Bootstrap UI
• ✅ Connects to Hugging Face AI models
• ✅ Handles user input and validation
• ✅ Provides real-time AI responses
• ✅ Includes error handling and polish

---

📋 Level Organization

Step 1: Project Setup (Levels 1-5)

Get your development environment ready and create the project foundation.

• Level 1: Project Setup - Create Files
• Level 2: Basic HTML Structure
• Level 3: Git Setup
• Level 4: Live Server Test
• Level 5: Test & Check - Project Setup Complete

Step 2: UI & DOM Wiring (Levels 6-12)

Build the user interface and connect it with JavaScript event handling.

• Level 6: UI & DOM Wiring - Basic Interface
• Level 7: Bootstrap Styling
• Level 8: Card Structure
• Level 9: IDs and Testing
• Level 10: Button Event Wiring
• Level 11: Input Value Reading
• Level 12: Test & Check - UI & DOM Wiring Complete

Step 3: Model Call & API Integration (Levels 13-24)

Connect your app to AI models and handle API responses, then integrate user input.

• Level 13: Model Call - Global Variable
• Level 14: Create Function
• Level 15: Add Hugging Face API
• Level 16: Proof-of-Life Test
• Level 17: Inspect Response
• Level 18: Connect to Button
• Level 19: Test & Check - Model Call Complete
• Level 20: Add State for Input
• Level 21: Capture Input on Click
• Level 22: Use Input in Model Call
• Level 23: Render the Reply
• Level 24: Test & Check - User Input Integration Complete

Step 4: Input Validation (Levels 25-26)

Add professional input validation and error handling.

• Level 25: Empty Input Handling
• Level 26: Valid Input Handling

Step 5: Validation Polish (Levels 27-31)

Polish the validation system with professional error handling and user feedback.

• Level 27: Add Validation Area
• Level 28: Show Validation on Empty
• Level 29: Clear Validation on Valid Input
• Level 30: Keep Validation Consistent
• Level 31: Test & Check - Validation Polish Complete

Step 6: Challenge Extensions (Level 32)

Add advanced features to make your chatbot unique.

• Level 32: Challenge Extensions - Make It Yours!

---

🚀 Quick Start

1. Begin with Level 1 to set up your project
2. Work through levels sequentially - each builds on the previous
3. Use the navigation bars in each level to jump around as needed
4. Check off progress in your project README as you complete levels
5. Commit regularly with meaningful messages

---

🛠️ What You’ll Learn

• HTML & CSS - Building responsive web interfaces
• JavaScript - Event handling, DOM manipulation, and API calls
• Bootstrap - Professional UI framework
• Git - Version control and project management
• API Integration - Connecting to external AI services
• Error Handling - Professional validation and user feedback
• Debugging - Using browser DevTools effectively

---

📖 Additional Resources

• Project README Template - Copy from EXAMPLE_README.md in the main folder
• Helpers Library - Download helpers-full.js from the class repository
• Bootstrap Documentation - getbootstrap.com
• Hugging Face Models - huggingface.co/models

---

🎉 Ready to Start?

Click Level 1 to begin your chatbot journey!

Remember: Take your time, test frequently, and don’t hesitate to use the navigation to review previous levels if needed.