أوجه انتباه سكان خابروفسك وضيوف هبر إلى مهمة تطوير الذات في الواجهة الأمامية للتنمية. تهدف المهمة إلى فناني الأداء الذين يبدأون التعامل مع البرمجة الأمامية ويتم إعدادهم للتعرف على آليات البرمجة الأساسية في المستعرض. التقنيات المطلوبة: HTML ، CSS ، JavaScript (Vanilla).
تم تصميم المهمة خصيصًا لفهم أكبر قدر ممكن من التقنيات الأساسية مع الحد الأدنى من الاتصال بأي أدوات إضافية. في الأساس ، لا يلزم سوى متصفح ومحرر كود ؛ لا التلاعب الأولي ، دون الحاجة للمعالجة على الجانب الخلفي. الذي يهتم للتعرف على الإنتاج - مرحبا بكم في القط!
توصيات للمظهر
قم بتكوين نموذج يتكون من قائمة الخطوط ولوحة المرشح. مثال النموذج:
ميزات النموذج من المثال:
• النموذج عبارة عن
كتلة ذات عرض ثابت في وسط النافذة ؛
• لوحة الترشيح لها
ارتفاع ثابت ؛ يتم ترتيب هوامش اللوحة
أفقيا في واحد أو سطرين ؛
•
تمتد قائمة الأسطر
إلى ارتفاع النافذة المتبقية بالكامل ، عندما يكون عدد الخطوط أكبر من ارتفاع القائمة المخصصة ، يظهر
شريط التمرير في القائمة نفسها (يتم تجنب ظهور شريط التمرير العمومي في نافذة المتصفح).
المتطلبات الوظيفية
يتم إنشاء خطوط القائمة ومحتوياتها عند فتح الصفحة (عدد عشوائي أكثر من 200). يجب تجميع العلامات ومحتويات كل سطر بشكل عشوائي من الخصائص المدرجة سابقًا في المجموعات الثابتة في الكود المصدري ، والمجموعات تتوافق مع مرشحات التحديد المتقدمة المرقمة 1 و 2 و 3 و 4 (الموصوفة بمزيد من التفاصيل أدناه ، ويتم تعيين قيم العناصر ورقمها في المجموعة بواسطة المنفذ). يعتمد اختيار عشوائي لعناصر التجميع لتجميع السلاسل على توليد أرقام عشوائية (عشوائي).
توفير معرف فريد واثنين من العلامات في كل سطر من القائمة:
1. تتم كتابة قيمة المعرف في سمة المعرف وعرضها في بداية محتويات السلسلة (يمكن لفها في علامة منفصلة) ؛
2. العلامة الأولى هي اختيار عشوائي ، من تلك التي يوفرها المرشح ، على سبيل المثال ، التسمية ، span ، div ، p أو ما شابه ، مع فئة عشوائية يمكن تمييزها بصريًا (على سبيل المثال ، حسب لون الخلفية أو الخط أو ما شابه ذلك) ، يجب تحديد الفئات مسبقًا في css وإدراجها في مجموعة الثوابت للمرشح المقابل) ، في محتويات عرض اسم العلامة وفئتها. الاستبدال العشوائي للعديد من الفئات المختلفة دفعة واحدة ، بأعداد مختلفة ، لا تقل عن 1 ، موضع ترحيب ؛
3. العلامة الثانية هي إدخال بنوع عشوائي (سمة type) ، قيمة عشوائية (قيمة مكررة في العنوان) ، وجود عشوائي / عدم وجود علامة كتلة ، وجود عشوائي / عدم وجود علامة للقراءة فقط.
في لوحة التصفية ، وفر تبديل الوضع بين
التحديد بواسطة المعرف والاختيار المتقدم . بعد تحديد القيم في نموذج التصفية ، يجب أن تبقى الإدخالات المناسبة فقط في القائمة:
في وضع
التحديد بواسطة المعرف - سطر مع معرف المطابقة ؛
في وضع
التحديد المتقدم - خطوط ، يتوافق كل منها على الفور مع جميع الخيارات المحددة: العلامة الأولى ، فئة العلامة الأولى ، نوع علامة الإدخال ، قيمة علامة الإدخال ، علامة علامة الإدخال التي تم حظرها ، علامة الوصول للقراءة فقط تدل على ذلك.
عند تغيير حقول التصفية مرة أخرى ، يجب أن تعرض القائمة إدخالات من قائمة المصدر تكون مناسبة لتكوين المرشح المحدد حديثًا (يجب أن تتم تصفية قائمة المصدر مرة أخرى ، ويجب ألا تضيع السجلات المصدر).
في وضع
التحديد حسب المعرف ، يجب أن تحتوي لوحة المرشح على حقل تحديد حسب معرف السطر (حقل الإدخال).
في وضع
التحديد المتقدم ، يجب أن تكون المرشحات التالية على لوحة المرشح:
1. بواسطة العلامة الأولى (الاختيار من المجموعة) ؛
2. حسب فئة العلامة الأولى (الاختيار من المجموعة) ؛
3. حسب نوع علامة الإدخال (الاختيار من المجموعة) ؛
4. حسب قيمة علامة الإدخال (الاختيار من المجموعة) ؛
5. عن طريق حظر علامة الإدخال (اختيار القيم نعم / لا) ؛
6. من خلال توافر فقط لقراءة علامة الإدخال (اختيار القيم نعم / لا).
بالإضافة إلى ذلك
* من المشجع أن
يتفاعل المرشح
مع التغييرات فورًا ، دون الحاجة إلى نقرة منفصلة على زر البحث.
* من المستحسن أن تفعل كل شيء بعناية ، والتعامل مع خصائص المغلق وتقديم مثل هذا
التصميم من خطوط الفردية من القائمة لا يذهب بسبب الاختلافات في العلامات الواردة فيها.
** قم بتنفيذ اختيار جميع العناصر الضرورية باستخدام
محدد واحد - حدد المحتويات اللازمة للخطوط في وقت واحد ، ولا تحقق من كل سطر عن وجود الخيارات المحددة في المرشحات.
*** حاول أن توفر
لاختيار عدة قيم للمرشحات حسب العلامة الأولى ، حسب فئة العلامة الأولى ، ونوع علامة الإدخال ، وقيمة علامة الإدخال. يجب أن يحدد المرشح حسب العلامة الأولى أو نوع علامة الإدخال أو قيمة علامة الإدخال سلاسل بأي من القيم المحددة فيها (في كل مرشح على حدة ؛ يتم الحفاظ على المتطلب العام للوضع المتقدم لمطابقة السلاسل بجميع المرشحات في وقت واحد).
آمل أن يجد القارئ أن المهمة الموصوفة ستكون مفيدة في تطوير الذات أو تبدو مناسبة لتوصية شخص ما.
أتمنى لك كل النجاح في حياتك المهنية!