Manipulating the DOM
The Big Idea
You've practised DOM manipulation in the browser console — now you'll do it from your code editor. These two challenges ask you to use querySelector, event listeners, and innerHTML to build real interactive behaviour on a page.
Your Roadmap
| Section | Time | Required? |
|---|---|---|
| Coloured Dots in the DOM | 3 hours | ⚑ Required |
| Game Board in the DOM | 3 hours | ⚑ Required |
| Check your understanding with a chatbot | 15 min | ⚑ Required |
Use the DOM primer to refresh your memory when you get stuck.
Coloured Dots in the DOM
Step 1: Clone the repo
Go to your cohort's repo: DOM-applying-classes — select your cohort in the top-right corner of this page to see the link. On the repo page, click the green Code button and copy the SSH URL.
Clone it to your machine and navigate into it:
git clone <paste the SSH URL you copied>cd DOM-applying-classes
Step 2: Create your branch
Use your full name in lowercase with a hyphen:
git checkout -b your-branch-name
Step 3: Open it in your code editor
Open the folder. Read the README.md — it contains the instructions for this challenge.
Step 4: Work through the challenge
Commit your progress regularly as you go:
git add -Agit commit -m "describe what you just did"
Step 5: Push when done
git push origin your-branch-name
Game Board in the DOM
Step 1: Clone the repo
Go to your cohort's repo: DOM-interactions — select your cohort in the top-right corner of this page to see the link. On the repo page, click the green Code button and copy the SSH URL.
Clone it to your machine and navigate into it:
git clone <paste the SSH URL you copied>cd DOM-interactions
Step 2: Create your branch
Use your full name in lowercase with a hyphen:
git checkout -b your-branch-name
Step 3: Open it in your code editor
Open the folder and read the README.md for the challenge instructions.
Step 4: Work through the challenge
Commit regularly as you go.
Step 5: Push when done
git push origin your-branch-name
Check your understanding with a chatbot
When you hit an error, work through these steps:
Step 1 — Paste your stack trace:
"Here's my stack trace: [paste trace]. Walk me through reading this step by step and identifying the likely problem area. Don't fix it for me yet."
Step 2 — Answer its questions in your own words. What do you think the error means? Where do you think it's coming from? It's fine to say "I'm not sure."
Step 3 — Ask it to fill the gaps:
"Based on what I said, what's the one thing I'm most unclear on about reading this error? Explain just that."
Step 4 — Fix it yourself. Use what you learned to go back and fix the code. Only ask for the fix as a last resort.
How to know you've nailed it
| Level | You can... | ||
|---|---|---|---|
| 🪨 | Intro Climb | Clone, branch, and open both repos; run the code and see it working in the browser | ⚑ Required |
| 🧗 | Core Ascent | Complete both challenges — DOM changes appear correctly when expected | ⚑ Required |
| 🏔️ | Summit | Explain each line of your solution and what it does | ◎ Optional |
The Big Idea (revisited)
Working from a code editor instead of the console is the same skill — querySelector, event listeners, innerHTML — applied in a real project structure. If you get stuck, go back to the primer and try the relevant example in isolation first.