[ITDCFED] لیکچر 2 | انٹریکٹیو کانٹیکٹ / فیڈ بیک فارم | ایچ ٹی ایم ایل، سی ایس سیس اور جاوا اسکرپٹس کی مدد سے

 

1. تعارف

آئی ٹی درسگاہ سرٹیفائیڈ فرنٹ اینڈ ڈویلپر (ITDCFeD) پروگرام کے دوسرے ہفتے میں خوش آمدید۔ اس لیکچر میں ایک Interactive Contact / Feedback Form بنایا جائے گا، جو ہر ویب سائٹ کا لازمی حصہ ہوتا ہے اور فرنٹ اینڈ ڈویلپر کے لیے بنیادی yet professional skill ہے۔​
Week #1 میں ہم نے اپنا سادہ personal web page بنایا، اب اس پر نئی skill add ہو رہی ہے: فارمز، validation اور یوزر کے ساتھ مؤثر interaction۔​

---

2. اس لیکچر / پروجیکٹ کے اہداف

اس لیکچر #2 پروجیکٹ کے اختتام تک آپ:

• HTML کے ذریعے ایک منظم Contact / Feedback Form بنانا سیکھیں گے (نام، ای میل، موضوع، پیغام وغیرہ)۔​

• CSS کے ساتھ فارم کو card‑style box، focus effects، error messages اور responsive layout کے ساتھ خوبصورت انداز میں پیش کر سکیں گے۔​

• JavaScript کے ذریعے basic form validation (required fields، email format check) اور success message show/hide کرنا سیکھیں گے۔​

• CodePen پر فارم کو edit، fork اور اپنا ورژن شیئر کر کے practical experience حاصل کریں گے۔​

---

3. Live Demo اور Source Code (CodePen)

اس پروجیکٹ کا مکمل working demo اور سورس کوڈ آن لائن موجود ہے:

🔗 Live Demo + Source Code (CodePen):
https://codepen.io/mmshahid73/pen/vEGMaMW​

کرنے کے کام:

• لنک کھولیں، اوپر output میں فارم کو دیکھیں، خود فارم بھر کر submit کر کے validation اور success میسج observe کریں۔​

• CodePen پر Fork کریں تاکہ یہ پروجیکٹ آپ کے اپنے اکاؤنٹ میں copy ہو جائے۔​

• پھر HTML، CSS اور JS تینوں حصوں میں اپنی customization کریں (نیچے اسائنمنٹ میں detail دی گئی ہے)۔​

---

4. فارم کی ساخت – Step‑by‑Step وضاحت

4.1 HTML – فارم کے حصے

CodePen کے HTML panel میں آپ کو:

• اوپر ایک header ملے گا جس میں ITDCFeD اور Week #2 کا عنوان ہے۔​

• ایک intro section جو فارم کا چھوٹا سا تعارف اور ہدایت دیتا ہے۔​

• اصل form جس میں یہ فیلڈز ہیں:

  • نام (required)

  • ای میل (required، درست فارمیٹ کے ساتھ)

  • موضوع (اختیاری dropdown)

  • پیغام / feedback (required textarea)

• ہر فیلڈ کے نیچے ایک <small class="error"> element ہے، جہاں غلطی کا پیغام ظاہر ہوتا ہے۔​

• فارم کے نیچے دو بٹن ہیں: Submit اور Reset۔​

• آخر میں ایک Result Card ہے، جو فارم درست طریقے سے جمع ہونے پر "شکریہ" کا پیغام دکھاتا ہے۔​

4.2 CSS – خوبصورت اور responsive فارم

CSS میں:

• پورے پیج کے لیے background gradient، center alignment اور card‑style فارم کی styling کی گئی ہے۔​

• input، select اور textarea کے لیے padding، border‑radius، focus پر نیلا glow اور ہلکا سا background change ہے تاکہ user کو friendly feel ملے۔​

• .error کلاس کے ذریعے سرخ رنگ کے چھوٹے error میسجز ظاہر کیے جاتے ہیں، جو validation fail ہونے پر نظر آتے ہیں۔​

• Buttons کے لیے pill‑shape، hover پر ہلکی animation اور shadow شامل ہے، اور mobile پر بہتر display کے لیے media query بھی موجود ہے۔​

4.3 JavaScript – validation اور success message

JavaScript میں:

• سب سے پہلے form، input فیلڈز اور error elements کو document.getElementById کے ذریعے select کیا گیا ہے۔​

• clearErrors() function تمام error میسجز صاف کر دیتا ہے تاکہ ہر نئی کوشش fresh ہو۔​

• isValidEmail() ایک سادہ regex کے ذریعے email address کے فارمیٹ کو check کرتا ہے۔​

• form.addEventListener('submit', ...) کے اندر:

  • event.preventDefault() کے ذریعے فارم کو اصل سرور پر submit ہونے سے روکا جاتا ہے، اور پہلے validation کی جاتی ہے۔​

  • اگر نام، ای میل یا پیغام خالی ہو، یا ای میل کا فارمیٹ درست نہ ہو تو متعلقہ small.error میں پیغام لکھا جاتا ہے اور فارم آگے نہیں بڑھتا۔​

  • جب سب کچھ درست ہو جائے تو result card پر یوزر کے نام کے ساتھ "آپ کا فیڈ بیک موصول ہو گیا" والا پیغام ظاہر ہوتا ہے، فارم reset ہو جاتا ہے، اور چند سیکنڈ بعد success card آہستہ سے غائب ہو جاتا ہے۔​

یہ پورا flow حقیقی دنیا کے contact/feedback فارم کی بنیادی منطق کو simulate کرتا ہے، صرف فرق یہ ہے کہ یہاں ڈیٹا سرور پر نہیں جا رہا بلکہ فرنٹ اینڈ پر demo کی حد تک handle ہو رہا ہے۔​

---

5. Week #2 اسائنمنٹ / Homework

ہر طالب علم کے لیے Week #2 کی کامیاب تکمیل کے لیے درج ذیل کام لازمی ہیں:

1. CodePen Fork کریں

   • اوپر والا لنک کھولیں، Fork پر کلک کر کے فارم اپنی پروفائل میں save کریں۔​

2. اپنی معلومات شامل کریں

   • فارم کے header / intro میں اپنا نام یا batch کا ذکر کریں (مثلاً “ITDCFeD – Batch 1 – Week #2”).​

3. فارم فیلڈ customization

   • topic dropdown میں کم از کم 2–3 مزید options add کریں، مثلاً "Bug Report"، "General Query" وغیرہ۔​

   • message textarea کے placeholder کو اپنی wording کے ساتھ تبدیل کریں۔​

4. Visual customization (CSS)

   • background gradient کے رنگ اپنی پسند کے مطابق بدلیں۔​

   • Submit بٹن کے رنگ اور hover effect میں تھوڑی تبدیلی کریں تاکہ design مختلف نظر آئے۔​

   • Error text کا فونٹ سائز یا style حسبِ پسند adjust کریں (لیکن readable رہے)۔​

5. Validation میں کم از کم ایک اضافہ
   ان میں سے کوئی ایک اضافہ ضرور کریں:

   • Message کی minimum length چیک کریں (مثلاً کم از کم 10 characters)، کم ہو تو error دیں۔​

   • Topic نہ منتخب ہونے کی صورت میں user کو friendly warning دیں (اختیاری requirement کو required بھی بنا سکتے ہیں)۔​

6. اپنا کام شیئر کریں

   • تیار شدہ فارم کا CodePen لنک ITDarasgah فورم کے ITDCFeD – Week #2 تھریڈ میں reply کے طور پر پوسٹ کریں۔​

   • اگر ممکن ہو تو فارم کا ایک screenshot بھی attach کریں۔​

یہ اسائنمنٹ بھی ITDCFeD سرٹیفیکیشن کی overall completion میں شمار ہو گی، اس لیے اسے سنجیدگی سے، اچھی presentation کے ساتھ مکمل کریں۔​

---

6. شیڈول اور آگے کا نقشہ

• Week #2 لیکچر / پروجیکٹ پوسٹ کی تاریخ: منگل، 23 دسمبر (پروجیکٹ: Interactive Feedback Form)

• Week #3 میں اگلے فرنٹ اینڈ پروجیکٹ میں مزید interactivity یا چھوٹا سا mini‑app شامل کیا جائے گا، جس کا اعلان فورم میں علیحدہ تھریڈ کے ذریعے ہو گا۔​

Week #1 اور Week #2 مل کر آپ کو ایک basic portfolio page + contact form دے دیں گے، جو کسی بھی ویب سائٹ / CV کی بنیاد بن سکتا ہے۔​

---

7. اختتامی پیغام / Call to Action

اگر آپ نے ابھی تک Week #1 مکمل نہیں کیا تو دونوں Weeks متوازی بھی کر سکتے ہیں، لیکن Week #2 کے فارمز اور validation کو اچھی طرح سمجھنا آنے والے تمام projects (login forms، signup pages، search filters وغیرہ) کے لیے بہت اہم ہوگا۔​
ابھی CodePen لنک کھولیں، فارم کو آزمائیں، اپنی customization کے ساتھ Fork کریں اور ITDarasgah فورم پر اپنا لنک شیئر کر کے ITDCFeD کے اس تعلیمی سفر میں اگلا قدم اٹھائیں۔​

✧༺♥༻∞  آئی ٹی درسگاہ : جہاں ٹیکنالوجی اُردو بولتی ہے ˚*∞༺♥༻✧