Skip to main content
← JavaScript

Lesson 4 of 11

Quote Typer

Type a quote. The page checks your text on every keystroke. Green means correct. Blue means keep going. Red means check your spelling.

What you will learn

  • Arrays of objects
  • Math.random()
  • The input event
  • startsWith
  • Changing text and colour

Before you start

Zoo Webpage. There you handled a click. Here you handle typing. Typing fires an event on every key.

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. The checker can then always see 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.
quote.js, the three cases
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";
}

Make it easier to read

This is one line of CSS: `font-size` on `#quote_text`.

1.3rem

1rem is the browser's normal text size. So 2 is twice as big.

Build it step by step

  1. Make the page

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

  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. 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. Connect 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. 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. Clear the box on refresh

    Add two lines to refreshquotes() so it also empties the 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(). They are 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.

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Show the input event before you write the checker. Attach a listener that only runs console.log(type_box.value). Let the student watch the console as they type.
  • Teach startsWith in the console first. Run "hello world".startsWith("hell") and then "hello world".startsWith("help"). The two answers are the whole lesson.
  • Add the three cases in this order. Exact match, then prefix match, then the else. Test after each one. If the else comes first, the other two never run. The student cannot see why.
  • The cleanup section is a real exercise, not filler. Ask the student to find the leftovers before you show them the list.