Recipe Project

تطبيق ويب responsive بيجيب بيانات الوصفات من API خارجي. المستخدم يقدر يبحث عن أي وصفة (أكل، مشروبات، حلويات) ويظهر له تفاصيلها: المكونات، طريقة التحضير، صورة الطبق.

المميزات التقنية:

واجهة بتصميم Bootstrap 5 متجاوبة تماماً مع الموبايل والتابلت.

جلب البيانات من API باستخدام fetch في JavaScript.

بحث ديناميكي: المستخدم يكتب اسم الوجبة أو أول حروفها، وتظهر النتائج لحظياً أو بعد الضغط على زر.

عرض الوصفة في بطاقة (card) فيها صورة، اسم الوجبة، وتفاصيل سريعة، مع زر لعرض التفاصيل الكاملة في نافذة منبثقة (modal) أو صفحة منفصلة.

معالجة الأخطاء: لو الاسم مش موجود، يظهر رسالة "لا توجد نتائج".

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

HTML5، CSS3، JavaScript (Vanilla JS)، Bootstrap 5، Fetch API.

الهدف:

تطبيق خفيف وسريع يعتمد على API خارجي، ويدرب على التعامل مع البيانات الديناميكية والـ async programming.