تطبيق ويب تفاعلي (Web App) ديناميكي بالكامل، يعمل كدليل أفلام بسيط. يقوم التطبيق باستخدام (API) حقيقي من قاعدة بيانات الأفلام

جلب البيانات الحية (API Fetching): يتصل التطبيق بواجهة برمجة تطبيقات (API) خارجية لجلب قائمة الأفلام الرائجة عند تحميل الصفحة.

نظام بحث فوري (Live Search): يتضمن شريط بحث فعال يقوم بإرسال طلب جديد للـ API بناءً على مدخلات المستخدم ويعرض النتائج فوراً.

إنشاء المحتوى ديناميكياً (Dynamic DOM): لا توجد "كروت أفلام" مكتوبة مسبقاً في الـ HTML. يقوم الجافاسكريبت بإنشاء وعرض كل بطاقة فيلم (div, img, h3) بناءً على البيانات المستلمة من الـ API.

تصميم متجاوب (Responsive): تم استخدام CSS Grid لإنشاء شبكة أفلام مرنة تتكيف تلقائياً مع جميع أحجام الشاشات.

طريقة التنفيذ (التقنيات المستخدمة):

JavaScript (ES6+): هو العقل المدبر للمشروع. تم استخدامه لـ:

إجراء طلبات الشبكة (HTTP Requests) باستخدام fetch().

التعامل مع العمليات غير المتزامنة (Asynchronous) بفاعلية باستخدام async/await.

تحليل بيانات JSON المستلمة من السيرفر.

التعامل الكامل مع الـ DOM (إنشاء عناصر، إضافتها للصفحة، والاستماع لأحداث البحث submit).

HTML5: لتوفير الهيكل الأساسي للتطبيق (مثل حاوية الأفلام وفورم البحث).

CSS3: لتنسيق بطاقات الأفلام وشبكة العرض (Grid) وشريط البحث (Flexbox).