Course එකට ආපසු

Modify with Understanding

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

Modify with Understanding

Now that you understand the counter app's anatomy, you can modify it intelligently:

  • Know WHERE to make changes
  • Know WHY changes work
  • Combine manual edits with AI assistance

Setup

Step 1: Create the File

  1. Open VS Code
  2. Open your vibe-coding-course folder
  3. Create new file: counter.html
  4. Copy the counter code from Lesson 2.6
  5. Save and open with Live Server

Step 2: Verify It Works

  • Click + button — count increases
  • Click - button — count decreases
  • Both buttons respond to hover

Challenge 1: Style Changes (Manual)

Make these modifications without AI help:

1.1: Change Background Color

Task: Change the body background from light gray to light blue.

1.2: Change Count Color

Task: Make the count number dark blue.

1.3: Round the Buttons More

Task: Make buttons more rounded (pill-shaped).

Challenge 2: Logic Changes (Manual)

2.1: Change Starting Value

Task: Make the counter start at 10 instead of 0.

2.2: Change Increment Amount

Task: Make the + button add 5 instead of 1.

2.3: Add a Reset Button

Task: Add a "Reset" button that sets count back to 0.

Challenge 3: Feature Addition (AI-Assisted)

For these challenges, use AI to help write the code.

3.1: Maximum Limit

Task: Add a maximum limit of 100. Display "MAX!" when reaching 100.

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: Color Based on Value

Task: Make the count change color:

  • 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: Allow keyboard control:

  • Up arrow or +: Increment
  • Down arrow or -: 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

✅ Track Your Progress

0/9

Reflection: What Did You Learn?

Before Understanding
After Understanding
"Change something somewhere"
"Change the #count color property"
"Ask AI to add a feature"
"I need a new function and event listener"
"Hope it works"
"I know exactly what this will do"

The Power of Code Literacy

You can now:

  • Read code and understand it
  • Know WHERE to make changes
  • Combine manual edits with AI help
  • Debug when things don't work

Bonus Challenge

Transform the counter into a different app while keeping the same code structure.

Ideas:

  • Score Keeper: Track two teams' scores
  • Temperature Converter: Display in Celsius and Fahrenheit
  • Tip Calculator: Enter amount, calculate tip
  • Timer Display: Count up every second
📝

Reflection Journal

Saved privately on your device
0 total characters

Module 2 Complete!

What You've Mastered

✅ Module 2 Skills

0/6

The Transformation

You've gone from "seeing magic code" to "understanding every line."

Next Module

Module 3: Version Control
Learn to save your code safely with Git and GitHub — the professional safety net!