CHAPTER 27 VISUAL LABS — boards 27a and 27b

These are original fictional teaching examples. Work locally.
Read the named boards first. Predict before running, and explain any
difference before changing a second thing.

HOW TO REPRODUCE
For board 27a, open listener.html. Its script is placed after the HTML it
uses, so the elements already exist when it runs. Before clicking, expect
No details checked yet. Click once: The button was used. Click again:
the same sentence remains; assignment replaces rather than appends text.

For board 27b, open ../../web/reference_site/contact.html. This is the
finished chapter form. It does not submit or store any enquiry. Start
fresh or use Start again between cases:
- Empty fields: browser validation stops the practice check.
- practice@example.com and a company containing only spaces: the message
  says Enter a company name, not just spaces.
- practice@example.com and Harbour Practice: the local pass message names
  Harbour Practice and states that nothing has been sent or booked.

CHANGE / PREDICT / CHECK
Enter two spaces before and after Harbour Practice. Predict the message
before clicking: the name has no outer spaces because trim removes them.
Now test a second input: change the company to Harbour Test. The message
must name Harbour Test. A program that always prints Harbour Practice
would pass the first test by accident and fail this second test.
The exact browser validation bubble for an invalid email can vary.
