Workshop › Sudoku › Step 26 of 28

A number pad

What we are doing

Phones have no number keys on screen, so under the board there is a row of ten buttons: 1 to 9 and one to erase.

```js
const PAD_Y = TOP + 9 * SIZE + 16 // the row of number buttons for touch screens
const PAD_W = (9 * SIZE) / 10
const PAD_H = 44

  for (let i = 0; i < 10; i++) {
    const x = LEFT + i * PAD_W
    ctx.fillStyle = '#e0e7ff'
    ctx.fillRect(x + 2, PAD_Y, PAD_W - 4, PAD_H)
    ctx.fillStyle = '#3730a3'
    ctx.font = 'bold 22px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(i === 9 ? '⌫' : String(i + 1), x + PAD_W / 2, PAD_Y + 30)
  }
```

What it means

• The pad sits 16 pixels under the board; the board's width is split into 10 buttons.
• Each button leaves 2 pixels of gap on each side (x + 2, PAD_W - 4).
• The last button shows ⌫, the erase sign.

Your turn

1. Under TOP, write the three PAD_ constants.
2. In draw, between the lines loop and the time, draw the buttons.

Skills: Drawing on a canvas

← N for a new puzzle Tap the pad →

All steps

1. Nine by nine
2. Lines and boxes
3. A puzzle from a string
4. The puzzle's own digits
5. Keep drawing
6. The selected cell
7. Light up row, column and box
8. The same digit everywhere
9. Click to select
10. Move with the arrows
11. Write digits
12. The three rules in one loop
13. Show mistakes
14. Solved!
15. A clock
16. The solved message
17. Play again
18. The easiest cell
19. The solver
20. Random order
21. Invent a puzzle
22. A new puzzle every game
23. Hints
24. Best time
25. N for a new puzzle
26. A number pad
27. Tap the pad
28. Build it yourself: undo