🚀 20 JavaScript Projects

A collection of 20 small JavaScript projects to improve coding skills, explore different web concepts, and build hands-on experience.

📌 Project List

1️⃣ Pomodoro Clock ⏳ – A 25-minute focus timer with break alerts.

• Concepts: setTimeout, setInterval, DOM manipulation.

2️⃣ RGB Color Guesser 🎨 – Display a random RGB value, user guesses the correct color.

• Concepts: Math.random(), event handling, UI feedback.

3️⃣ Infinite Scroll Gallery 📸 – Load new images as the user scrolls down.

• Concepts: Intersection Observer API, API calls.

4️⃣ AI Programming Joke Generator 🤖
Generates programming-related jokes using the JokeAPI with a stylish UI and animation effects.

• Concepts: Fetch API, error handling, animations, async UI updates

5️⃣ Password Strength Checker 🔐
Checks and visualizes the strength of a password in real-time based on multiple security criteria.

• Concepts: DOM manipulation, regex validation, dynamic progress bar, password visibility toggle

6️⃣ TypeMaster: Typing Speed Test 🧠
A sleek dark-themed app to measure your typing speed, accuracy, and error count in real-time.

• Concepts: Real-time input tracking, WPM & accuracy calculation, DOM manipulation, animations

7️⃣ Markdown Previewer 📝
A browser-based Markdown editor and live previewer with syntax highlighting, export options, and dark/light themes.

• Concepts: Markdown parsing (Marked.js), XSS sanitization (DOMPurify), Syntax highlighting (highlight.js), keyboard shortcuts, command palette, export, fullscreen, autosave

8️⃣ QR Code Generator 🖼️ – Generate QR codes from URLs with live input, theme toggle, and download options.

• Concepts: qrcode-generator.js, input validation, dynamic downloads, dark/light themes, real-time feedback

9️⃣ GitHub Profile Viewer ☀️ – View GitHub profiles and repositories, displaying user information, repositories, and contribution stats – Utilizing the GitHub API to fetch user data, display repositories, and visualize contributions over time.

• Concepts : API calls, data visualization, asynchronous programming, user authentication, responsive design, error handling

🔟 Wikipedia Search Viewer 🔍 – A modern Wikipedia search interface with instant results and dark mode support.

• Key Features:

  • Real-time Wikipedia article search
  • Dark/Light theme with system preference detection
  • Responsive card-based results layout
  • Search suggestions and error handling

• Concepts:

  • Wikipedia API Integration
  • Theme management
  • LocalStorage
  • Responsive design
  • Error handling
  • Real-time search

1️⃣1️⃣ Movie Search App 🎬 – A responsive movie search application using the OMDB API with detailed movie information

• Key Features:

  • Real-time movie search with OMDB API integration
  • Responsive movie grid with hover effects
  • Detailed modal view for movie information
  • Dark/Light theme support
  • Local storage for search history
  • Loading states and error handling

• Concepts:

  • API Integration (OMDB)
  • Modal Windows
  • LocalStorage
  • Responsive Design
  • Error Handling
  • CSS Variables
  • Async/Await
  • DOM Manipulation

  1️⃣2️⃣ Task Manager Kanban Board 📋 – A drag-and-drop task management system with Kanban-style columns

• Key Features:

  • Drag and drop tasks between status columns
  • Create, edit, and delete tasks
  • Task status tracking (To-Do, In Progress, Done)
  • Dark/Light theme with system preference
  • Search and filter functionality
  • Local storage for task persistence
  • Real-time task count updates

• Concepts:

  • Drag and Drop API
  • LocalStorage Management
  • Theme Switching
  • DOM Manipulation
  • Event Delegation
  • CSS Grid/Flexbox
  • CSS Variables
  • Responsive Design

1️⃣3️⃣ Calculator App 🧮 – A modern, responsive calculator built with HTML, CSS, and JavaScript. Supports basic arithmetic, percent, clear, backspace, and keyboard input.

• Key Features:

  • Perform addition, subtraction, multiplication, and division
  • Percent calculation
  • Clear and backspace functions
  • Keyboard input support
  • Responsive design for all devices

• Concepts:

  • DOM Manipulation
  • Event Handling
  • Keyboard Events
  • Responsive CSS
  • JavaScript Arithmetic

1️⃣4️⃣ Digital Clock & Alarm ⏰ – A modern digital clock with alarm functionality, 12/24-hour toggle, and animated alarm ring.

• Key Features:
  • Real-time digital clock display
  • 12-hour / 24-hour format toggle
  • Set and clear alarm easily
  • Animated alarm ring and sound notification
  • Responsive, accessible, and mobile-friendly UI
• Concepts:
  • Date and time manipulation
  • setInterval for real-time updates
  • DOM manipulation and event handling
  • CSS gradients, transitions, and keyframe animations
  • Responsive and accessible design

1️⃣5️⃣ Customizable Calendar 📅 – A customizable calendar interface for managing dates and planning events.

• Concepts:
  • Date API
  • Dynamic rendering
  • Interactive UI controls

1️⃣6️⃣ Simple To-Do List ✅ – A clean to-do list app where users can add, complete, delete, and persist tasks.

• Key Features:

  • Add and delete tasks
  • Mark tasks as completed
  • Clear all completed tasks
  • Local storage persistence
  • Remaining-items counter

• Concepts:

  • LocalStorage
  • DOM Manipulation
  • Event Delegation
  • Form Handling

(More projects will be added soon...)

🛠️ Technologies Used

• JavaScript (Vanilla JS) – Core logic and interactivity
• HTML – Structure of the projects
• CSS – Styling and animations

📖 How to Use

1. Clone this repository:

   git clone https://github.com/vikky2810/20-JavaScript-Projects.git
   cd 20-JavaScript-Projects

2. Open any project folder and launch index.html in your browser.

🎯 Purpose of This Repository

✅ Strengthen JavaScript fundamentals
✅ Practice real-world coding scenarios
✅ Explore different DOM manipulation and event handling techniques

🌟 Contribute

This is a personal learning project, but feel free to fork, improve, and share your thoughts!

---

🔥 Stay tuned for more exciting projects! 🚀