Code Monkey home page Code Monkey logo

web-js-challenging-2's Introduction

web-js-challenging

🚀 مستوى التحدي

في هذا التمرين ستقوم ببناء واجهة موقع لمشاهدة ومتابعة أخبار الأفلام يمكنك تغيير فكرة الموقع شرط أن تلتزم بجميع المتطلبات

الصفحة الرئيسية

  1. قم ببناء صفحة رئيسية من اختيارك شرط أن تحتوي على
    شريط تنقل يحتوي على زري قائمة المفضلة وقائمة الأفلام
    زر قائمة المفضلة ينقلك إلى صفحة المفضلة
    زر قائمة الأفلام ينقلك إلى جزء قائمة الأفلام في الصفحة الرئيسية
    وأضف شريط بحث - قم بتفعيله إن استطعت
    Carousel شريط صور أو فيديوات مع سهمي تنقل للأمام والخلف
    قائمة الأفلام المعروضة في الموقع
  2. عند الضغط على إحدى الأفلام المعروضة تنتقل إلى صفحة تفصيلية عن الفيلم
  3. loading أضف خاصية الانتظار أو
  4. Off Canvas Menu استعمل
  5. قم بإضافة زر أضف إلى المفضلة لكل فيلم من الأفلام في الصفحة الرئيسية في قسم قائمة الأفلام

الصفحة التفصيلية

  1. كل صفحة فيلم تفصيلية تحتوي على زر أضف إلى المفضلة وقائمة منسدلة
  2. عند الضغط على زر القائمة المنسدلة في الصفحة التفصيلية لأي فيلم، تظهر قائمة بأسماء جميع الأفلام
  3. عند الضغط على اسم فيلم معين، يتغير محتوى الصفحة إلى المحتوى الخاص بالفيلم المختار
  4. استعن بالفيديوهات المرفقة

قائمة المفضلة

  1. عند الضغط على زر أضف إلى المفضلة في الصفحة التفصيلية يضاف الفيلم في المفضلة في صفحة منفصلة

التحدي

  1. أضف لمالك الموقع خاصية إضافة فيلم جديد في قائمة الأقلام من خلال صفحة تحتوي على حقول إدخال يدخل من خلالها المالك المعلومات اللازمة أو الخاصة بالفيلم
  2. هل استنتجت شيئاً؟ نعم قائمة الأفلام عبارة عن مصفوفة من الكائنات وكل فيلك يمثل كائن وبالمرور على الكائنات في الكود تترتب الأفلام في القائمة

CSS وتنسيقات لغة HTML قم باستخدام وسوم لغة

JavaScript قم باستخدام لغة لإضافة التفاعل إلى الموقع

JavaScriptب CSS و HTMLلا تنسى ربط صفحاتك ال

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.