12.4 The “classList” Interface 277li.classList.item(1) => apple
li.classList.contains('red') => true
li.classList.contains('apple') => true
li.classList.contains('organic') => false
If we forgot to attach the organic label during pricing, we can assign it afterward
to our red organic apple:
li.classlist.add('organic')
li.classList.item(2) => organic
The banana on the next shelf that traveled all the way from Ecuador has wrongly
been categorized as organic; we can easily fix that mistake:
banana.classList.remove('organic')
For bread, fresh in the morning and not quite as fresh in the evening, we could
insert toggle() for showing the relevant state:
// freshly baked in the morning
bread.classlist.add('fresh')
// late afternoon
bread.classList.toggle('fresh')
bread.classList.contains('fresh') => false
// and the next morning after the new delivery
bread.classList.toggle('fresh')
bread.classList.contains('fresh') => true
In the 1-2-3-4! game we will use classList for displaying correct or wrong for
the selected order. Before turning to the core of the game, the drag-and-drop
function, we will quickly adapt the game’s layout and add four areas to the left
of the city list where the cities can be sorted. All four li elements get the class a
for answer during the selection, analog to q for question, and Unicode symbols
for numbering in the range to —so-called DINGBAT NEGATIVE
CIRCLED DIGITS:
- ❶
- ❷
- ❸
- ❹
With a few additional CSS formats, we finalize the static basic version of the
game. Figure 12.1 shows the basic layout. The online version can be found at
http://html5.komplett.cc/code/chap_global/1234_static_en.html.