Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge

Posted by Adam Laszlo Vincze
Adam Laszlo Vincze
4,083 Points

This is my code for The Refactor Challenge

Here is my code:

var html = '';
var red;
var green;
var blue;
var rgbColor;
var i=0;

while(i<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>';
i++;
}
document.write(html);

Is it a good solution?

3 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Adam,

I would just add some characters in the div tag or add a defined height (and optional width) to the div tag in the style property so that each of the divs will display. If there is no content in the div nor a defined height for the div, the div will not show the background. 

var html = '';
var red;
var green;
var blue;
var rgbColor;
var i=0;

while(i<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 + ';height:40px;"></div>';
//Or:
//html += '<div style="background-color:' + rgbColor + '">Test</div>';
i++;
}
document.write(html);
Adam Laszlo Vincze
Adam Laszlo Vincze
4,083 Points
Adam Laszlo Vincze
Adam Laszlo Vincze
4,083 Points

Thanks for help Marcus :)

Marcus Parsons
Marcus Parsons
15,719 Points

Not a problem, Adam! :)

ronanmcguire
ronanmcguire
4,497 Points
ronanmcguire
ronanmcguire
4,497 Points

I am wondering - is it possible to make a function out of the red/green/blue randomizers, such as: 

function randomNumber() {
  var randomColor = Math.floor(Math.random() * 256 );
  return randomColor;
}

and then call that in the loop: 

while (counter < 10 ) {
   randomNumber(red);
   randomNumber(green);
   randomNumber(blue);

   rgbColor = 'rgb(' + red + ',' + green + ',' + blue  + ')';
   html += '<div style="background-color:' + rgbColor + '"></div>';

 counter += 1;
Marcus Parsons
Marcus Parsons
15,719 Points

You can definitely do that. You'll need to modify the code a bit, though, but I was strictly going off of his code when I helped him out. You'll still need to at least add a height to each div so that they will display or add some content in between the div tags.

Marcus Parsons
Marcus Parsons
15,719 Points

You would need to store the return value of the function into a variable instead of calling the function with a nonused parameter so that your information gets stored and you can use it:

var html, counter = 0;

function randomNumber() {
  var randomColor = Math.floor(Math.random() * 256 );
  return randomColor;
}

while (counter < 10 ) {
   var red = randomNumber();
   var green = randomNumber();
   var blue = randomNumber();

   var rgbColor = 'rgb(' + red + ',' + green + ',' + blue  + ')';
   html += '<div style="height:40px;background-color:' + rgbColor + '"></div>';

 counter += 1;
}

document.write(html);
ronanmcguire
ronanmcguire
4,497 Points

ah, I couldn't see how to store the value of a function in a variable. Thanks!

Marcus Parsons
Marcus Parsons
15,719 Points

No problem, Ronan. Here's a variation I did of this whole thing: http://marcusparsons.com/projects/randomcolorcircles/index.html. You can look at the source of the page (usually Ctrl + U) and see what I did/how I did it.