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!", and any number is both divisible by five and three with the word "FizzBuzz!!".

Technologies Used: HTML, JavaScript, CSS, Bootstrap.

Example: the user enters "210" the output is "FizzFizz!!". Because 200 can divide to 5 and 3.

//take user input and print numbers to the page
function printNumbers() {
let startNum = parseInt(document.getElementById("numOne").value);
let endNum = parseInt(document.getElementById("numTwo").value);
let numbers = getRange(startNum, endNum);

//gets the range of numbers
function getRange(startNum, endNum) {
let numberArray = [];

for (let index = startNum; index <= endNum; index++) { 
  return numberArray; 

//displays the numbers of the page

function displayData(numbers) {
const rowTemplate = document.getElementById("Data-Template");
const resultsBody = document.getElementById("resultsBody");
let colCount = rowTemplate.content.cloneNode(true).querySelectorAll("td").length;
//clear the table
resultsBody.innerHTML = "";

    //loop over every element in the numbers array
    //get the value and write it to the page
    for (let i = 0; i < numbers.length; i +=colCount) { 
      let dataRow=rowTemplate.content.cloneNode(true); 
      //return anarray of columns from the template 
      let cols=dataRow.querySelectorAll("td");
      //loop over the columns 
      for (letcolIndex=0; colIndex < cols.length; colIndex++) { 
        let value=numbers[i + colIndex]; 
        if (value % 3==0 && value % 5==0) { 
          cols[colIndex].classList.add("fizzbuzz") cols[colIndex].textContent="FizzBuzz" ; 
        } else if (value % 3==0){ cols[colIndex].classList.add("fizz") cols[colIndex].textContent="Fizz" ; 
      } else if (value % 5==0) {
          cols[colIndex].textContent="Buzz" ; 
        } else {
          cols[colIndex].classList.add("value") cols[colIndex].textContent=value; } 
          //Note: td's use textContent to set content
           //add the row to the page