1. استمارة البطاقة الائتمانية
شكل بطاقة ائتمان رائع مع تفاعلات دقيقة سلسة وجميلة. يتضمن تنسيق الأرقام والتحقق من الصحة والكشف التلقائي عن نوع البطاقة. إنه مبني على Vue.js وهو أيضًا مستجيب تمامًا. (يمكنك ان ترى .)
ما سوف تتعلم:
- معالجة النماذج والتحقق منها
- معالجة الأحداث (على سبيل المثال ، عندما تتغير الحقول)
- تعرف على كيفية عرض العناصر ووضعها على الصفحة ، وخاصة معلومات بطاقة الائتمان الموجودة أعلى النموذج
تمت ترجمة المقال بدعم من EDISON Software ، والتي و .
2. الرسم البياني
المخطط الشريطي هو مخطط أو رسم بياني يمثل بيانات فئوية بأشرطة مستطيلة ذات ارتفاعات أو أطوال تتناسب مع القيم التي تمثلها.
يمكن تطبيقها عموديًا أو أفقيًا. يُطلق على المخطط الشريطي العمودي أحيانًا اسم مخطط خطي.
ما سوف تتعلم:
- عرض البيانات بطريقة منظمة ومفهومة
- اختياري: تعرف على كيفية استخدام العنصر
canvasوكيفية رسم العناصر معها
يمكنك العثور على بيانات سكان العالم. يتم فرزها حسب السنة.
3. تويتر للرسوم المتحركة القلب
في عام 2016 ، قدم Twitter هذه الرسوم المتحركة المذهلة لتغريداتهم. اعتبارًا من عام 2019 ، لا يزال يبدو لائقًا ، فلماذا لا تنشئ واحدًا بنفسك؟
ما سوف تتعلم:
- العمل مع سمة CSS
keyframes - معالجة وتحريك عناصر HTML
- اجمع بين JavaScript و HTML و CSS
4. مستودعات GitHub مع وظيفة البحث
لا يوجد شيء غير عادي هنا - مستودعات GitHub هي مجرد قائمة مجيدة.
الهدف هو عرض المستودعات والسماح للمستخدم بترشيحها. يستخدم للحصول على مستودعات لكل مستخدم.
صفحة الملف الشخصي على GitHub
ما سوف تتعلم:
- احصل على البيانات من API
- عرض البيانات من API
- تصفية وعرض البيانات ذات الصلة لكل بحث
- اختياري: إذا كنت مستعدًا لقبول المكالمة ، فاستخدم ، تم إنشاؤه باستخدام GraphQL. .
5. الدردشات بأسلوب Reddit
تعد الدردشات وسيلة شائعة للتواصل نظرًا لبساطتها وسهولة استخدامها. ولكن ما الذي يمد غرف الدردشة الحديثة في الواقع؟ مآخذ الويب!
ما سوف تتعلم:
- استخدم WebSockets ، وقم بتطبيق الاتصالات في الوقت الفعلي وتحديثات البيانات
- العمل مع مستويات وصول المستخدم (على سبيل المثال ، يكون لمالك قناة الدردشة الدور
adminوآخرين في الغرفةuser) - معالجة النماذج والتحقق منها - تذكر أن مربع الدردشة لإرسال رسالة هو
input - إنشاء والانضمام إلى دردشات مختلفة
- التعامل مع الرسائل الخاصة. يمكن للمستخدمين التواصل مع المستخدمين الآخرين بشكل خاص. بشكل أساسي ، ستقوم بإنشاء اتصال WebSocket بين مستخدمين.
6. التنقل بنمط الشريط
تفرد هذا التنقل هو أن الحاوية المنبثقة تتحول لتناسب المحتوى. هناك أناقة لهذا الانتقال مقارنة بالسلوك التقليدي لفتح وإغلاق نافذة جديدة.
ما سوف تتعلم:
- ادمج رسوم CSS المتحركة مع الانتقالات
- محتوى الظل وتطبيق فئة نشطة على عنصر عائم
حاول القيام بذلك بنفسك أولاً، ولكن إذا كنت بحاجة إلى مساعدة، فراجع هذا .
المصدر: www.habr.com
