Course එකට ආපසු

තේරුම් අරගෙන වෙනස් කරමු

30 මිනිත්තු🛠️Project

Modify with Understanding (තේරුම් අරගෙන වෙනස් කරමු)

Counter app එකේ anatomy understand කළ නිසා, intelligently modify කරන්න පුළුවන්:

  • කොතනද changes කරන්නේ කියලා දන්නවා
  • ඇයි changes work කරන්නේ කියලා දන්නවා
  • Manual edits එක්ක AI assistance combine කරන්න පුළුවන්

Setup

Step 1: File එක Create කරමු

  1. VS Code open කරන්න
  2. vibe-coding-course folder එකට යන්න
  3. New file create කරන්න: counter.html
  4. Lesson 2.6 එකේ counter code එක copy කරන්න
  5. Save කරලා Live Server එකෙන් open කරන්න

Step 2: Work කරනවද බලන්න

    • button click කළාම count increase වෙනවා
    • button click කළාම count decrease වෙනවා
  • Buttons hover එකට respond කරනවා

Challenge 1: Style Changes (Manual)

AI help නැතුව manually modifications කරන්න:

1.1: Background Color Change කරමු

Task: Body background light gray එකෙන් light blue එකට change කරන්න.

1.2: Count Color Change කරමු

Task: Count number එක dark blue කරන්න.

1.3: Buttons තව Round කරමු

Task: Buttons pill-shaped වෙන්න තව rounded කරන්න.

Challenge 2: Logic Changes (Manual)

2.1: Starting Value Change කරමු

Task: Counter 0 වෙනුවට 10 ඉඳන් start වෙන්න හදන්න.

2.2: Increment Amount Change කරමු

Task: + button එකෙන් 1 වෙනුවට 5 add වෙන්න හදන්න.

2.3: Reset Button එකක් Add කරමු

Task: Count 0 ට reset කරන "Reset" button එකක් add කරන්න.

Challenge 3: Feature Addition (AI-Assisted)

මේ challenges වලට AI use කරලා code write කරන්න.

3.1: Maximum Limit

Task: 100 ක maximum limit එකක් add කරන්න. 100 ට reach වුනාම "MAX!" display කරන්න.

Try this prompt
In my counter app, modify the increment function to: 1. Check if count is already 100 2. If so, don't increase further 3. Display "MAX!" in the count display when at 100 4. Return to normal number display when decremented
ChatGPTClaude

3.2: Value අනුව Color

Task: Count එක color change වෙන්න හදන්න:

  • Negative: Red
  • Zero: Black
  • Positive: Green
Try this prompt
Modify the updateDisplay function in my counter to: - Show red color (#dc3545) when count is negative - Show black color when count is 0 - Show green color (#28a745) when count is positive
ChatGPTClaude

3.3: Keyboard Support

Task: Keyboard control allow කරන්න:

  • Up arrow හෝ +: Increment
  • Down arrow හෝ -: Decrement
  • R key: Reset
Try this prompt
Add keyboard event listeners to my counter app: - ArrowUp or "+" should increment - ArrowDown or "-" should decrement - "r" should reset to 0
ChatGPTClaude

Modification Checklist

✅ ඔයාගේ Progress Track කරන්න

0/9

Reflection: මොනවද ඉගෙන ගත්තේ?

Understand කරන්න කලින්
Understand කරපු පස්සේ
"කොහෙන් හරි මොකක් හරි change කරන්න ඕනේ"
"#count එකේ color property එක change කරන්න ඕනේ"
"AI ට feature එකක් add කරන්න කියනවා"
"New function එකක් සහ event listener එකක් ඕනේ"
"Work කරයි කියලා hope කරනවා"
"මේකෙන් මොකද වෙන්නේ කියලා exactly දන්නවා"

Code Literacy එකේ Power එක

දැන් ඔයාට පුළුවන්:

  • Code read කරලා understand කරන්න
  • කොතනද changes කරන්නේ කියලා දැනගන්න
  • Manual edits එක්ක AI help combine කරන්න
  • Something work නොකළොත් debug කරන්න

Bonus Challenge

Same code structure එක keep කරගෙන counter එක different app එකකට transform කරන්න.

Ideas:

  • Score Keeper: Teams දෙකක scores track කරන්න
  • Temperature Converter: Celsius සහ Fahrenheit display කරන්න
  • Tip Calculator: Amount enter කරලා tip calculate කරන්න
  • Timer Display: Every second count up වෙන්න
📝

Reflection Journal

Saved privately on your device
0 total characters

Module 2 Complete!

Master කළ Skills

✅ Module 2 Skills

0/6

Transformation එක

ඔයා "magic code" බලන එකෙන් "every line understand කරන" එකට ආවා.

Next Module

Module 3: Version Control
Git සහ GitHub එක්ක code safely save කරන්න ඉගෙන ගමු — professional safety net එක!