My Solution... well, 2 solutions. I had not thought of a more split modular approach.

Hello Adiv, how are you? Sweet solution. I like your approach. I do like looking at others people code, as it really impresses me how one problem could possibly have hundreads of different approaches, some of which I wouldn't even come up in years. I really do like that part of programming = ).

Well, as far as I can see, the erorr that caught my eye was your for in loop.

for (color in colors) {
      colors.color = getRGBValue();
   }

The thing is, that as you probably know already, for in loop is a special type of loop that can be used to itterate over object's properties, itterating through each and every propertie of an object(no skipping like you can do in arrays, like calling every 5th or so item). Now the thing is, that you can only use a square bracket notation inside of a for in loop. Let me demostrate a few examples in a code block below.

for ( var propName in yourObject ) {
  alert(yourObject[propName]);
}

Or in this particular example it would look like this:

for ( var color in colors) {
      colors[color] = getRGBValue();
   }

Now, it's just the syntax of a for in loop. But just to give you a few "Why is it, as it is" clues, as it would be much easier for you to understand the syntax, rather than by learning it all by heart.

//Let's make a cat object (*MEOW*)
var cat = {
name: 'SuperNyan';
color: '100% Nyan',
says: 'meow'
};


//Now let's just call for a value associated with a name propertie of a cat object that would like like this
cat.name;

//And that will return 'SuperNyan' string value

But what if we wanted to actualy retrieve all of the values from that cat object (cat's name, color and the actual sound she makes). We would need to use a for in loop for that and it would look something like this

for ( var prop in cat ) {
  console.log( cat[prop] );
  //It will write in the console: 'SuperNyan', '100% Nyan' and 'meow'
}

Now why did we use a [] instead of . notation. Let me explain a bit further. If we did something like this:

for ( var prop in cat ) {
  console.log( cat.prop );
} 

That would actualy return: undefined, undefined and undefined; but why so? As you see, when you use the dot notation, like we did in this example, that tell's the web browser (or the actual JS interperteur inside of a web browser) to look for a value inside of a cat object that is associated with a key named prop. Further more, that is actualy telling the web browser to look for a property with a name of prop and return a value associated with it which is, as you can guess, undefined. Why so you may wonder? It's because we didn't actualy define the prop key for our cat object, meaning that there's no value associated with that property. The same result would occur if we used

for ( var prop in cat ) {
  console.log( cat['prop'] );
}

Notice those ' ' (quotes) forming a string value? It is again telling the web browser to look for a property with a name of prop, inside of a cat object and return the value associated with that key, meaning something like this:

cat = {
name: 'SuperNyan';
color: '100% Nyan',
says: 'meow',
prop:     //  <------  It is looking for that, which does not exist.
};

I hope that you was able to follow me, as if not, feel free to buzz me up again and I'll come up with a better explanation and a more appropriate example.

Best wishes and

Keep on hacking!

I actually put myself into this task and tried to solve it as many times as I could think of, before looking at the Dave's solutions. So, here are some of my workarrounds (all DRY coded, but some are more DRY than the others), before even looking at the videos in which Dave shared his own solution.

With function invoking

///DRY Code by using FUNCTIONS!

function generateColorCircle() {
  red = Math.floor(Math.random() * 256 );
  green = Math.floor(Math.random() * 256 );
  blue = Math.floor(Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';
}

generateColorCircle();
generateColorCircle();
generateColorCircle();
generateColorCircle();
generateColorCircle();
generateColorCircle();
generateColorCircle();
generateColorCircle();
generateColorCircle();
generateColorCircle();

With while loop

///DRY code by using WHILE LOOP

var counter = 0;
while ( counter < 10 ) {
  red = Math.floor( Math.random() * 256 );
  green = Math.floor( Math.random() * 256 );
  blue = Math.floor( Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';
  counter++;
}

With do while loop

///DRY code by using DO WHILE LOOP

var counter = 0;
do {
  red = Math.floor( Math.random() * 256 );
  green = Math.floor( Math.random() * 256 );
  blue = Math.floor( Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';
  counter++;
} while ( counter < 10 )

With for loop

///DRY code by using FOR LOOP

for ( var i = 0; i < 10; i++ ) {
  red = Math.floor( Math.random() * 256 );
  green = Math.floor( Math.random() * 256 );
  blue = Math.floor( Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html +='<div style="background-color:' + rgbColor + '"></div>';
}

Some workarround (making the code even more DRY)

function getRandomNumber() {
  return Math.floor( Math.random() * 256 );
}


for ( var i = 0; i < 10; i++ ) {
  red = getRandomNumber();
  green = getRandomNumber();
  blue = getRandomNumber();
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';
}

Final solution I made (even more DRY)

function getRandomNumber() {
  return Math.floor( Math.random() * 256 );
}

for ( var i = 0; i < 10; i++ ) {
  rgbColor = 'rgb(' + getRandomNumber() + ',' + getRandomNumber() + ',' + getRandomNumber() + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';
}

Cheers!

P.S. Hit me up with your unique solution, as I would be more than glad to take a look at even more "funkier" way of solving this puzzle.

I'd like to share my answer, but it took reading this thread and some creativity to come up with it. I wanted nothing to be reused, but everything to be usable. I have both generic and specific functions for not repeating any code, though I think I may have overdone it. While this is a simple example, I do believe this may be how more complicated code structures work.

function ranNum( min, max ) { 
  return Math.floor(Math.random() * (max - min) + min); 
}
function print( html ) { 
  document.write( html ); 
}
Function ranNum256() { 
  return ranNum(1, 256); 
}
function printDot(red,green,blue) { 
  print( '<div style="background-color:rgb(' + red + ',' + green ',' + blue + ')"></div>' ); 
}
function printRandomDot() { 
  printDot( ranNum256(), ranNum256(), ranNum256() ) 
}

var numOfDots = 10;

for( var i = 0; i < numOfDots; i++ ) {
  printRandomDot();
}

The various solutions presented here are fantastic and show really creative thinking. I tried to do the same but perhaps am getting ahead of myself. I created an object called colors to contain red, green and blue as the property values or keys and initialized the values to 0, which would result in rgb(0, 0, 0).

For some reason the rgb color string is ALWAYS coming out to rgb(0, 0, 0) despite the fact that random numbers are assigned to the colors object every time the getColors() function is called. Not sure where I am faltering here but I would appreciate any advice. Thank you

var html = '';

//object to hold RGB values
var colors = {red : 0,
              green : 0,
              blue : 0
              }

function getRGBValue() {
    //generate random values between 0-255 for the color values
    return Math.floor(Math.random() * 256);
}//getRGBValue()

function getColors() {
   //assign color values
  for (color in colors) {
      colors.color = getRGBValue();
   }
   return 'rgb(' + colors.red + ',' + colors.green + ',' + colors.blue + ')';
};//getCoolors()


for (var i = 1; i <=10; i++) {
    html += '<div style="background-color:' + getColors() + '"></div>';
}//for

document.write(html);
//getColors() always returns "rgb(0, 0, 0)" for some reason