My solution. Possible to make it more compact?

A modern solution that avoids the global scope would be something along this arrow function:

const coloredCircles = amount => {
  const rgb = () => Math.floor(Math.random() * 256);
  for (let i = 0; i < amount; i++) {
    let html = '';
    let rgbColor = `rgb( ${rgb()}, ${rgb()}, ${rgb()})`;
    html += `<div style="background-color:${rgbColor}"></div>`;
    document.write(html);
  }
}

The nested arrow function let rgb = () => Math.floor(Math.random() * 256); deals with eliminating the red, green and blue variables, as you're suggesting, with the template literal assigned to the rgbColor variable `rgb( ${rgb()}, ${rgb()}, ${rgb()})`;.

When called, coloredCircles(10); would generate 10 randomly colored circles, coloredCircles(100); would generate 100 and so on.

If you want to specifically generate 10 colored circles within the parameters given, this is probably the most compact solution (while keeping to formatting norms):

const rgb = () => Math.floor(Math.random() * 256);
for (let i = 0; i < 10; i++) {
  let html = '';
  let rgbColor = `rgb( ${rgb()}, ${rgb()}, ${rgb()})`;
  html += `<div style="background-color:${rgbColor}"></div>`;
  document.write(html);
}

Hi Gary , Well I just test both solutions and both seems to work fine if you call the same function 3 times inside the rgb variable it shows the colors and that way you could eliminate the variables red, green and blue. Just to note that in the second solution you forget to concatenate the parenthesis.

rgbColor = 'rgb(' + colorTheme() + ',' + colorTheme() + ',' + colorTheme() + ')';
// or in template literal way
rgbColor = `rgb( ${colorTheme()}, ${colorTheme()}, ${colorTheme()} )`;

And to your question about the colors not showing maybe it is because your function is wrong and you didn't post it so I'd assume that that's the problem. Either way I would share you my solution and then comment me back if it works.

function colorTheme() {
  var rgb = Math.floor(Math.random()* 256);
    return rgb;
}

// Arrow function form
const colorTheme = () => {
  const rgb = Math.floor(Math.random()* 256);
  return rgb;
};

Thanks!

Yeah I believe it was a syntax error in my code which was stopping it from working.

Cheers, Gary

Here was my solution, trying to make it as compact as possible: https://w.trhou.se/6otkubmfjw

heres the solution I had for refactoring, let me know if you have any questions

var html = '';
function colorRand(){
  return Math.floor(Math.random()*256);
}

function colorDot(iterations){
  for(let i=0 ;i<iterations ;i++){
    html+= `<div style="background-color: rgb(${colorRand()},${colorRand()},${colorRand()})"></div>`;
  }
}
colorDot(10);
document.write(html);