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

Enter and Delete keys

What we are doing

The last row gets Enter (OK) and Backspace (DEL), one and a half keys wide. In KEY_ROWS they are written as > and <; a small lookup turns them into their key names and labels, and each key now has its own width.

```js
const KEY_ROWS = ['qwertyuiop', 'asdfghjkl', '>zxcvbnm<'] // > is Enter, < is Backspace

    const widths = [...row].map((k) => (k === '>' || k === '<' ? KEY_W * 1.5 : KEY_W))
    const total = widths.reduce((a, b) => a + b, 0) + (row.length - 1) * 4
    let x = (canvas.width - total) / 2
    ;[...row].forEach((k, i) => {
      const [key, label] = { '>': ['Enter', 'OK'], '<': ['Backspace', 'DEL'] }[k] || [k, k]
      rects.push({ key, label, x, y: KEYS_TOP + r * (KEY_H + 6), w: widths[i], h: KEY_H })
      x += widths[i] + 4
    })
```

What it means

• widths has one width per key: 48 for > and <, 32 for letters.
• reduce((a, b) => a + b, 0) adds them all up.
• The lookup object gives ['Enter', 'OK'] or ['Backspace', 'DEL']; for a letter it gives undefined, and || [k, k] uses the letter for both.
• const [key, label] = ... names the two items of the pair.

Your turn

1. Change the third string of KEY_ROWS to '>zxcvbnm<' and add the comment.
2. In keyRects, replace the lines inside KEY_ROWS.forEach with the new ones. Press Run.

Skills: Arrays and objects

← Tap a key Keys that remember →

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