JSPlayz is a growing collection of fun, beginner-friendly JavaScript projects and micro-tutorials. From guessing games to interactive apps, each mini project is built to sharpen your skills, one playful line at a time. 🎮 Try. 💡 Learn. 🔁 Repeat. Whether you're a new dev or just revisiting the basics, this is your playground.
🧠 Focus: Vanilla JavaScript, DOM Manipulation, APIs, Logic Building, ES6+ Features 💾 All projects in one place — open source, organized, and interactive.
Master JavaScript fundamentals and basic DOM manipulation.
- Counter - Variables, functions, and DOM updates
- Dice Roller - Random numbers and conditional logic
- Temperature Converter - Math operations and input handling
- Random Number Generator - Math.random() and user input
- Password Generator - String manipulation and character arrays
- Calculator - Event handling and arithmetic operations
- Rock Paper Scissors - Game logic and comparison operators
- Stopwatch - Precise timing
Build more complex applications with APIs and advanced DOM manipulation.
- Directional Stopwatch - Muiltiple Stopwatch with Precise timing and multiple state management
- Clock - Date objects and intervals
- Number Guesser Game - Game state, loops, and user feedback
- Toast Notifications - Dynamic element creation and CSS animations
- Random Quote Generator - Array manipulation and local storage
- Weather App - API integration and error handling
- QR Code Generator - Third-party library integration
- Image Slider - DOM traversal and CSS transitions
- Todo List - CRUD operations with localStorage
Challenge yourself with complex logic, data structures, and modern JavaScript features.
- Word Guess Game (Single Player) - Complex game state and string algorithms
- Dictionary App - Fetch API and JSON data processing
- Word Guess Game (Multiplayer) - Session management and turn-based logic
- Expense Tracker - Data visualization and financial calculations
- Memory Card Game - Algorithm implementation and animation sequences
- Snake Game - Canvas API and collision detection
- Typing Speed Test - Real-time performance tracking and statistics
- Chat Application UI - Message handling and real-time updates simulation
- Code Editor - Syntax highlighting and keyboard shortcuts
- Core: Vanilla JavaScript (ES6+)
- Markup: HTML5 Semantic Elements
- Styling: CSS3, Flexbox, Grid, Animations
- APIs: Fetch API, REST APIs, JSON
- Storage: localStorage, sessionStorage
- Tools: Browser DevTools, Git
# Clone the repository
git clone https://github.com/nickfrost2/JSPlayz.git
# Navigate to project directory
cd JSPlayz
# Open with Live Server (VS Code extension) or serve locally
# No build process required - pure HTML, CSS, JS!
# For local development
python -m http.server 8000
# OR
npx serve .JSPlayz/
├── beginner/
│ ├── Project Name/
| | ├── index.html
| | ├── script.js
| | └── style.css
│ └── ...
├── intermediate/
│ ├── Project Name/
| | ├── index.html
| | ├── script.js
| | └── style.css
│ └── ...
│── advanced/
│ ├── Project Name/
| | ├── index.html
| | ├── script.js
| | └── style.css
│ └── ...
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
├── index.html
└── README.md
└── LINCENCE.md
Beginner Projects Focus:
- JavaScript syntax and data types
- DOM selection and manipulation
- Event listeners and handlers
- Basic algorithms and logic
- Functions and scope
Intermediate Projects Focus:
- Asynchronous JavaScript (Promises, async/await)
- API integration and data fetching
- LocalStorage and data persistence
- ES6+ features (arrow functions, destructuring, modules)
- Error handling and validation
Advanced Projects Focus:
- Complex algorithms and data structures
- Canvas API and graphics programming
- Performance optimization techniques
- Design patterns and code organization
- Real-time data handling and simulations
A challenging single-player word guessing game featuring:
- Dictionary API integration
- Progressive difficulty levels
- Score tracking and statistics
- Hint system with letter frequency analysis
Real-time weather information with:
- Geolocation API integration
- 5-day forecast display
- Weather icons and animations
- Temperature unit conversion
Precision timing application featuring:
- Lap time recording
- Split time calculations
- Export functionality
- Keyboard shortcuts
We welcome contributions! Whether it's bug fixes, new projects, or improvements:
- Fork the repository
- Create your feature branch (
git checkout -b feature/awesome-project) - Commit your changes (
git commit -m 'Add awesome project') - Push to the branch (
git push origin feature/awesome-project) - Open a Pull Request
- Beginner: Color Picker, Unit Converter, Tip Calculator
- Intermediate: Pomodoro Timer, Expense Tracker, Music Player UI
- Advanced: Markdown Editor, Drawing App, Mini Compiler
- MDN JavaScript Documentation
- JavaScript.info Tutorial
- Eloquent JavaScript (Free Book)
- You Don't Know JS (Book Series)
This project is licensed under the MIT License - see the LICENSE file for details.
If this project helped you learn JavaScript, please give it a star! It helps others discover the resource and motivates us to add more projects.
Happy Coding! 🚀 Remember, the best way to master JavaScript is through hands-on practice. Start with the basics and gradually tackle more complex challenges!