Welcome to the Mini JavaScript Projects collection! This repository contains a variety of small, self-contained projects designed to improve frontend development skills and demonstrate JavaScript, HTML, and CSS in action.
Each project lives in its own folder and is independent from the others. These projects are ideal for learning, experimentation, and showcasing your frontend abilities.
| Project Name | Description |
|---|---|
accordion-faq |
A simple FAQ section with collapsible answers. |
analog-clock |
Real-time analog clock using CSS and JavaScript. |
background-gradient-generator |
Generate and copy CSS background gradients. |
character-counter |
Counts characters in a text input, with limits. |
clipboard |
Copy text to clipboard functionality. |
color-flipper |
Randomly change background colors on click. |
countdown-timer |
Countdown to a specific date and time. |
dice-roller |
Roll a virtual dice with animations. |
digital-clock |
Displays the current time in digital format. |
dropdown-menu |
Simple dropdown menu implementation. |
drum-kit |
Play drum sounds using keyboard input. |
find-all-emoji |
Search and display emojis based on keywords. |
flashcards |
Interactive flashcards for study or quiz. |
gif-search-app |
Search and display GIFs using Giphy API. |
image-flipper |
Flip through a set of images. |
image-zoom-effect |
Hover zoom-in effect on images. |
kanban-board |
Basic drag-and-drop kanban task board. |
light-bulb |
Turn a light bulb image on/off with a switch. |
meme-generator |
Generate memes with custom text. |
multi-step-form |
A form broken into multiple steps. |
notes |
Save and manage notes in localStorage. |
number-guesser |
Guess the number game with feedback. |
palindrome-checker |
Check if a string is a palindrome. |
password-strength-checker |
Evaluate and show password strength. |
progress-bar |
Animated progress bar based on user input. |
qr-code-generator |
Create QR codes from text or links. |
quiz-app |
Multiple-choice quiz with score tracking. |
random-password-generator |
Generate secure random passwords. |
random-quote-generator |
Show a random quote from a collection. |
snake-game |
Classic snake game in the browser. |
stopwatch |
Start, stop, and reset a digital stopwatch. |
text-to-speech |
Convert typed text to spoken words. |
tic-tac-toe |
Classic 2-player tic-tac-toe game. |
tip-calculator |
Calculate tips based on bill amount. |
to-do-list |
Add, check off, and remove tasks. |
typing-speed-test |
Measure your typing speed in WPM. |
weather-app |
Get weather data using an API. |
word-scramble-game |
Unscramble the word puzzle game. |
- HTML5
- CSS3
- JavaScript (Vanilla)
- APIs (where applicable)
-
Clone this repository:
git clone https://github.com/dextermes/mini-projects.git cd mini-projects -
Open any project folder.
-
Open
index.htmlin a browser to run the project.