Fizz Buzz


Fizz buzz is a group word game for children to teach them about division. Players take turns to count incrementally, replacing any number divisible by three with the word fizz, and any number divisible by five with the word buzz.

Fizz buzz (often spelled FizzBuzz in this context) has been used as an interview screening device for computer programmers. Writing a program to output the first 100 FizzBuzz numbers is a relatively trivial problem requiring little more than a loop and conditional statements. However, its value in coding interviews is to analyze fundamental coding habits that may be indicative of overall coding ingenuity.

Wikipedia Fizz Buzz

Implementation

The implementation consists of using the :nth-child(n) pseudo-class to perform modulo-arithmetic of all items divisible by 3 and 5 over an ordered list <ol> consisting of n list items <li> where each item has a numeric value.

The :not(:nth-child(3n)):after pseudo-class can be applied to set the content of each list item not divisible by 3 to counter(item), therefore the item contains its numeric value.

The :nth-child(3n):before pseudo-class can be applied to set the content of each list item divisible by 3 to "fizz".

The :nth-child(5n):after pseudo-class can be applied to set the content of each list item divisible by 5 to "buzz".

The end result is that all list items not divisble by 3 or 5 contain a numeric value. All list items divisible by 3 are prefixed with fizz, and all list items divisible by 5 are suffixed with buzz, therefore all numbers that are divisible by 3 and 5 result in fizzbuzz.

The current implementation contains an ordered list containing 100 list items, but the implementation will continue to work for any list size.