Recipe Finder (Static)

مرحبا, اريد مشروع بسيط يعرض وصفات أكل جاهزة بناءً على اختيار المستخدم (بدون API). 🔹 Task 1 — صفحة اختيار نوع الأكل المطلوب: Dropdown فيه أنواع أكل: Pasta Salad Dessert زر “Show Recipe”. تصميم بسيط باستخدام CSS. 🔹 Task 2 — بيانات الوصفات الثابتة المطلوب: جهّز Object فيه الوصفات: recipes = { Pasta: { ingredients: ["Pasta", "Tomato", "Cheese"], steps: "Boil pasta then add sauce." }, Salad: { ingredients: ["Lettuce", "Tomato", "Cucumber"], steps: "Mix all ingredients." }, Dessert: { ingredients: ["Milk", "Sugar", "Butter"], steps: "Heat and mix well." } }; عند الضغط على Show Recipe: اعرض مكونات الوصفة. اعرض خطوات التحضير. 🔹 Task 3 — صفحة عرض الوصفة المطلوب: عرض: عنوان الوصفة. قائمة المكوّنات. خطوات التحضير. إضافة زر Back للعودة لصفحة الاختيار.