A collection of clean, modern, and beginner‑friendly frontend projects built using HTML, CSS, and Vanilla JavaScript.
These projects demonstrate core concepts such as DOM manipulation, event handling, real‑time UI updates, API integration, and modular JavaScript architecture.
Each project is intentionally crafted to be small, purposeful, and readable—ideal for learning, practicing, or adding to a developer portfolio.
| # | Project Name | Description |
|---|---|---|
| 01 | Color Changer | Interactive background color switcher |
| 02 | Random Emoji | Hover to cycle through random emojis |
| 03 | Mouse Circle | Animated circles appear on click |
| 04 | Random Jokes | Fetches random one-liner jokes using JokeAPI |
| 05 | Digital Clock | Live clock with date and weekday |
| 06 | BMI Calculator | Health-focused BMI calculator with classification table |
| 07 | Guess Number | Number guessing game with hints and attempts |
| 08 | Key Matcher | Keyboard reflex / typing accuracy game |
| 09 | Rock-Paper-Scissors | Classic RPS vs computer with emoji UI |
| 10 | Roll Dice Game | Two-player dice roll with winner detection |
| 11 | Random Cats | Random cat card with picture, name, and overview |
| 12 | Scroll Indicator (Next.js Style) | Scroll progress bar at the top of the page |
| 13 | Whack-a-Mole | Timed 3×3 grid click game |
| 14 | Modular JavaScript Calculator | ES Modules calculator without eval() |
A beginner‑friendly project focused on DOM manipulation. The interface presents color tiles that dynamically update the page background when clicked, making it a great introduction to event listeners and UI responsiveness.
- A set of color tiles representing different color palettes
- Immediate background color updates on selection
- Automatic text‑contrast adjustment for readability
- Clean UI with accessible, keyboard‑friendly components
HTML5, CSS3, Vanilla JavaScript (ES6)
cd 01. color-changer
open index.htmlA fun micro‑interaction project where hovering over a large emoji swaps it with a new random one. This teaches event handling and subtle animations that enhance UI personality.
- Random emoji replacement on hover
- Smooth scale‑up animation for tactile experience
- Default grayscale with colored hover effect
- Lightweight and beginner‑friendly logic
HTML5, CSS3, Vanilla JavaScript
cd 02. random-emoji
open index.htmlAn interactive click‑based visual effect where circles spawn exactly where the user clicks. They grow, fade, and disappear automatically, showcasing DOM creation, animation, and cleanup.
- Circles appear precisely at click position
- Smooth scale and opacity transition
- Automatic DOM node removal for performance
- Randomized colors for visual variety
HTML, CSS, JavaScript
cd 03. mouse-circle
open index.htmlA clean API integration project that fetches random one‑liner jokes. It includes loading states, error handling, and DOM updates, teaching students how to work with public APIs.
- Fetches clean, single‑line jokes using JokeAPI
- Preloader “Loading joke…” message
- Graceful handling of failed API requests
- Simple and readable UI component for jokes
HTML, CSS, JavaScript (Fetch API)
cd 04. random-jokes
open index.htmlA live digital clock with date and weekday formatting. It demonstrates real‑time UI updates using intervals and JavaScript Date objects.
- Real‑time digital clock with AM/PM
- Date formatting with weekday display
- Clean centered layout
- Easy to understand and modify
HTML, CSS, JavaScript
cd 05. digital-clock
open index.htmlA health‑oriented calculator that computes Body Mass Index (BMI) and categorizes results. It helps reinforce concepts like math functions, input validation, and DOM updates.
- Accurate BMI calculation from user input
- Health category mapping (Underweight, Normal, etc.)
- Error prevention and simple validations
- Clean card‑style layout using TailwindCSS
HTML, TailwindCSS, JavaScript
cd 06. bmi-calculator
open index.htmlA classic logic‑based game where users guess a hidden number. This project strengthens skills like decision‑making, validations, and managing game state.
- Random number generation (0–100)
- Helpful hints: “Too high” or “Too low”
- Remaining attempts display
- Game reset button and session logic
HTML, CSS, JavaScript
cd 07. guess-number
open index.htmlA typing‑reflex mini‑game that displays a random letter and checks if the user presses the correct key. Great practice for handling keyboard events and improving reaction logic.
- Randomly chosen alphabet letters
- Key detection using
keydown - Positive/negative visual feedback
- Ignores non‑letter characters
HTML, CSS, JavaScript
cd 08. key-matcher
open index.htmlA modern take on the classic RPS game using emojis. It highlights conditional logic and dynamic UI updates based on game results.
- Emoji‑based UI for intuitive interaction
- Randomized computer choices
- Win, lose, or tie evaluation
- Auto‑resetting interface after each round
HTML, CSS, JavaScript
cd 09. rock-paper-scissors
open index.htmlA two‑player dice experience where each player rolls once. The highest number wins. This project reinforces randomness, comparison logic, and simple animations.
- Random dice roll between 1–6
- Display of both dice outcomes
- Automatic winner/tie detection
- Clean two‑column layout
HTML, CSS, JavaScript
cd 10. roll-dice-game
open index.htmlA charming card‑based project that generates a random cat image, a playful cat name, and a small overview description. Excellent for practicing API consumption, card design, and clean UI structuring.
- Fetches random cat photos from a cat image API
- Generates a cute, random cat name
- Short personalized overview of the cat
- Styled card layout using modern CSS
HTML5, CSS3, Vanilla JavaScript, Fetch API
cd 11. random-cats
open index.htmlA top‑mounted scroll progress bar similar to what major blog platforms use. It teaches how to calculate scroll percentage and visually reflect progress.
- Animated top progress bar
- Calculates scroll depth in real time
- Smooth width transition
- Works on all screen sizes and content heights
cd 12. scroll-like-Next.js
open index.htmlA fun and fast‑paced game where moles appear randomly in a 3×3 grid. Perfect to learn interval timing, grid layouts, and click handling.
- Random mole spawning using timers
- Score tracking mechanism
- Countdown timer for game session
- Disabled start button during gameplay
HTML, CSS, JavaScript
cd 13. whack-a-mole
open index.htmlA fully modular calculator built using ES Modules. It separates UI logic, input validation, arithmetic, expression grouping, and evaluation—excellent for understanding scalable JavaScript structure.
- Supports +, −, ×, ÷, % operations
- Smart input validation to prevent invalid expressions
- Delete and All‑Clear functionality
- Custom logic to evaluate expressions without using
eval() - Clean multi‑file architecture for readability
HTML, CSS, JavaScript (ES Modules)
cd 14. calculator
open index.html.
├── 01. color-changer/
├── 02. random-emoji/
├── 03. mouse-circle/
├── 04. random-jokes/
├── 05. digital-clock/
├── 06. bmi-calculator/
├── 07. guess-number/
├── 08. key-matcher/
├── 09. rock-paper-scissors/
├── 10. roll-dice-game/
├── 11. random-cats/
├── 12. scroll-like-Next.js/
├── 13. whack-a-mole/
└── 14. calculator/
Abdul Manan
Web Developer | JavaScript Enthusiast
📧 fokamystic@gmail.com
If this repository helped you or inspired you:
- ⭐ Star the repository
- 🍴 Fork it and build your own ideas
- 📨 Share feedback or suggestions
Thanks for exploring my JavaScript Mini Projects!