| Level Navigation: 1 |
2 |
3 |
4 |
5 |
6 |
7 |
Current Level: 8 |
9 |
10 |
Goal: Make weather data appear only after a button is clicked, adding interactivity to your app.
📋 What You’ll Do
- Add a button to your HTML that will show the weather when clicked
- Modify your JavaScript to wait for the button click before displaying weather data
- Remove the automatic weather display from your script
🚀 Challenge Instructions
Work in your script.js and index.html files:
- Add a button to your HTML that will show the weather when clicked
- Modify your JavaScript to wait for the button click before displaying weather data
- Remove the automatic weather display from your script (the setText calls that run immediately)
Challenge: Figure out how to implement this yourself! You’ll need to:
- Add a button element with an appropriate ID
- Use
onEvent() to listen for button clicks
- Move the weather display code inside the event listener
🎓 Learning Point: What is an Event Listener?
An event listener is a function that waits for a specific action (like a button click) to happen, then runs code in response. Think of it like setting up a security camera that watches for movement - when it detects something, it triggers an alarm.
In our code, onEvent("show-weather", "click", function() { ... }) means:
- Watch the element with
id="show-weather"
- Wait for a “click” action
- Run this function when it happens
This is how we make websites interactive instead of just static displays!
💡 What You’ll Review
- Event handling with
onEvent()
- User interaction patterns
- How to make content appear on demand
✅ Check Your Work
🔗 Navigation
Ready for the next challenge? Continue to Challenge Part 2: Second City Button
| Level Navigation: 1 |
2 |
3 |
4 |
5 |
6 |
7 |
Current Level: 8 |
9 |
10 |