The Spaghetti Problem

What happens when everything is tangled together?

Live Demo

Watch: I'll try to add a feature to our messy quiz code...

What Went Wrong?

• Changing one thing broke something else
• Hard to find where the problem is
• Everything depends on everything

Separation of Concerns

Each part of your code should have one job.

The LEGO Analogy

• Each LEGO brick does one thing
• You can swap a brick without rebuilding everything
• You can find the brick you need quickly
• Your code should work the same way

Our 4 Concerns

• Data — the questions and answers
• Display — the HTML structure
• Logic — scoring and answer checking
• Styling — colors, fonts, and layout

Color-Code Your Code

Let's find the 4 concerns in our quiz app.

Which Lines Are Which?

• Blue = Data (questions, answers)
• Green = Display (HTML, DOM updates)
• Orange = Logic (scoring, checking)
• Pink = Styling (CSS, visual changes)

Mark each line in your code with a color.

Break

Stretch, grab water, and come back ready to refactor.

Think About...

If you could only change one part of your quiz, what would it be?

Refactor Round 1

Extract the question data.

The Prompt

"Move the questions array into a separate file called questions.js. Don't change anything else."

The Process

1. Ask AI to make one change
2. Run the code
3. Test with Playwright: does it still work?
4. If yes: move on. If no: fix only the broken connection.

Refactor Round 2

Separate logic and styling.

Step 1: Extract Logic

"Extract the score tracking and answer checking into their own functions. Don't change the questions or the HTML."

Test with Playwright after.

Step 2: Extract CSS

"Move all the CSS from the style tag into a separate styles.css file. Don't change any functionality."

Test with Playwright after.

The Contrast

What happens if you ask AI to "refactor everything at once"?

One at a Time vs. All at Once

• One at a time: you know what changed and can test it
• All at once: if something breaks, where do you even look?

Our New File Structure

quiz-app/
  index.html      ← display
  styles.css      ← styling
  questions.js    ← data
  script.js       ← logic
					

Each file has one job.

Wrap-Up

What We Learned

• Separation of concerns = each part has one job
• Change one thing, test one thing
• Refactoring changes structure, not behavior
• Playwright verifies nothing broke

Coming Up Next

Save Points

Now that your code is organized, we'll learn to save our progress before experimenting — so we can always go back.