[ITDCFeD] – لیکچر #3 | سادہ ٹو‑ڈو/ ٹاسک لسٹ مِنی ایپ (ایچ ٹی ایم ایل + سی ایس ایس+ جاوا اسکرپٹ)

 

1. تعارف

آئی ٹی درسگاہ سرٹیفائیڈ فرنٹ اینڈ ڈویلپر (ITDCFeD) پروگرام کے تیسرے ہفتے میں خوش آمدید۔ اس لیکچر میں ایک Interactive To‑Do / Task List App تیار کیا جائے گا، جو فرنٹ اینڈ ڈویلپر کے لیے ایک classic mini‑project سمجھا جاتا ہے۔​
پہلے دو ہفتوں میں آپ نے Personal Web Page اور Interactive Form بنایا، اب Week #3 میں JavaScript logic، DOM manipulation اور state management کے ذریعے چھوٹا سا day planner / task manager بنائیں گے۔​

---

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

اس Week #3 پروجیکٹ کے اختتام تک آپ:

• HTML کے ذریعے ایک منظم layout کے ساتھ To‑Do App کا بنیادی ڈھانچہ بنا سکیں گے (input، بٹن، list وغیرہ)۔​

• CSS کے ذریعے modern glass‑effect card، badges، counters اور responsive design کے ساتھ ایک خوبصورت UI تیار کریں گے۔​

• JavaScript کے ذریعے:

  • نئی tasks add کرنا

  • کسی task کو completed / active مارک کرنا

  • task delete کرنا

  • اور active / completed / all فلٹرز کے ذریعے لسٹ کو کنٹرول کرنا سیکھیں گے۔​

• Array based state (tasks array) اور DOM rendering کے سادہ مگر practical concept کو سمجھیں گے، جو آگے چل کر بڑے apps کے لیے بنیاد بنے گا۔​

---

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

Week #3 کا مکمل working demo اور سورس کوڈ یہاں دستیاب ہے:

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

استعمال کا طریقہ:

• لنک کھولیں اور اوپر والے output میں To‑Do App دیکھیں۔ کوئی بھی کام لکھ کر Enter دبائیں یا “شامل کریں” بٹن پر کلک کریں، task لسٹ میں شامل ہو جائے گا۔​

• Checkbox پر کلک کر کے task کو مکمل / غیر مکمل کریں، اور دائیں طرف موجود “✕” بٹن سے اسے delete کریں۔​

• اوپر فلٹر buttons (“سب”، “زیرِ التواء”، “مکمل”) سے لسٹ کو فلٹر کر کے دیکھیں۔​

• CodePen میں Fork کر کے اپنا ورژن بنائیں اور آگے دی گئی اسائنمنٹ کے مطابق customize کریں۔​

---

4. پروجیکٹ کی ساخت – Step‑by‑Step خلاصہ

4.1 HTML – بنیادی ڈھانچہ

HTML میں:

• ایک header ہے جس میں ITDCFeD – Week #3 کا عنوان اور چھوٹی سی وضاحت لکھی ہے۔​

• todo-input-card کے اندر:

  • ایک text input (#taskInput) جہاں نیا کام لکھا جاتا ہے۔

  • ایک “شامل کریں” بٹن (#addTaskBtn) جو نیا task add کرتا ہے۔

  • نیچے ایک small.error element (#inputError) جو غلطی کا پیغام دکھاتا ہے (مثلاً خالی input وغیرہ)۔​

• todo-controls میں counters اور filters ہیں:

  • “کل کام” اور “مکمل” کے لیے span (#totalCount, #completedCount)۔

  • تین filter buttons: all, active, completed۔​

• todo-list-card کے اندر:

  • ایک خالی <ul id="taskList"> جہاں JS کے ذریعے tasks بن کر آئیں گے۔

  • ایک #emptyMessage جو اس وقت نظر آتا ہے جب کوئی task موجود نہ ہو۔​

4.2 CSS – modern UI اور responsiveness

CSS میں:

• Background کے لیے dark + gradient effect، card‑style container اور glassmorphism touch دیا گیا ہے، جو app کو modern feel دیتا ہے۔​

• Input field کے لیے focus پر نیلا glow، readable placeholder، اور rounded corners ہیں۔​

• Buttons (.btn.primary) کے لیے gradient، shadow اور hover animation شامل ہے تاکہ UI lively لگے۔​

• ہر task ایک row (.task-item) کی صورت میں ہے جس میں:

  • checkbox

  • text

  • status badge (“مکمل” / “زیرِ التواء”)

  • delete button شامل ہے۔​

• .task-item.completed پر text کو line‑through اور faded color میں دکھا کر completed status واضح کیا گیا ہے۔​

4.3 JavaScript – منطق اور DOM اپ ڈیٹ

JavaScript میں core logic یوں کام کرتا ہے:

• tasks نامی array میں ہر task ایک object کی صورت میں رکھا جاتا ہے: { id, text, completed }۔​

• addTask() function:

  • input سے text لیتا ہے، trim کر کے چیک کرتا ہے کہ خالی تو نہیں اور کم از کم 3 حروف ہوں۔

  • نیا object بنا کر tasks array کے شروع میں add کرتا ہے، input صاف کرتا ہے اور renderTasks() چلا دیتا ہے۔​

• renderTasks() function:

  • موجودہ filter (all / active / completed) کے مطابق visibleTasks بناتا ہے۔

  • taskList.innerHTML صاف کر کے ہر visible task کے لیے نیا <li> بناتا ہے، checkbox، text، badge اور delete button کے ساتھ۔

  • completed ہونے کی صورت میں CSS class completed لگا دیتا ہے۔

  • آخر میں updateCounts() کے ذریعے اوپر total اور completed counts اپ ڈیٹ ہوتے ہیں، اور اگر کوئی task نہ ہو تو empty message ظاہر ہوتا ہے۔​

• toggleComplete(id) مخصوص task کی completed value پلٹ دیتا ہے اور دوبارہ render کرتا ہے۔​

• deleteTask(id) مخصوص task کو array سے نکال دیتا ہے اور UI ری‑render کر دیتا ہے۔​

• Filter buttons پر click کے ساتھ currentFilter بدلتا ہے اور renderTasks() دوبارہ call ہوتا ہے، یوں صرف selected قسم کے tasks دکھائی دیتے ہیں۔​

یہ تمام logic pure JavaScript اور DOM API استعمال کر کے لکھا گیا ہے، تاکہ beginners کو کسی framework کے بغیر core concepts سمجھ میں آئیں۔​

---

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

Week #3 کامیابی سے مکمل کرنے کے لیے ہر طالب علم کو یہ کام کرنے ہیں:

1. CodePen Fork کریں

   • لنک: https://codepen.io/mmshahid73/pen/raeEeVy کو کھولیں اور Fork پر کلک کریں۔​

2. Tasks کو اپنی study / life کے مطابق بنائیں

   • کم از کم 5–7 tasks add کر کے app کو استعمال کریں (مثلاً: “Week 1 revise کرنا”، “Week 2 فارم مکمل کرنا”، “JS ویڈیو لیکچر دیکھنا” وغیرہ)۔​

3. Visual customization (CSS)

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

   • Buttons کے رنگ یا shape میں معمولی فرق ڈالیں (مثلاً صرف نیلا شیڈ یا مختلف hover effect)۔​

   • Completed tasks کے color / style کو اپنی پسند کے مطابق تھوڑا سا بدلیں (لیکن readability برقرار رہے)۔​

4. JavaScript میں کم از کم ایک فیچر اضافہ
   درج ذیل میں سے کوئی ایک (یا زیادہ) اضافہ کریں:

   • Input خالی ہو تو error کے ساتھ ساتھ input box کو سرخ border دینا اور صحیح text آنے پر دوبارہ نارمل کر دینا۔​

   • “تمام مکمل task delete کریں” کے لیے ایک اضافی بٹن add کریں، جو صرف completed tasks کو ہٹا دے۔​

   • کسی task پر double‑click کرنے سے اسے edit mode میں لے جانا، text تبدیل کرنے کی سہولت دینا (چیلنج لیول، optional)۔​

5. اپنا CodePen لنک شیئر کریں

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

   • اگر ممکن ہو تو To‑Do App کا ایک screenshot بھی attach کریں، خاص طور پر اس وقت جب کچھ tasks completed اور کچھ pending ہوں۔​

یہ homework بھی ITDCFeD سرٹیفیکیشن کی progress میں شامل ہو گا، اس لیے کوشش کریں کہ app visually بھی اچھا لگے اور code کی حد تک ایک صاف، سمجھ آنے والی customization ہو۔​

---

6. شیڈول اور اگلا مرحلہ

• Week #3 کا یہ To‑Do App آپ کے JavaScript confidence کو بڑھانے کے لیے بنایا گیا ہے۔​

• اگلے Weeks میں انہی concepts کی بنیاد پر مزید interactive mini‑apps، چھوٹے dashboards یا APIs کے ساتھ Basic Integration متعارف کروایا جا سکتا ہے، جس کی تفصیل الگ اعلان میں شیئر کی جائے گی۔​

---

7. اختتامی پیغام

اگر آپ نے Week #1 اور Week #2 کے پروجیکٹس مکمل کر لیے ہیں تو اب Week #3 آپ کے لیے ایک مضبوط step‑up ہے، جس میں logic، arrays اور DOM کے ساتھ کھیلنے کا موقع ملے گا۔​
اپنا To‑Do App فورک کریں، customize کریں، اور ITDarasgah فورم پر شیئر کر کے ITDCFeD کے اس سیکھنے کے سفر میں اگلا عملی milestone مکمل کریں۔​

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