The Code is structured in three functions.

getValues()

The getValues() function is responsible for retrieving the numbers the user provides in the input fields and parsing them as integers. If both inputs provided by the user are numbers then it will call the fizzBuzz() and displayData() functions described below.

fizzBuzz()

The fizzBuzz() function takes two parameters, which are the Fizz and Buzz values. These values are used to check the conditions for Fizz, Buzz, or FizzBuzz. We use the modulo operator (%). to check if a number is divisible by the Fizz or/and Buzz values. This gives us four possible combinations.

• The number is divisible by Fizz and Buzz, which makes it FizzBuzz.
• The number is divisible by Fizz.
• The number is divisible by Buzz.
• The number is not divisible by neither Fizz or Buzz.

This function determines the data values and pushes it into an array, which is then returned.

displayData()

The displayData() takes one parameter which is an array with the data. The HTML table is retrieved and emptied every time new data is parsed. A template was used to facilitate the reuse and construction of the table rows (see HTML page). The data is then divided in groups of five elements to form the rows that will be injected to the table. Custom CSS is injected into each value, this will alter the color of the text depending on the values being Fizz, Buzz, or FizzBuzz.