Workshop › Wordle-style Word Guess › Step 16 of 26

Colour the guesses

What we are doing

Each finished guess is drawn as full tiles in its marks' colours, with white letters. Typing goes into the row after the last guess.

```js
const COLORS = { green: '#16a34a', yellow: '#ca8a04', gray: '#3f3f46' }

  for (let row = 0; row < TRIES; row++) {
    const guess = guesses[row]
    const letters = guess ? guess.word : row === guesses.length ? current : ''

      if (guess) {
        ctx.fillStyle = COLORS[guess.marks[i]]
        ctx.fillRect(x, y, SIZE, SIZE)
      } else {
        ctx.strokeStyle = letters[i] ? '#a1a1aa' : '#3f3f46'
        ctx.lineWidth = 2
        ctx.strokeRect(x + 1, y + 1, SIZE - 2, SIZE - 2)
      }
```

What it means

• COLORS maps a mark to a colour: COLORS['green'] is '#16a34a'.
• guess is this row's finished guess, or undefined if there is none yet.
• letters: the guess's word on a finished row; the typed letters on the first empty row (row === guesses.length); nothing below.
• A finished row is filled with colours; the others keep their outlines.

Your turn

1. Under const TOP = 12, write COLORS.
2. In draw, replace the letters line with the two lines shown.
3. Wrap the three outline lines in if (guess) { ... } else { ... } as shown. Press Run and send a guess.

Skills: Drawing on a canvas

← Enter sends the guess Winning and losing →

All steps

1. The canvas and the pen
2. Paint the background
3. A function that draws
4. A row of five tiles
5. Six rows
6. Draw again and again
7. The typed letters
8. Type with the keyboard
9. Show the letters
10. Backspace
11. Leave shortcuts alone
12. A secret word
13. Right letter, right place
14. Right letter, wrong place
15. Enter sends the guess
16. Colour the guesses
17. Winning and losing
18. A message line
19. Where the keys go
20. Draw the keyboard
21. Tap a key
22. Enter and Delete keys
23. Keys that remember
24. Keep statistics
25. Show the statistics
26. Build it yourself: only real words