Wordle Game - Interactive Word Puzzle

Project Overview

A modern, responsive implementation of the popular Wordle word-guessing game, built with vanilla HTML, CSS, and JavaScript. This project features a sleek glassmorphism design with smooth animations and an intuitive user interface.

Features

• Classic Wordle Gameplay: Guess the 4-letter word in 4 attempts or less
• Visual Feedback System: Color-coded tiles indicating:
  • Correct letters in the correct positions (green)
  • Correct letters in wrong positions (yellow)
  • Incorrect letters (gray)
• Modern UI Design: Glassmorphism aesthetics with gradient backgrounds and blur effects
• Dark Mode Toggle: Switch between light and dark themes with smooth transitions
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Interactive Hints: Click the question mark for contextual word hints
• Instructions Panel: Toggle-able game instructions with clear explanations
• Smooth Animations: Engaging hover effects and letter reveal animations

Technical Implementation

• Frontend: Pure HTML5, CSS3, and JavaScript (ES6+)
• Styling:
  • CSS Grid for game board layout
  • Flexbox for general layout
  • CSS animations for smooth transitions
• Responsive: Mobile-first design with media queries
• Accessibility:
  • Proper contrast ratios
  • Semantic HTML
  • Keyboard navigation support
• Performance:
  • Optimized CSS with efficient selectors
  • Minimal DOM manipulation for better performance

Game Mechanics

• Keyboard Interaction:
  • Enter letters using your keyboard
  • Press Enter to submit your guess
• Tile Feedback:
  • Green tiles: Correct letters in correct positions
  • Yellow tiles: Correct letters in wrong positions
  • Gray tiles: Incorrect letters
• Hints: Get hints by clicking the question mark icon
• Restart: Start over anytime with the restart button

Design Highlights

• Glassmorphism UI: Modern frosted glass effect with backdrop blur
• Gradient Backgrounds: Dynamic color schemes that adapt to themes
• Micro-interactions: Subtle animations that enhance user experience
• Typography: Clean, readable fonts with proper hierarchy
• Color Psychology: Intuitive color coding for game feedback

Installation

1. Clone this repository:

   git clone https://github.com/yourusername/wordle-game.git