progressiveFizzBuzz

The FizzBuzz game stipulates that, in a linear sequence of numbers, multiples of 3 should be replaced with Fizz; multiples of 5 should be replaced with Buzz and multiples of both 3 and 5 should be replaced with FizzBuzz. For example:

by Julien Etienne

HTML

<section>
  <p>
    The FizzBuzz game stipulates that, in a linear sequence of numbers, multiples of 3 should be replaced with Fizz; multiples of 5 should be replaced with Buzz and multiples of both 3 and 5 should be replaced with FizzBuzz. For example:
  </p>
</section>
<h1>Progressive FizzBuzz</h1>
<input type="text"  type="number" placeholder="Enter a number">
<div class="results"></div>

CSS

body {
  background: #333;
  font-family: arial;
}

section {
  background: lightblue;
  border-radius: 5px;
}

p {
  padding: 0.4rem;
  color: #444;
}

h1 {
  color: white;
  font-size: 1.2rem;
}

.results {
  color: white;
}

JavaScript

const progressiveFizzBuzz = (n) => {
  let isFizz;
  let isBuzz;
  let results = {};

  results.Fizz = 0;
  results.Buzz = 0;
  results.FizzBuzz = 0;

  for (let i = 1; i <= n; i++) {
    isFizz = !(i % 3);
    isBuzz = !(i % 5);

    if (isFizz && isBuzz) {
      results.FizzBuzz += 1;
    } else if (isBuzz) {
      results.Buzz += 1;
    } else if (isFizz) {
      results.Fizz += 1;
    }
  }
  return JSON.stringify(results);
}

const createText = (value) => {
  results.appendChild(document.createTextNode(value));
}

const updateResults = () => {
  const fizzBuzzResults = JSON.parse(progressiveFizzBuzz(input.value));

  // This is bad
  results.innerHTML = '';
  createText(` Fizz: ${fizzBuzzResults.Fizz},`);
  createText(` Buzz: ${fizzBuzzResults.Buzz},`);
  createText(` FizzBuzz: ${fizzBuzzResults.FizzBuzz}.`);
}

// Get the results element
const input = document.getElementsByTagName('input').item(0);
const results = document.getElementsByClassName('results').item(0);

// Bind the listener
input.addEventListener('change', updateResults);




////////////////////////////////////////////////////////
// Below is testing using Mocha Chai
///////

/*
// Test utility.
function isJSON(value) {
  try {
    JSON.parse(value);
  } catch (e) {
    return false;
  }
  return true;
}

// Values to compare against.
const nIs15 = {
  Fizz: 4,
  Buzz: 2,
  FizzBuzz: 1
};
const nIs10 = {
  Fizz: 3,
  Buzz: 2,
  FizzBuzz: 0
};
const nIs5 = {
  Fizz: 1,
  Buzz: 1,
  FizzBuzz: 0
};
const nIs2 = {
  Fizz: 0,
  Buzz: 0,
  FizzBuzz: 0
};

// Check values against data.
const compareResult = (value, data) => {
  console.log(value, JSON.stringify(data));
  return value === JSON.stringify(data);
}

// Test.
describe('progressiveFizzBuzz', () => {
  it('Should be a function', () => {
    expect(progressiveFizzBuzz).to.be.a.function;
  });

  it('Should return a JSON', () => {
    expect(isJSON(progressiveFizzBuzz(5))).to.be.true;
  });

  it('Should return correct values when n is 15',...