فرنٹ اینڈ ڈویلپر کے لیے چھ کام

1. کریڈٹ کارڈ فارم

ہموار اور خوشگوار مائیکرو تعاملات کے ساتھ ایک ٹھنڈی کریڈٹ کارڈ کی شکل۔ نمبر فارمیٹنگ، تصدیق اور خودکار کارڈ کی قسم کا پتہ لگانا شامل ہے۔ یہ Vue.js پر بنایا گیا ہے اور یہ مکمل طور پر ذمہ دار بھی ہے۔ (آپ دیکھ سکتے ہیں یہاں.)

کریڈٹ کارڈ فارم

آپ کیا سیکھیں گے:

• فارم پر کارروائی اور تصدیق کریں۔
• واقعات کو ہینڈل کریں (مثال کے طور پر، جب فیلڈز تبدیل ہوں)
• صفحہ پر عناصر کو ظاہر کرنے اور رکھنے کا طریقہ سمجھیں، خاص طور پر کریڈٹ کارڈ کی معلومات جو فارم کے اوپر ظاہر ہوتی ہے۔

مضمون کا ترجمہ EDISON سافٹ ویئر کے تعاون سے کیا گیا تھا، جو پروگرامرز کی صحت اور ان کے ناشتے کا خیال رکھتا ہے۔اور اپنی مرضی کے سافٹ ویئر تیار کرتا ہے۔.

2. ہسٹوگرام

ہسٹوگرام ایک چارٹ یا گراف ہے جو مستطیل سلاخوں کے ساتھ مخصوص ڈیٹا کی نمائندگی کرتا ہے جس کی اونچائی یا لمبائی ان اقدار کے متناسب ہوتی ہے۔

وہ عمودی یا افقی طور پر لاگو کیا جا سکتا ہے. عمودی بار چارٹ کو بعض اوقات لائن چارٹ کہا جاتا ہے۔

آپ کیا سیکھیں گے:

• ڈیٹا کو منظم اور قابل فہم طریقے سے ڈسپلے کریں۔
• اضافی طور پر: عنصر کو استعمال کرنے کا طریقہ سیکھیں۔ canvas اور اس کے ساتھ عناصر کو کیسے کھینچنا ہے۔

یہاں آپ دنیا کی آبادی کا ڈیٹا تلاش کر سکتے ہیں۔ انہیں سال کے لحاظ سے ترتیب دیا گیا ہے۔

3. ٹویٹر ہارٹ اینیمیشن

2016 میں، ٹویٹر نے اپنی ٹویٹس کے لیے یہ حیرت انگیز اینیمیشن متعارف کرایا۔ 2019 تک، یہ اب بھی حصہ نظر آتا ہے، تو کیوں نہ خود ایک تخلیق کریں؟

آپ کیا سیکھیں گے:

• CSS وصف کے ساتھ کام کریں۔ keyframes
• HTML عناصر کو جوڑ توڑ اور متحرک کریں۔
• جاوا اسکرپٹ، ایچ ٹی ایم ایل اور سی ایس ایس کو یکجا کریں۔

4. تلاش کی فعالیت کے ساتھ GitHub ریپوزٹریز

یہاں کچھ بھی پسند نہیں ہے — GitHub repos صرف ایک شاندار فہرست ہیں۔
مقصد ذخیروں کو ظاہر کرنا اور صارف کو انہیں فلٹر کرنے کی اجازت دینا ہے۔ استعمال کریں۔ سرکاری GitHub API ہر صارف کے لیے ذخیرہ حاصل کرنے کے لیے۔

GitHub پروفائل صفحہ - github.com/indreklasn

آپ کیا سیکھیں گے:

• API سے ڈیٹا وصول کریں۔
• API سے ڈیٹا ڈسپلے کریں۔
• ہر تلاش کے لیے متعلقہ ڈیٹا کو فلٹر اور دکھائیں۔
• اختیاری: اگر آپ کسی چیلنج کے لیے تیار ہیں تو استعمال کریں۔ API v4۔، گراف کیو ایل کا استعمال کرتے ہوئے بنایا گیا۔ اگر آپ GraphQL سیکھنا چاہتے ہیں تو میرے پچھلے مضامین میں سے ایک پر جائیں۔.

5. Reddit طرز کی چیٹس

بات چیت ان کی سادگی اور استعمال میں آسانی کی وجہ سے مواصلات کا ایک مقبول طریقہ ہے۔ لیکن کیا واقعی جدید چیٹ رومز کو ایندھن دیتا ہے؟ ویب ساکٹس!

آپ کیا سیکھیں گے:

• WebSockets، ریئل ٹائم کمیونیکیشن اور ڈیٹا اپ ڈیٹس کا استعمال کریں۔
• صارف کی رسائی کی سطحوں کے ساتھ کام کریں (مثال کے طور پر، چیٹ چینل کے مالک کا کردار ہے۔ admin، اور کمرے میں موجود دیگر - user)
• فارم پر کارروائی اور تصدیق کریں - یاد رکھیں، پیغام بھیجنے کے لیے چیٹ ونڈو ہے۔ input
• مختلف چیٹس بنائیں اور ان میں شامل ہوں۔
• ذاتی پیغامات کے ساتھ کام کریں۔ صارفین دوسرے صارفین کے ساتھ نجی طور پر چیٹ کر سکتے ہیں۔ بنیادی طور پر، آپ دو صارفین کے درمیان ایک WebSocket کنکشن قائم کر رہے ہوں گے۔

6. پٹی طرز کی نیویگیشن

جو چیز اس نیویگیشن کو منفرد بناتی ہے وہ یہ ہے کہ پاپ اوور کنٹینر مواد میں فٹ ہونے کے لیے تبدیل ہو جاتا ہے۔ ایک نئے پاپ اوور کو کھولنے اور بند کرنے کے روایتی طرز عمل کے مقابلے اس منتقلی میں ایک خوبصورتی ہے۔

آپ کیا سیکھیں گے:

• ٹرانزیشن کے ساتھ CSS اینیمیشن کو یکجا کریں۔
• مواد کو مدھم کریں اور فلوٹ شدہ عنصر پر ایکٹیو کلاس لگائیں۔

پہلے یہ خود کرنے کی کوشش کریں، لیکن اگر آپ کو مدد کی ضرورت ہے، تو اسے چیک کریں۔ قدم بہ قدم گائیڈ.

ماخذ: www.habr.com