Quote Typer

What this page does

1. The page shows a random quote, its author, and its book.
2. Type the quote into the box. The message under the box changes as you type.
3. Green means you typed the whole quote correctly. Blue means what you have typed so far is right. Red means a letter does not match.
4. Click the refresh button for a new quote. The box clears.

How it works

• The quotes are in an array. Each item is an object with text, author, and book.
• When the page loads, the code picks a random quote. It stores the quote text in active_quote, so the checker always knows the correct answer.
• checkTyping() runs on every keystroke. The input event fires each time the box changes.
• The checker compares your text with active_quote and picks one of three messages.

if (typed === active_quote) {
    // Case 1: the text matches exactly. You are done.
    check_message.style.color = "lightgreen";
} else if (active_quote.startsWith(typed)) {
    // Case 2: what you typed is the start of the quote. Keep going.
    check_message.style.color = "lightskyblue";
} else {
    // Case 3: something does not match.
    check_message.style.color = "salmon";
}

Build it step by step

1. 1

   Make the page

   Make index.html with three paragraphs for the quote, the author, and the book. Add the refresh button, the typing box, and one more paragraph for the message. Put the <script> tag at the end.

2. 2

   Make the quote list

   In quote.js, make the quotes array. Each object needs text, author, and book. Use any quotes you like. If a quote has no book, use an empty string "".

3. 3

   Show one quote

   Get the three paragraphs. Pick a random position. Store the quote text in active_quote. Then write the text, the author, and the book into the page. Reload. A random quote appears.

4. 4

   Wire up the refresh button

   Move the code from step 3 into a function called refreshquotes(). Connect it to the button with addEventListener("click", refreshquotes). Clicking now changes the quote.

5. 5

   Add the typing checker

   Write checkTyping() with the three cases. Connect it with type_box.addEventListener("input", checkTyping). The message now updates while you type.

6. 6

   Clear the box on refresh

   Add two lines to refreshquotes() so it also empties the typing box and the message. Each new quote now starts clean.

Things you can tidy up

This file has a few leftovers from when it was written. Cleaning them up is good practice.

• The console.log(quotes[0]) line and the commented-out console.log lines were used for testing. You can delete them.
• type_box and check_message are used inside refreshquotes() but declared further down the file. This works, but it is clearer to declare them before the function that uses them.
• Two comments have spelling mistakes: "betweeen" and "pervious".
• There is a comma after the last quote object. It does no harm, but it is not needed.