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 5: Add Score Tracking

User Story: As a player, I want to see my score increase when I click the apple so that I can track my progress.

What You’ll Do

Add React state to track the score and create a click handler for the apple.

Instructions

• Import useState from React
• Create a state variable for score with initial value of 0
• Create a clickTarget function that:
  • Accepts an event parameter
  • Calls event.stopPropagation() to prevent click bubbling (see Level 6 “Show Me” section for details on how this works)
  • Increments the score by 1
• Add an onClick handler to the apple-target div
• Create a stats div above the game board to display the score
• Style the stats div in CSS

💡 Code Hints

Need help with state and events? Check out these snippets:

Show Me: useState import and setup

import { useState } from 'react'
import './App.css'

function App() {
  const [score, setScore] = useState(0)
  
  // ... rest of component
}

Show Me: click handler function

function clickTarget(event) {
  event.stopPropagation();  // Prevents triggering parent clicks
  setScore(score + 1)
}

Show Me: JSX with stats display

return (
  <>
    <div className="stats">
      Score: {score}
    </div>
    <div className='orchard-background'>
      <div className="apple-target" onClick={clickTarget}></div>
    </div>
  </>
)

Show Me: stats CSS styling

.stats {
  background-color: brown;
  color: whitesmoke;
  width: 500px;
  padding: 5px;
}

✅ Check

1. You should see “Score: 0” above the game board
2. Click the apple - the score should increase to 1
3. Click multiple times - score should keep increasing
4. The stats bar should have a brown background
5. If score doesn’t update, check:
   • useState is imported correctly
   • onClick handler is attached to apple-target
   • You’re using setScore to update state

🔬 Try This

Experiment with Box Sizing:

In your App.css, you included box-sizing: border-box on the universal selector. Let’s see what this does!

1. Remove or comment out the box-sizing line: ```css
   • { /* box-sizing: border-box; */ } ```

2. Change the stats padding to something larger, like 20px

3. Observe what happens to the width of your stats bar

What’s happening?
Learn about box-sizing: border-box and how it affects element sizing: MDN: box-sizing

Question: Does the stats bar stay 500px wide, or does it get wider? Why?

---