ITDCFeD – Week #4 | Responsive Pricing Cards + Theme & Billing Toggle (HTML + CSS + JavaScript)

, , , , , , ,


 ITDCFeD – Week #4 | Responsive Pricing Cards + Theme & Billing Toggle (HTML + CSS + JavaScript)

1. تعارف

Week #4 میں آپ ایک Responsive Pricing Section بنائیں گے جیسا کہ کسی بھی پروفیشنل ویب سائٹ (SaaS، Hosting، Courses وغیرہ) پر ہوتا ہے۔ اس میں تین پلان (Basic, Standard, Pro)، ماہانہ / سالانہ بلنگ کا toggle اور Light/Dark theme سوئچر شامل ہوں گے، جو فرنٹ اینڈ ڈویلپر کے لیے بہت اہم practical skills ہیں۔​

یہ پروجیکٹ آپ کے پہلے تین Weeks (Personal Page, Form, To‑Do App) پر مزید design sense اور UI/UX thinking کا layer add کرے گا، اور portfolio کے لیے بھی بہت خوبصورت block ثابت ہو سکتا ہے۔​

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

Week #4 کے اختتام تک آپ:

  • HTML کے ذریعے cards based layout (ہر plan کے لیے الگ card) بنانا سیکھیں گے، جس میں plan name, price, features اور button شامل ہوں۔​

  • CSS Grid، card styling، hover effects، badges (“سب سے مقبول”) اور responsive breakpoints کے ذریعے modern pricing section تیار کریں گے۔​

  • JavaScript سے:

    • Billing Toggle (ماہانہ ↔ سالانہ) کے ذریعے price values change کرنا

    • Text / مہینہ کو / سال میں تبدیل کرنا

    • Theme Toggle (Light / Dark mode) کے ذریعے پوری section کے colors بدلنا سیکھیں گے۔​

  • Data attributes (data-monthly, data-yearly) اور class toggling کے استعمال کو سمجھیں گے، جو آگے جا کر بڑے components اور frameworks میں بہت کام آتے ہیں۔​

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

اس پروجیکٹ کا مکمل working demo یہاں موجود ہے:

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

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

  • لنک کھول کر output میں تین pricing cards دیکھیں؛ Monthly / Yearly سوئچ کو on/off کریں اور دیکھیں کہ قیمتیں اور / مہینہ / / سال کا text کیسے بدلتا ہے۔​

  • Theme button (🌙 / ☀️) پر کلک کر کے Light اور Dark دونوں Themes test کریں۔​

  • CodePen میں Fork کر کے HTML, CSS، JS تینوں حصوں کو اپنے طور پر customize کریں (اسائنمنٹ میں detail دی جائے گی)۔​

4. پروجیکٹ کی ساخت – مختصر وضاحت

4.1 HTML – Pricing Cards Layout

HTML میں:

  • اوپر header جس میں ITDCFeD – Week #4 اور چھوٹا subtitle موجود ہے۔​

  • controls سیکشن میں دو چیزیں:

    • Billing toggle: Monthly / Yearly labels + switch (<input type="checkbox" id="billingToggle">)

    • Theme toggle: ایک چھوٹا button (#themeBtn) جو icon بدل کر theme change کرتا ہے۔​

  • cards سیکشن میں تین <article class="card">:

    • Basic plan (Free / Demo style، ITDCFeD کے free concept کو reflect کرتا ہے)

    • Standard plan (ایک card پر popular کلاس اور اوپر “سب سے مقبول” badge)

    • Pro plan (Professional features کی مثال)۔​

  • ہر card میں: plan name، tagline، price block، feature list (<ul class="features">) اور ایک action button شامل ہے۔ price کے span.amount پر data-monthly اور data-yearly attributes رکھے گئے ہیں تاکہ JS انہیں پڑھ کر قیمت بدل سکے۔​

4.2 CSS – Cards، Grid اور Theme

CSS کی اہم پوائنٹس:

  • Root level پر .page.light اور .page.dark کے اندر CSS variables (--card-bg, --text-main, --accent وغیرہ) define کیے گئے ہیں، جنہیں theme change کے مطابق toggle کیا جاتا ہے۔​

  • .cards کے لیے display: grid اور grid-template-columns کے ذریعے تین columns layout، جبکہ media queries میں اسے 2 columns اور پھر 1 column میں تبدیل کیا گیا ہے تاکہ mobile پر بھی layout خوبصورت دکھے۔​

  • ہر .card کے لیے rounded corners، subtle shadow، border، hover پر transform: translateY(-4px) اور shadow increase، جبکہ .card.popular کے لیے تھوڑا stronger border اور slight uplift دیا گیا ہے۔​

  • Feature list میں custom tick icon ::before، buttons کے لیے gradient یا solid accent color، اور theme button کے لیے circular icon style رکھا گیا ہے۔​

4.3 JavaScript – Billing & Theme Toggle Logic

JavaScript میں بنیادی logic یہ ہے:

  • billingToggle پر change event لگایا گیا ہے، جو updateBillingMode() function کو call کرتا ہے۔​

  • updateBillingMode() تمام .amount elements کو loop کر کے:

    • اگر yearly mode ON ہو تو data-yearly والا value دکھاتا ہے، ورنہ data-monthly والا۔

    • .period spans میں / مہینہ کو / سال میں بدلتا ہے، اور Monthly / Yearly labels کی active class کو update کرتا ہے۔​

  • Theme کے لیے isDark boolean رکھا گیا ہے۔ applyTheme() function .page پر .dark اور .light classes toggle کرتا ہے اور button icon (🌙 یا ☀️) بدل دیتا ہے۔​

  • themeBtn کے click event میں isDark = !isDark کر کے applyTheme() دوبارہ run کروایا جاتا ہے، یوں theme live change ہوتی ہے۔​

یہ سارا code pure JavaScript اور CSS کو استعمال کرتا ہے، اس لیے beginners کو سمجھنے میں آسان اور future frameworks (React/Vue) کے concepts کی بنیاد بن سکتا ہے۔​

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

Week #4 کے homework کے لیے ہر طالب علم درج ذیل کام کرے:

  1. CodePen Fork کریں

    • Week #4 demo (yyJyRqr) کو کھولیں اور Fork پر کلک کر کے اپنی copy بنائیں۔​

  2. Plans کو customize کریں

    • Basic/Standard/Pro کے نام اپنی choice کے مطابق رکھیں (مثلاً Beginner / Student / Professional وغیرہ)۔

    • Feature list میں ہر plan کے لیے کم از کم 1–2 نئی lines add کریں جو حقیقی IT / learning scenario کو reflect کریں۔​

  3. Prices اور Billing logic adjust کریں

    • data-monthly اور data-yearly values کو اپنی hypothetical prices کے مطابق سیٹ کریں (یا educational demo کے مطابق رکھیں)۔​

    • Period text / مہینہ اور / سال کے بجائے اگر آپ کو مناسب لگے تو / month اور / year کا bilingual mix بھی آزما سکتے ہیں (اختیاری)۔​

  4. Theme personalization

    • Light اور Dark mode کے color variables (--card-bg, --accent وغیرہ) میں کم از کم دو تبدیلیاں کریں، لیکن readability برقرار رکھیں۔​

    • Theme button کے icon کو emoji یا چھوٹے SVG‑style text symbol کے ذریعے personalize کریں (مثلاً “L/D”).​

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

    • ITDarasgah فورم کے ITDCFeD – Week #4 تھریڈ میں اپنا CodePen لنک اور اگر ممکن ہو تو screenshot کے ساتھ post کریں۔​

    • مختصر سا بتائیں کہ آپ نے کن چیزوں کو customize کیا (colors, features, prices وغیرہ) تاکہ انسٹرکٹرز اور ساتھی طلبہ آپ کے کام کو بہتر سمجھ سکیں۔​

یہ homework بھی ITDCFeD سرٹیفیکیشن کی مجموعی progress میں شامل ہوگا، اور ساتھ ہی آپ کے portfolio میں "Pricing Section" جیسا professional component بھی add ہو جائے گا۔​

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

Week #4 کا یہ project آپ کو design sense، layout skills اور چھوٹی interactivity کے ملاپ کی مشق دیتا ہے، جو کسی بھی modern ویب سائٹ کے لیے بنیادی ضرورت ہے۔ Week #1–4 کے بعد آپ کے پاس personal page، contact form، to‑do app اور pricing section، یعنی پورے mini‑site کے اہم blocks تیار ہو چکے ہوں گے، جنہیں آگے چل کر ایک مکمل project میں جوڑا جا سکتا ہے۔


-
Tags: , , , , , , ,

کوئی تبصرے نہیں:

ایک تبصرہ شائع کریں

سبسکرائب کریں در: تبصرے شائع کریں (Atom)