🎮 Web Games Collection

Welcome to the Web Games Collection! This repository contains a set of four interactive and fun web-based games and tools built using pure HTML, Vanilla CSS, and JavaScript.

Each application features a modern, responsive, and glassmorphic premium UI, ensuring an engaging user experience across all devices.

🕹️ Games Included

1. RGB Color Guesser (/color-guesser)

A minimalist color guessing game that tests your knowledge of RGB color codes.

• Features: Easy (3 choices) and Hard (6 choices) modes, streak tracking, and interactive animations when you guess correctly or incorrectly.
• Tech: Modern Glassmorphism UI, Responsive CSS Grids, DOM Manipulation.

2. Whack-a-Mole (/whack-a-mole)

A fast-paced classic arcade game where you test your reflexes.

• Features: A 30-second timer, real-time score tracking, best score persistence via localStorage, and Pause/Resume controls.
• Tech: CSS Animations (popping and bonking), setInterval mechanics, Custom cursors.

3. Typing Speed Test (/typing-game)

Improve your typing speed and accuracy with this 60-second typing challenge.

• Features: Words-Per-Minute (WPM) tracking, active character-by-character validation (correct/incorrect highlighting), and dynamic text loading upon completion of a sentence.
• Tech: Accurate time calculation logic, real-time string comparison, input event handling.

4. Interactive Todo List (/todo-list)

A sleek task management tool that feels great to use.

• Features: Add tasks, toggle completion states, mass delete selected (completed) tasks, and filter views (All, Pending, Completed). Keeps track of your total and completed task counts.
• Tech: Advanced array filtering, dynamic HTML injection, custom CSS dropdowns and ghost buttons.

🚀 How to Run

Because these are built with pure Vanilla web technologies, no build tools or package installations (like npm install) are required!

1. Clone the repository:

   git clone https://github.com/Prathvikmehra/Games.git

2. Open any game: Navigate into any of the game folders and open the index.html file directly in your web browser. Example: Double-click on color-guesser/index.html to start playing!

🎨 Design System

All applications use Vanilla CSS natively. There are no external CSS frameworks used (e.g., Tailwind or Bootstrap). The styling highlights include:

• Harmonized Google Fonts (Poppins, Inter, Fredoka One, Fira Code)
• Sleek interactive animations (hover, transform, custom keyframes)
• Cross-device responsiveness using CSS Grid and Flexbox

---

Created and maintained by Prathvikmehra.