Time for the moves! Today you'll use JavaScript to make buttons that actually do things, and get better at fixing bugs.
About 45 minutes. You can stop and come back. Your answers are saved in this browser.
Last time your site grew to several pages. Quick warm-up!
JavaScript makes your page react. Most of it follows one pattern: "When something happens, do something." The "something happens" part is called an event, like a click.
JavaScript goes inside a <script> tag, usually at the bottom of the <body>. It finds parts of the page by their id, a unique name you give an element.
<button id="fact-btn">Surprise me!</button>
<p id="fact"></p>
<script>
const facts = ["Octopuses have three hearts.", "Honey never goes bad.", "Sloths can hold their breath for 40 minutes."];
document.getElementById("fact-btn").addEventListener("click", function () {
const pick = Math.floor(Math.random() * facts.length);
document.getElementById("fact").textContent = facts[pick];
});
</script>id, so the script can find them.const facts = [...] is a list (called an array) of facts. Each one is in quotes.addEventListener("click", ...) means "when the button is clicked, run the code inside."Math.random() picks a random number, so pick is a random position in the list..textContent = facts[pick] puts that fact into the paragraph.You'll finish a machine just like this in the playground!
<p>Which planet is closest to the Sun?</p>
<button id="show-btn">Show answer</button>
<p id="answer" hidden>Mercury!</p>
<script>
document.getElementById("show-btn").addEventListener("click", function () {
document.getElementById("answer").hidden = false;
});
</script>hidden hides the answer. When you click, hidden = false shows it. That's a mini quiz!
The AI can't see your screen, so it has to guess. Now a clear bug report:
A great bug report has three parts: what you expected, what actually happened and the code. Then test the fix to make sure it really works.
src="https://...")?prompt( or fetch()?Scripts are fussy! One missing quote or bracket, or one wrong capital letter, and nothing works. That's normal. Even professional coders spend lots of time hunting for tiny bugs.
Each script has one bug that stops it from working. Find the line with the bug!
The fact machine is almost done. Write the missing line where it says YOUR TURN, then add a fact of your own and click the button in the preview to test it!
The playground only runs inside this page. It can't open other websites or change anything on your computer. Your code is saved in this browser, on this device.
Time to use your own chatbot. Missions get harder as you go. Bronze is the one to do today. Silver and Gold are extra challenges for when you want more.
JavaScript makes things happen, so Code Check every script before you open the page. Test new gadgets with a grown-up nearby, and never run a script you don't understand.
Add a random fact (or joke) button to your site.
Add a 3-question quiz about your topic.
show-1, answer-1).Design a gadget of your own.
Your notes are saved right in this browser, on this device. They're never sent anywhere.
Add today's page to your Build Log.
Your Build Log is saved right in this browser, on this device. It's never sent anywhere.
id, and the ids must match exactly.addEventListener("click", ...) runs code when something is clicked.10 questions, picked at random from a bigger question bank. If you take it again, you'll probably see a different mix. Let's go!
Finish, test and show off your website.