codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18⚡

19

Level 9: Dynamic Stats Styling

User Story: As a player, I want the stats bar color to change as my score increases so that I get visual feedback on my progress.

What You’ll Do

Create dynamic styling that changes the stats bar color based on the current score.

Instructions

• Create a statsStyle object with initial backgroundColor and color properties
• Write conditional logic (if/else statements) to change colors based on score
• Apply the statsStyle object to the stats div using the style attribute
• Choose your own colors and score thresholds!

Suggested Color Scheme (feel free to customize):

• Score 0-9: brown background, whitesmoke text
• Score 10-19: darkGreen background, whitesmoke text
• Score 20-29: navy background, whitesmoke text
• Score 30+: black background, pink text

Other color ideas: purple, teal, crimson, goldenrod, indigo, coral, forestgreen

✅ Check

1. Stats bar changes color when you reach different score milestones
2. Colors change immediately when crossing your thresholds
3. Text color is readable against background color
4. You’re happy with your creative color choices!

Why modify objects before rendering? In React, you can create style objects and modify them based on state before the return statement. Each time state changes, the component re-renders and the conditionals run again, creating fresh style objects.

---