Week 4 Day 2 Challenge — Temperature Tracker

1. Build this in Design Mode first

STEP 1

Create these elements on screen1 with these exact IDs and starting text.

Type	ID	Text
Label	`tempLabel`	Temp: 70°F
Button	`warmerBtn`	+1°
Button	`coolerBtn`	-1°
Button	`resetBtn`	Reset

Bonus only — add this after Step 3 works:

Type	ID	Text
Button	`freezeBtn`	Freeze

2. Switch to Code Mode

STEP 2

Copy this starter code into Code Mode and fill in the numbered STEPs.

// SETUP (already works — do not edit)
var temperature = 70;

// STEP 1: When warmerBtn is clicked, add 1 to temperature, then display it
// in tempLabel as "Temp: " + temperature + "°F".


// STEP 2: When coolerBtn is clicked, subtract 1 from temperature, then
// update tempLabel the same way.


// STEP 3: When resetBtn is clicked, set temperature back to 70, then update
// tempLabel.


// ------------------------------------------------------
// BONUS CHALLENGE 🌟
// First, add freezeBtn in Design Mode (see the table above).
// ------------------------------------------------------

// BONUS STEP 4: When freezeBtn is clicked, set temperature directly to 32,
// then update tempLabel.

3. Check yourself

STEP 3

Before you click warmerBtn, say the temperature out loud. Click it. Did the label match your prediction?
Comment out just the setText line inside warmerBtn's handler (leave the variable update in place), run it, and click a few times. Is the number still changing underneath even though the label is frozen? That's the same variable/label gap from tonight's demo. Uncomment the line before moving on.
Try it for real before checking the answer key.

Answer key

var temperature = 70;

// STEP 1
onEvent("warmerBtn", "click", function() {
  temperature = temperature + 1;
  setText("tempLabel", "Temp: " + temperature + "°F");
});

// STEP 2
onEvent("coolerBtn", "click", function() {
  temperature = temperature - 1;
  setText("tempLabel", "Temp: " + temperature + "°F");
});

// STEP 3
onEvent("resetBtn", "click", function() {
  temperature = 70;
  setText("tempLabel", "Temp: " + temperature + "°F");
});

// BONUS STEP 4
onEvent("freezeBtn", "click", function() {
  temperature = 32;
  setText("tempLabel", "Temp: " + temperature + "°F");
});