- قم بعمل Fork
- افتح الـrepo في github desktop
- من برنامج github desktop اضغط على open in visual studio code
- افتح ملف script.js وابدأ الحل
- أنشئ كائن جديد وقم بتسميته movie1 وأعطه الخصائص التالية:
name,img
وقم بتعبئتها حسب ماتريدملاحظة: في img سنقوم بوضع رابط لأي صورة خاصة بالفلم
- كرر الخطوة السابقة مرتين ولا تنسى تغيير أسماء الكائنات إلى movie2 و movie3 لتحصل على 3 أفلام مختلفة
- أنشئ مصفوفة جديدة وقم بتسميتها movies واجعلها فارغة
[]
- أضف الثلاث كائنات التي قمت بإنشائها إلى مصفوفة movies
استخدم ()push.
- قم بإنشاء متغير باسم movieContainer واجعل قميته = عنصر الـhtml الذي يحتوي على "id="container
ملاحظة مهمة: يجب أن تستخدم ('...')document.getElementById
- قم باستخدام دالة المصفوفة ()forEach. على المصفوفة movies بحيث تعرض جميع الأفلام في موقعك، استخدم الكود التالي داخل الدالة، مع تغيير ما يلزم
movieContainer.innerHTML += `
<div class="movie">
<img src="${...}" alt="movie picture" />
<h2>${...}</h2>
</div>
`;
- احفظ التغييرات وقم بعمل commit و push
- قم بتسليم التمرين على موقع Coded Lab
بونص✨!
- ستقوم بإنشاء قسم خاص لـ"فلم اليوم" في نفس صفحة الموقع، في كل مره يدخل فيها المستخدم الموقع، سيتغير هذا الفلم بشكل عشوائي ويتم اختيار فلم من الأفلام الثلاثة
مساعدة: ستقوم باستخدام دوال مكتبة Math
"لا تترددون أنكم تسألون المدرسين 👌"