One Thing at a Time Vocabulary

Word Bank

separation of concerns refactor data
display logic styling
extract module file structure
side effect    

Fill In the Blanks

  1. means each part of your code has one job.
  2. To means to reorganize code without changing what it does.
  3. The questions and answers in our quiz are the .
  4. The HTML structure and what the user sees is the .
  5. Scoring and answer checking are part of the .
  6. Colors, fonts, and layout are the .
  7. To means to pull code out into its own file or function.
  8. A is a self-contained piece of code that does one thing.
  9. How files and folders are organized is called the .
  10. A is when changing one part accidentally changes something else.

Quick Checks

  • Match each file to its concern:
File Concern
questions.js
styles.css
script.js
index.html
  • True or False:
    • Refactoring changes how the app works:
    • You should test after every change:
    • It’s fine to change 5 things at once:

Stretch: Spot the Concern

Read this code and label each line with its concern (data, display, logic, or styling):

var score = 0;                          // __________
scoreEl.textContent = "Score: " + score; // __________
if (answer === correct) { score++; }     // __________
scoreEl.style.color = "green";           // __________