Code Autopsy (කෝඩ් එකක් කෑලි ගලවලා බලමු)

දොස්තර කෙනෙක් body එකක් examine කරනවා වගේ, අපි code එකක් systematically examine කරමු.

Autopsy Method එක

5-Step Process එක

Overview — මේ code එකෙන් මොකද වෙන්නේ?
HTML Analysis — Structure එක මොකද?
CSS Analysis — Style කරලා තියෙන්නේ කොහොමද?
JavaScript Analysis — Behavior එක මොකද?
Connection Map — මේවා interact වෙන්නේ කොහොමද?

Sample එක: Counter App

මෙන්න complete, working counter app එකක්. Dissect කරමු!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Counter App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .counter-container {
            text-align: center;
            padding: 40px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        #count {
            font-size: 48px;
            margin: 20px 0;
        }
        button {
            font-size: 24px;
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background: #4A90D9;
            color: white;
        }
        button:hover {
            background: #357ABD;
        }
    </style>
</head>
<body>
    <div class="counter-container">
        <h1>Counter</h1>
        <div id="count">0</div>
        <button onclick="decrement()">-</button>
        <button onclick="increment()">+</button>
    </div>
 
    <script>
        let count = 0;
        
        function updateDisplay() {
            document.getElementById('count').textContent = count;
        }
        
        function increment() {
            count++;
            updateDisplay();
        }
        
        function decrement() {
            count--;
            updateDisplay();
        }
    </script>
</body>
</html>

Part 1: Overview Analysis

මේ code එකෙන් මොකද කරන්නේ?

Simple counter app එකක්:

Current count එක display කරනවා
Increase සහ decrease කරන්න buttons දෙකක්
Count එක 0 ඉඳන් start වෙනවා

File structure:

Single HTML file
CSS <style> tag එකේ embed කරලා
JavaScript <script> tag එකේ embed කරලා

Part 2: HTML Analysis

HTML

<div class="counter-container">      <!-- ලොකු පෙට්ටිය -->
    <h1>Counter</h1>                 <!-- Title එක -->
    <div id="count">0</div>          <!-- Number display (JS ට ID) -->
    <button onclick="decrement()">-</button>   <!-- Minus button -->
    <button onclick="increment()">+</button>   <!-- Plus button -->
</div>

Element

Purpose එක

div.counter-container

All content එකේ wrapper

"Counter" title එක

div#count

Number display කරනවා

button (×2)

Minus සහ plus buttons

Part 3: CSS Analysis

Body Styling

CSS

body {
    font-family: Arial, sans-serif;   /* All text ට font */
    display: flex;                     /* Flexbox enable */
    justify-content: center;          /* Horizontally center */
    align-items: center;              /* Vertically center */
    height: 100vh;                    /* Full viewport height */
    margin: 0;                        /* Default margin remove */
    background-color: #f0f0f0;        /* Light gray background */
}

Effect එක: Content හැම දෙයක්ම horizontally සහ vertically center වෙනවා light gray background එක උඩ.

Container Styling

CSS

.counter-container {
    text-align: center;               /* Text center */
    padding: 40px;                    /* Inside space */
    background: white;                /* White background */
    border-radius: 10px;              /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* Subtle shadow */
}

Effect එක: White card එකක් rounded corners සහ soft shadow එක්ක.

Button Styling

CSS

button {
    font-size: 24px;                  /* Large text */
    padding: 10px 20px;               /* Button ඇතුලේ space */
    cursor: pointer;                  /* Hover එකේ hand cursor */
    border: none;                     /* Default border remove */
    background: #4A90D9;              /* Blue background */
    color: white;                     /* White text */
}
 
button:hover {
    background: #357ABD;              /* Hover එකේදී darker blue */
}

Part 4: JavaScript Analysis

Variable එක

JavaScript

let count = 0;

Purpose එක: Current count value store කරනවා. Change වෙන නිසා let use කරනවා.

Functions

JavaScript

function updateDisplay() {
    document.getElementById('count').textContent = count;
}

කරන දේ:

id="count" තියෙන element එක find කරනවා
ඒකේ text content එක current count value එකට set කරනවා

JavaScript

function increment() {
    count++;         // count ට 1 add කරනවා
    updateDisplay(); // New value show කරනවා
}
 
function decrement() {
    count--;         // count ඉඳන් 1 subtract කරනවා
    updateDisplay(); // New value show කරනවා
}

Part 5: Connection Map

Text

┌─────────────────────────────────────────────────────────────────┐
│                            HTML                                  │
│  Define කරනවා: structure, IDs, onclick attributes               │
├─────────────────────────────────────────────────────────────────┤
         ↓ class="counter-container"    ↓ id="count"    ↓ onclick
┌─────────────────────────────────────────────────────────────────┐
│                            CSS                                   │
│  Target කරනවා: .counter-container, #count, button               │
│  Style කරනවා: layout, colors, spacing, hover effects            │
└─────────────────────────────────────────────────────────────────┘
                                                    
         ↓ onclick triggers functions    ↓ id="count" find කරනවා
┌─────────────────────────────────────────────────────────────────┐
│                         JavaScript                               │
│  Respond කරනවා: button clicks (onclick)                         │
│  Modify කරනවා: #count element ගේ textContent                    │
│  Store කරනවා: count variable                                    │
└─────────────────────────────────────────────────────────────────┘

User "+" Click කළාම Flow එක

User + button click කරනවා
HTML එකේ onclick="increment()" trigger වෙනවා
JavaScript එකේ increment() function run වෙනවා
count variable 1 කින් increase වෙනවා
updateDisplay() call වෙනවා
JavaScript #count element find කරනවා
Element එකේ text new count value එකට change වෙනවා
User updated number එක දකිනවා

Code Autopsy Checklist

✅ Autopsy Complete

0/5

Lesson Summary

Autopsy Process එක

Overview — Big picture understand කරන්න
HTML — Structure map කරන්න
CSS — Styling understand කරන්න
JavaScript — Behavior trace කරන්න
Connections — Interact වෙන හැටි බලන්න

Key Insight

Code understanding කියන්නේ parts වලට break කරලා, each part එකේ role එක understand කරන එක.

Next Up

Lesson 2.7: Modify with Understanding
Counter app එකට changes කරලා ඔයාගේ knowledge apply කරන්න!