FizzBuzz question

by Евгений

HTML

<div class="flex">
  <div class="result"></div>
  <div class="debug"></div>
  <div class="resume"></div>
</div>

SCSS

.result,
.resume,
.debug {
  border: 1px solid grey;
  background-color: #dbdbdb;
  padding: 0 4px 4px 4px;
  line-height: 1.5rem;
  &::before {
    display: block;
    padding: 4px;
    margin: 0 -4px;
    background-color: grey;
  }
  &:empty {
    display: none;
  }
}

.result::before {
  content: 'item';
}
.resume::before {
  content: 'second';
}
.debug::before {
  content: 'second';
}
.flex {
  display: flex;
  div {
    flex-grow: 1;
  }
}

JavaScript

const log = (result, isHtml = false) => document.querySelector('.result').innerHTML = result;
const resume = (result, isHtml = false) => document.querySelector('.resume').innerHTML = result;
const debug = (data, isHtml = false) => document.querySelector('.debug').innerHTML = data;

const createArr = (num) => Array.from({length: num}, (_, i) => i + 1);

const createArr2 = (num) => [...Array(100).keys()].map((_, i) => i + 1);

const fizzBuzzItem = (num) => {
	let el = num % 3 ? '' : 'Fizz';
  el += num % 5 ? '' : 'Buzz';
  return el || num;
}

log(createArr(100).join('<br>'));
debug(createArr(100).map(fizzBuzzItem).join('<br>'))
resume(createArr(100).map(fizzBuzzItem).join('<br>'));