Conditional CSS classes

Congratulations on completing the tutorial this far! We still need to explain two more concepts before you are ready to build maquette applications yourself.

The first concept is about conditional CSS classes. You are already familiar with css classes in the selector. For example "div.landscape" creates a <div class="landscape">. But what if our landscape div can also have a CSS class "night" which is conditional? This usecase is so common, that maquette provides a special construction for this. It uses the classes property, which is an object literal mapping classnames to a condition. It works as follows:

h("div.landscape", {
    classes: { night: new Date().getHours() <= 8 }
  })

Looks easy right? Your next assignment is to assign the CSS class 'stealth' to the flying saucer, based on the 'stealth' variable.

Good luck!