🧠 Explain My Code — AI Code Explainer

An AI-powered web app that explains code in beginner-friendly language. Just paste your code, pick a mode, and get instant explanations!

✨ Features

Mode	Description
💡 Explain	Clear, beginner-friendly code explanation
👶 ELI5	Explain Like I'm 5 — super simple with fun analogies
📝 Line-by-Line	Every single line explained individually
🔑 Key Concepts	Highlights loops, functions, variables, conditionals
❌ Error Mode	Paste an error → get what went wrong & how to fix it
🎧 Vibe Coding	Optimized for the modern "Builder" workflow .

🚀 Quick Start

1. Clone the repo

   git clone https://github.com/YOUR_USERNAME/explain-my-code.git
   cd explain-my-code

2. Get a free Groq API key from console.groq.com/keys

3. Open index.html in your browser (just double-click it!)

4. Paste your API key when prompted → Start explaining! 🎉

🎨 Design

• 🌙 Dark theme with glassmorphism effects
• ✨ Animated background with floating gradient orbs
• 🎯 Neon accent colors (cyan, purple, green)
• 📱 Fully responsive — works on mobile
• ⌨️ Keyboard shortcut — Ctrl+Enter to explain

💡 Pro Tips

• Auto-detect: Most of the time, leaving it on "Auto-detect" works great!
• Error Mode: When pasting errors, include a bit of the surrounding code for even better advice.
• Copy: Click the 📋 icon on the top right of the explanation to copy it instantly.

🛠️ Tech Stack

• HTML5 — Structure
• Vanilla CSS — Dark theme, glassmorphism, animations
• Vanilla JavaScript — No frameworks, pure JS
• Groq API — Llama 3.3 70B model (free tier)
• Highlight.js — Syntax highlighting
• Marked.js — Markdown rendering

📁 Project Structure

explain-my-code/
├── index.html    ← Main page
├── style.css     ← All styling
├── app.js        ← Core logic & API integration
└── README.md     ← This file

🔑 API Key

The app uses Groq API (free tier). Your API key is stored locally in your browser's localStorage — it never leaves your device.

⚡ Why Groq?

• Speed: Near-instant responses (sub-second generation).
• Cost: Free tier allows generous usage without credits.
• Privacy: Key stays in your browser.

📸 Supported Languages

Python • JavaScript • Java • C++ • C • C# • HTML • CSS • SQL • PHP • Ruby • Go • Rust • TypeScript

📝 License

MIT License — feel free to use, modify, and share!

🤝 Contributing

Pull requests are welcome! Feel free to open an issue or submit a PR.

---

Built with ❤️ | Powered by Groq AI (Llama 3.3)