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 11: Hide Apple on Win

User Story: As a player, I want the apple to disappear when I win so that I don’t accidentally keep clicking after winning.

What You’ll Do

Replace the conditional && with a ternary operator to show EITHER the apple OR the win message.

Instructions

• Replace the apple-target div and win message with a ternary expression
• Use: score < 100 ? ... : ...
• If score < 100, show the apple-target div
• If score >= 100, show the win message
• Test that the apple disappears when you win

💡 Code Hints

Need help with ternary operators? Check out these snippets:

Show Me: ternary operator syntax

<div className='orchard-background' onClick={missTarget}>
  { score < 100 ? 
    <div className="apple-target" onClick={clickTarget} style={appleStyle}></div>
    : <h1 className="win"> You Win!</h1>
  }
</div>

Show Me: .win class CSS styling

.win {
  position: absolute;
  background-color: green;
  color: red;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

✅ Check

1. Play the game with score below 100 - apple should be visible
2. Reach exactly 100 points
3. Apple should disappear immediately
4. “You Win!” message should appear
5. You should NOT be able to click the apple anymore
6. The game should feel complete and finished

Ternary vs && operator:

• && operator: Shows component OR nothing
• Ternary ? :: Shows component A OR component B
• Use ternary when you need mutual exclusivity

---