Adventure 4

⚡ JavaScript Wizard

Make things happen with the magic of code!

About 20 minutes

🎯 What You'll Learn

What is JavaScript?

🖱️

Make buttons do things

🎮

Build interactive stuff!

1

What is JavaScript?

JavaScript is MAGIC for websites!

It makes things move, click, change, and come alive!

🏠 ➡️ 🏠💡

Think about it like this:

HTML = The house (structure)

CSS = The paint and decorations (style)

JavaScript = The electricity! (makes things WORK)

⚡ Watch JavaScript in Action!

Click these buttons to see JavaScript magic:

2

Let's Make a Click Counter!

One of the coolest things JavaScript can do is count and remember things!

🔢 Click Counter Challenge

How many times can you click the button in 10 seconds?

0

💻
Here's the code that makes it work:
let count = 0;

function incrementCounter() {
    count = count + 1;
    // Show the new count
}
3

Make a Personal Greeter!

JavaScript can read what you type and respond to it!

👋 Hello, Friend!

Type your name and click the button:

🔮
The magic behind it:
function greetUser() {
    let name = /* get from input */
    alert("Hello, " + name + "!");
}
4

⭐ Bonus: Math Quiz Game!

Let's play a game I built with JavaScript! Can you answer the math questions?

🧮 Quick Math!

Loading question...

Score: 0

🏆 Super Challenge!

Can you score 5 correct answers in a row?

💡 Games like this are made with JavaScript! You could make your own someday!

5

📦 Variable Adventure!

📦
Variables are like labeled boxes!

They store information that your program can use later.

📦 Create Your Own Variables!

Your JavaScript Code:

let myAge = 10;

The box contains:

10

Quick examples:

6

🎯 Event Detector Challenge!

JavaScript listens for events - things that happen on a webpage!

🎮 Trigger Different Events!

Perform the actions below to score points!

🖱️
Click Event
Click this box!
⬜ Not triggered
👆👆
Double Click
Double-click this!
⬜ Not triggered
🎯
Hover Event
Move your mouse here!
⬜ Not triggered
⌨️
Key Press
Press any key!
⬜ Not triggered
Events Triggered: 0 / 4
7

🔀 If/Else Decision Maker!

🤔
Computers can make decisions!

Using IF and ELSE, programs choose what to do based on conditions.

🎮 Build Your Own Decision!

let age = ;
if (age >= 13) {
🎮 "You can play teen games!"
} else if (age >= 7) {
🧩 "You can play kid games!"
} else {
👶 "You can play toddler games!"
}
🧩 "You can play kid games!"
8

⚡ Reaction Time Challenge!

This game tests your reaction speed - and it's built with JavaScript!

⚡ How Fast Are You?

Click the box when it turns GREEN!

Click to Start!
Best: --- ms
Attempts: 0

Adventure 4 Complete!

You've learned how to make websites interactive! You're a JavaScript Wizard!

🧙‍♂️
Badge Earned: JavaScript Wizard

What's Next?

In our Bonus Adventure, explore the exciting world of AI!

Continue to AI Explorer