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: Fork the repo
Go to the DOM-applying-classes repository on GitHub. Click Fork in the top right to create your own copy.
Step 2: Clone it to your computer
git clone git@github.com:YOUR-USERNAME/DOM-applying-classes.git
Replace YOUR-USERNAME with your GitHub username.
Step 3: Open it in your code editor
Open the cloned 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
Game Board in the DOM
Step 1: Fork the repo
Go to the DOM-interactions repository on GitHub. Click Fork to create your own copy.
Step 2: Clone it to your computer
git clone git@github.com:YOUR-USERNAME/DOM-interactions.git
Step 3: Open it in your code editor
Open the cloned 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
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 | Fork, clone, 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.