🎮 OpenPlayground

Build. Share. Explore. A community-driven platform where developers showcase their creativity through interactive web projects.

🌐 View Live Website | 📖 Contributing Guide | 💬 Discussions

🚀 What is OpenPlayground?

OpenPlayground is where creativity meets code! Whether you're building your first calculator or crafting an innovative game, this is your space to share and discover amazing projects. From beginners taking their first steps to experienced developers experimenting with new ideas - everyone is welcome here.

✨ Why Choose OpenPlayground?

• 🎯 Learn by Building - Practice your skills with real-world projects
• 🌟 Get Discovered - Showcase your work to the global developer community
• 💡 Inspire Others - Your project might spark someone's next breakthrough
• 🤝 Beginner Friendly - Perfect for developers at any skill level
• 🔓 Open Source - Contribute to something meaningful and lasting

⭐ Love what we're building? Star this repository to show your support!

🎨 Featured Projects

Our amazing community has built some incredible projects:

Project	Description	Tech Stack	Live Demo
🧮 Calculator	Clean, functional calculator with keyboard support	HTML, CSS, JS	Try it →
🎯 Tic Tac Toe	Classic strategy game with smooth animations	HTML, CSS, JS	Play →
✅ Todo List	Task manager with local storage persistence	HTML, CSS, JS	Organize →
🧠 Quiz Game	Interactive quiz with multiple categories	HTML, CSS, JS	Test yourself →
🕐 Digital Clock	Real-time clock with customizable themes	HTML, CSS, JS	Check time →
📱 QR Code Generator	Simple and interactive QR Code Generator	HTML, CSS, JS	Generate →
📅 Monthly Calendar	Event management with local storage	HTML, CSS, JS	Plan →

🌐 Explore All Projects →

🚀 Quick Start Guide

👀 For Visitors

Simply visit our live website and start exploring! Click on any project card to interact with it directly.

👨‍💻 For Contributors

Ready to add your project? Follow these steps:

1️⃣ Fork & Clone

# Fork this repository on GitHub, then clone your fork
git clone https://github.com/YOUR_USERNAME/OpenPlayground.git
cd OpenPlayground

2️⃣ Create Your Project

# Create a new folder for your project
mkdir projects/my-awesome-project
cd projects/my-awesome-project

# Create the required files
touch index.html style.css script.js

3️⃣ Build Your Project

Create your project with these files:

• index.html - Your main project file
• style.css - Your styles
• script.js - Your JavaScript logic

4️⃣ Add to Main Website ⚠️ IMPORTANT STEP

Don't forget this step! Add your project card to the main index.html file so it appears on the website:

<!-- Add this inside the projects-container div in index.html -->
<a href="./projects/your-project-name/index.html" class="card" data-category="utility">
    <div class="card-cover" style="background:#your-color;display:flex;align-items:center;justify-content:center">
        <i class="ri-your-icon" style="font-size:3rem;color:white"></i>
    </div>
    <div class="card-content">
        <div class="card-header-flex">
            <h3 class="card-heading">Your Project Name</h3>
            <span class="category-tag">Category</span>
        </div>
        <p class="card-description">Brief description of your project.</p>
        <div class="card-tech"><span>HTML</span><span>CSS</span><span>JS</span></div>
    </div>
</a>

5️⃣ Submit Your Contribution

# Add your changes
git add .

# Commit with a descriptive message
git commit -m "Add: Your Project Name - Brief description"

# Push to your fork
git push origin main

# Create a Pull Request on GitHub

🎉 That's it! Your project will be reviewed and merged into the main website.

📁 Project Structure

OpenPlayground/
├── 📂 projects/              # 🎯 All community projects live here
│   ├── 📂 calculator/        # Example: Calculator project
│   │   ├── index.html        # Main HTML file
│   │   ├── style.css         # Styling
│   │   └── script.js         # JavaScript logic
│   ├── 📂 tic-tac-toe/       # Example: Tic Tac Toe game
│   └── 📂 your-project/      # 🚀 Your amazing project goes here!
├── 📂 css/                   # Global website styles
├── 📂 js/                    # Global website scripts  
├── 📄 index.html             # 🏠 Main website (add your project here!)
├── 📄 README.md              # This file
└── 📄 CONTRIBUTING.md        # Detailed contribution guidelines

💡 Pro Tip: After creating your project folder, don't forget to add your project card to the main index.html file!

🤝 Contributing Guidelines

Project Requirements

• Use vanilla HTML, CSS, and JS
• Include all three files (index.html, style.css, script.js)
• Make it responsive and accessible
• Add project card to main index.html
• Test across browsers
• Keep it family-friendly

Best Practices

• Add meaningful comments
• Use semantic HTML
• Follow consistent naming conventions
• Optimize performance
• Include error handling where appropriate

Categories

• 🎮 Action
• 🧠 Strategy
• 🧩 Puzzle
• 🛠️ Utility

Review Process

1. Automated Checks
2. Manual Review
3. Community Feedback
4. Merge

📖 Read the detailed contributing guide →

🏆 Our Amazing Contributors

A huge thank you to all the talented developers who have contributed to OpenPlayground!

🌟 Hall of Fame

Want to see your avatar here? Make your first contribution today!

🌟 Community & Support

• Code of Conduct: CODE_OF_CONDUCT.md
• Bug Reports: Create an Issue
• Feature Requests / Questions: Discussions
• Pull Requests / Code Review: Pull Requests

---

💡 Project Ideas

• Beginner: Random quote generator, color palette tool, countdown timer, drawing app, password generator
• Intermediate: Weather dashboard, expense tracker, memory game, markdown previewer, image gallery
• Advanced: Code editor, music visualizer, real-time chat, mini social network, multiplayer games

---

🛠 Tech Stack

• HTML5, CSS3, JS (ES6+)
• RemixIcon, Google Fonts (Poppins)
• GitHub Pages for hosting

📄 License

This project is licensed under the MIT License - see LICENSE for details.

---

Made with ❤️ by the OpenPlayground Community
Building the future of web development, one project at a time.