Make the example more concrete

As a student, I want to copy/paste the example and try it. By adding a definition of the CSS for the on and off class, and by adding text which can be clicked on, the example becomes easily runnable. Also, by choosing a more obviously non-standard event name like "changeTheLightState", then it is clearer to the student that this is something custom.
I would prefer we reword this a bit more and also stuck with the shorter `changeState`:

> We can instead use a custom event, like `changeState` and our code would look more like this: