A curated collection of 20+ JavaScript mini projects designed to help beginners learn and practice essential JavaScript concepts. Each project focuses on specific skills and real-world applications, making it perfect for developers looking to upskill in JavaScript.

🌐 View Live Portfolio | 📚 Browse Projects

This repository is a comprehensive learning resource for JavaScript beginners and intermediate developers. Each project is self-contained, featuring clean code examples that demonstrate core JavaScript concepts, DOM manipulation, API integration, and modern web development practices.

• Master DOM manipulation and event handling
• Understand asynchronous JavaScript (Promises, Async/Await, Fetch API)
• Learn state management patterns
• Practice form validation and user input handling
• Work with browser APIs (Web Audio, Local Storage, etc.)
• Build interactive UI components
• Implement game logic and algorithms

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Basic knowledge of HTML, CSS, and JavaScript
• A code editor (VS Code, Sublime Text, etc.)
• Node.js (only required for snake_game and sheetemail projects)

1. Clone the repository:

   git clone https://github.com/SGcpu/JS_mini_projects.git
   cd JS_mini_projects

2. Open projects:

   • Most projects can be opened directly by opening their index.html file in a browser
   • For the portfolio view, open the root index.html file

3. For projects with dependencies:

   # Snake Game
   cd snake_game
   npm install
   npm run dev
   
   # Sheet Email
   cd sheetemail
   npm install

1. Navigate to any project folder
2. Open the index.html file in your browser
3. Interact with the project to see it in action
4. Study the script.js file to understand the implementation
5. Experiment by modifying the code and seeing the results

We welcome contributions from developers of all skill levels! Here's how you can contribute:

1. Add New Projects - Create new mini projects that teach JavaScript concepts
2. Improve Existing Projects - Enhance code quality, fix bugs, or add features
3. Documentation - Improve README files, add code comments, or create tutorials
4. Bug Reports - Report issues or unexpected behavior
5. Feature Requests - Suggest new projects or improvements

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

# Create a new branch for your feature
git checkout -b feature/your-feature-name

For adding a new project:

• Create a new folder with a descriptive name (use lowercase and underscores)
• Include at least: index.html, script.js, and style.css
• Follow the existing project structure
• Add clear comments explaining your code
• Test thoroughly in multiple browsers

Project Structure Example:

your_project_name/
├── index.html
├── script.js
├── style.css
└── README.md (optional, but recommended)

Code Quality Standards:

• Write clean, readable code
• Use meaningful variable and function names
• Add comments for complex logic
• Follow consistent formatting
• Ensure cross-browser compatibility

• Add your project to this README.md in the appropriate category
• Include a brief description and key concepts
• Update the project counter if needed

• Test your project in multiple browsers
• Ensure no console errors
• Verify all features work as expected
• Check that existing projects still work

# Stage your changes
git add .

# Commit with a descriptive message
git commit -m "Add: Your descriptive commit message"

# Push to your fork
git push origin feature/your-feature-name

• Go to the original repository on GitHub
• Click "New Pull Request"
• Select your branch
• Fill in the PR template with:
  • Description: What does your PR do?
  • Type: New project, bug fix, enhancement, documentation
  • Screenshots: If applicable
  • Testing: How did you test your changes?

Use clear, descriptive commit messages:

• Add: New calculator project
• Fix: Countdown timer bug on mobile
• Update: Improve kanban board drag handling
• Docs: Add contributing guidelines

• Be respectful and inclusive
• Provide constructive feedback
• Help others learn and grow
• Give credit where credit is due

Looking for inspiration? Here are some project ideas:

• Weather App - Fetch and display weather data
• Password Generator - Generate secure random passwords
• Currency Converter - Convert between currencies using an API
• Pomodoro Timer - Time management tool
• Memory Card Game - Classic memory matching game
• Markdown Previewer - Live markdown to HTML converter
• Drawing App - Canvas-based drawing tool
• Recipe Finder - Search recipes by ingredients
• Unit Converter - Convert between different units
• Color Palette Generator - Create and save color schemes

• MDN Web Docs - JavaScript
• JavaScript.info
• Eloquent JavaScript

• MDN - DOM Introduction
• JavaScript DOM Manipulation

• MDN - Fetch API
• MDN - Promises

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

SGcpu

• GitHub: @SGcpu
• Portfolio: View Live Projects

• Thanks to all contributors who have helped improve this repository
• Inspired by the JavaScript community and various tutorial resources
• Built with ❤️ for developers learning JavaScript

• ⭐ Star this repository if you find it helpful
• 🐛 Report bugs by opening an issue
• 💡 Suggest new features through issues
• 🤝 Contribute by submitting a pull request