Code Autopsy

Like a medical autopsy examines a body to understand it, a code autopsy examines code systematically.

The Autopsy Method

The 5-Step Process

Overview — What does this code do?
HTML Analysis — What structure exists?
CSS Analysis — How is it styled?
JavaScript Analysis — What behavior is added?
Connection Map — How do they interact?

The Sample: Counter App

Here's a complete, working counter app. Let's dissect it!

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

What does this code do?

A simple counter app with:

A display showing the current count
Two buttons to increase and decrease the count
The count starts at 0

File structure:

Single HTML file
CSS embedded in <style> tag
JavaScript embedded in <script> tag

Part 2: HTML Analysis

HTML

<div class="counter-container">      <!-- Container for the whole thing -->
    <h1>Counter</h1>                 <!-- Title -->
    <div id="count">0</div>          <!-- Display (has ID for JS) -->
    <button onclick="decrement()">-</button>   <!-- Minus button -->
    <button onclick="increment()">+</button>   <!-- Plus button -->
</div>

Element

Purpose

div.counter-container

Wrapper for all content

Title "Counter"

div#count

Displays the number

button (×2)

Minus and plus buttons

Part 3: CSS Analysis

Body Styling

CSS

body {
    font-family: Arial, sans-serif;   /* Font for all text */
    display: flex;                     /* Enable flexbox */
    justify-content: center;          /* Center horizontally */
    align-items: center;              /* Center vertically */
    height: 100vh;                    /* Full viewport height */
    margin: 0;                        /* Remove default margin */
    background-color: #f0f0f0;        /* Light gray background */
}

Effect: The entire content is centered both horizontally and vertically on a light gray background.

Container Styling

CSS

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

Effect: A white card with rounded corners and a soft shadow.

Button Styling

CSS

button {
    font-size: 24px;                  /* Large text */
    padding: 10px 20px;               /* Space inside button */
    cursor: pointer;                  /* Hand cursor on hover */
    border: none;                     /* Remove default border */
    background: #4A90D9;              /* Blue background */
    color: white;                     /* White text */
}
 
button:hover {
    background: #357ABD;              /* Darker blue on hover */
}

Part 4: JavaScript Analysis

The Variable

JavaScript

let count = 0;

Purpose: Stores the current count value. Uses let because it will change.

The Functions

JavaScript

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

What it does:

Finds the element with id="count"
Sets its text content to the current count value

JavaScript

function increment() {
    count++;         // Add 1 to count
    updateDisplay(); // Show new value
}
 
function decrement() {
    count--;         // Subtract 1 from count
    updateDisplay(); // Show new value
}

Part 5: Connection Map

Text

┌─────────────────────────────────────────────────────────────────┐
│                            HTML                                  │
│  Defines: structure, IDs, onclick attributes                    │
├─────────────────────────────────────────────────────────────────┤
         ↓ class="counter-container"    ↓ id="count"    ↓ onclick
┌─────────────────────────────────────────────────────────────────┐
│                            CSS                                   │
│  Targets: .counter-container, #count, button                    │
│  Styles: layout, colors, spacing, hover effects                 │
└─────────────────────────────────────────────────────────────────┘
                                                    
         ↓ onclick triggers functions    ↓ id="count" found
┌─────────────────────────────────────────────────────────────────┐
│                         JavaScript                               │
│  Responds to: button clicks (onclick)                           │
│  Modifies: #count element's textContent                         │
│  Stores: count variable                                         │
└─────────────────────────────────────────────────────────────────┘

The Flow When User Clicks "+"

User clicks + button
HTML's onclick="increment()" triggers
JavaScript's increment() function runs
count variable increases by 1
updateDisplay() is called
JavaScript finds #count element
Element's text changes to new count value
User sees updated number

Code Autopsy Checklist

✅ Autopsy Complete

0/5

Lesson Summary

The Autopsy Process

Overview — Understand the big picture
HTML — Map the structure
CSS — Understand the styling
JavaScript — Trace the behavior
Connections — See how they interact

Key Insight

Understanding code is about breaking it into parts and understanding each part's role.

Next Up

Lesson 2.7: Modify with Understanding
Apply your knowledge by making changes to the counter app!