Workshop › Text detective › Step 1 of 13

Text detective: Read the text

A page that studies any text as you type: characters, words, the most common word, and the text in Caesar code. Your first real JavaScript: variables, functions, arrays, loops and a Map.

What we are doing

Our detective looks at any text and reports on it. First, JavaScript reads what is in the box and writes it under it.

```js
const box = document.querySelector('#text')
const result = document.querySelector('#result')
result.textContent = box.value
```

What it means

• document.querySelector('#text') finds the element with the id text (the box); # means id.
• box.value is what is written in the box.
• Setting result.textContent puts text into the paragraph.

Your turn

Write the three lines on the empty line inside <script>.

Skills: HTML structure, Functions

Count the characters →

All steps

1. Read the text
2. Count the characters
3. Update as you type
4. Split into words
5. The extra-space trap
6. An empty box has no words
7. Count each word
8. Drop the punctuation
9. The most common word
10. Shift a letter
11. Encode a whole text
12. The secret line
13. Build it yourself: crack the code