مارين عملية للتفاعل مع DOM باستخدام JavaScript

مجموعة من التمارين التطبيقية المصممة لتعلم كيفية التعامل مع عناصر الصفحة (DOM) باستخدام JavaScript النقي، مرتبة من المستوى المبتدئ إلى المتقدم. يهدف هذا المشروع إلى تطوير مهارات التلاعب بالعناصر، ومعالجة الأحداث، وبناء واجهات تفاعلية دون الحاجة إلى مكتبات خارجية.

? محتوى التمارين (20 تمرينًا):

تغيير نص داخل عنصر

تغيير لون الخلفية

إظهار عنصر

إخفاء عنصر

تغيير صورة

إضافة عنصر إلى قائمة

حذف آخر عنصر من القائمة

إدخال نص داخل الصفحة

تغيير حجم الخط (مرتين لطرق مختلفة)

عداد نقرات بزر باستخدام JavaScript

تغيير ألوان عدة عناصر معًا

عرض شرائح تلقائي للصور (Auto Image Slider)

تغيير عشوائي للون الخلفية عند النقر

التحقق من طول النص (Validation)

نقل عنصر من قائمة غير مرتبة (UL) إلى قائمة مرتبة (OL)

قائمة ديناميكية مع زر حذف لكل عنصر

?️ التقنيات المستخدمة:

HTML5

CSS3

JavaScript (Vanilla JS – بدون أي مكتبات خارجية)

DOM API بالكامل (getElementById، querySelector، addEventListener، إنشاء وإضافة العناصر ديناميكيًا)

? الفوائد التعليمية لهذا المشروع:

إتقان التعامل مع بنية الصفحة (DOM Tree)

فهم عميق للأحداث (Events) ومعالجتها

القدرة على بناء مشاريع تفاعلية من الصفر

تطبيق مفاهيم مثل: التكرار، الشروط، الدوال، والمصفوفات في سياق عملي

? كيفية التشغيل:

افتح ملف index.html في أي متصفح حديث.

اختر التمرين الذي تريد تجربته من القائمة.

جميع التمارين تعمل مباشرة دون الحاجة إلى خادم (Server).

?‍?