🧠 Vanilla Wordle Clone (Guess The Word Game)

English Description

A fun and interactive word guessing game built with pure JavaScript, HTML5, and CSS3.
This project was developed as part of my journey to master DOM manipulation and game logic.

The game engine was built to process word arrays and compare inputs in real-time with the target word, with precise management of win/lose states and dynamic DOM updates.

الوصف العربي

لعبة تخمين الكلمات الممتعة والتفاعلية مبنية باستخدام جافاسكريبت، HTML5، و CSS3.
تم تطوير هذا المشروع كجزء من رحلتي لإتقان التعامل مع DOM ومنطق الألعاب.

تم بناء محرك اللعبة ليعالج مصفوفات الكلمات ويقارن المدخلات لحظياً مع الكلمة المستهدفة، مع إدارة دقيقة لحالات الفوز والخسارة وتحديث واجهة المستخدم (DOM) ديناميكياً.

📸 Preview

🔗 Play Guess The Word Game

✨ Features

• Dynamic Inputs: Automatically generated based on word length.
• Smart Navigation: Auto-focus with full support for Backspace and Arrow Keys.
• Hint System: Limited hints reveal random correct letters.
• Responsive Design: Clean UI that works on all screen sizes.
• Win/Lose States: Visual feedback using colors (Green, Yellow, Grey).

المميزات

• مدخلات ديناميكية: يتم إنشاؤها تلقائيًا بناءً على طول الكلمة.
• تنقل ذكي: تركيز تلقائي مع دعم كامل لمفتاحي Backspace و Arrow Keys.
• نظام التلميحات: تلميحات محدودة تكشف عن أحرف صحيحة عشوائية.
• تصميم متجاوب: واجهة نظيفة تعمل على جميع أحجام الشاشات.
• حالات الفوز/الخسارة: ملاحظات بصرية باستخدام الألوان (الأخضر، الأصفر، الرمادي).

🛠️ Tech Stack

التقنيات المستخدمة

📝 How to Play

1. The game selects a random word from a predefined list.
2. You have 6 tries to guess the correct word.
3. Colors will guide you:
   • Green: Letter is correct and in the right place.
   • Yellow: Letter is correct but in the wrong place.
   • Grey: Letter is not in the word.

طريقة اللعب

1. تختار اللعبة كلمة عشوائية من قائمة محددة مسبقًا.
2. لديك 6 محاولات لتخمين الكلمة الصحيحة.
3. الألوان ستوجهك:
   • الأخضر: الحرف صحيح وفي مكانه الصحيح.
   • الأصفر: الحرف صحيح ولكن في المكان الخاطئ.
   • الرمادي: الحرف غير موجود في الكلمة.

👨‍💻 Developed By

English

Youssef Yasser Ismail
Front-End Developer 🚀
Passionate about building interactive and user-friendly web applications.

📧 Email: youseef.ali.2002@gmail.com
🔗 GitHub: https://github.com/Youssefali2002

العربية

يوسف ياسر إسماعيل
مطور واجهات أمامية طموح 🚀
شغوف ببناء تطبيقات ويب تفاعلية وسهلة الاستخدام.

📧 الإيميل: youseef.ali.2002@gmail.com
🔗 جيت هب: https://github.com/Youssefali2002