dots.js

function dots(width, height, density) {
  for (let i = 0; i < density; i += 1) {
    createDot(
      Math.floor(Math.random() * width),
      Math.floor(Math.random() * height),
    );
  }
}

function createDot(x, y) {
  const elem = document.createElement('div');
  const colors = ['#BBC8FA', '#BBE6FA', '#FADCBB'];
  const color = colors[Math.floor(Math.random() * colors.length)];
  const dotSize = Math.floor(Math.random() * 6) + 4;
  const styles = [
    `left: ${x}px;`,
    `top: ${y}px;`,
    `background: ${color};`,
    `height: ${dotSize};`,
    `width: ${dotSize};`,
  ];

  elem.setAttribute('class', 'dot');
  elem.setAttribute('style', styles.join(''));

  document.getElementsByTagName('body')[0].appendChild(elem);
  return elem;
}

export default dots;