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

My solutions

So for the JavaScript refactor challenge I wanted to see if I could use all of the loop methods that we learned so I did one for the while-loop the do-while-loop and the for-loop. here are my solutions.

For loop

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

for ( var j = 0; j < 10; j += 1 ) {
  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>';
}

document.write( html);

While loop

var html = '';
var red;
var green;
var blue;
var rgbColor;
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 +=1;
}
document.write(html);

Do while loop

var html = '';
var red;
var green;
var blue;
var rgbColor;
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 += 1;
} while ( counter < 10 )
document.write(html);

It would be nice to have some feedback. Thanks

Also since I started the JavaScript course Dave McFarland has been using the document and mostly the console to log messages. Then he jumped into targeting element in the html and putting things like divs on a page. That's cool and all, but when I take a look at the CSS for these styles I'm so overwhelmed. Is there a course that teaches more or such advance CSS styling and for the color divs and generating a random color, since we've only generated random numbers. I looked at the code and I get about 50% of it. I'm just saying I always thought there was a way to generate random anything, but I assumed there was like a different random generator block of code, but the code is still the basic syntax for generating a random number from 0 to 256 and then he put the result of each color r g b into a rgb string with quotes and + symbols all over the place. that's where I got lost. are there courses or sites that teach how to generate other random stuff how to do most of what he's doing in the more advance areas of JavaScript?

2 Answers

Steven Parker
Steven Parker
243,318 Points

You can refactor your code a bit more to make it more "DRY" by creating a function to handle the random picking:

var randomColor = () => Math.floor(Math.random() * 256);

// then later you could do this...
  red = randomColor();
  green = randomColor();
  blue = randomColor();

And yes, there are quite a few CSS courses that cover the techniques used to make the CSS files that are included with the project.

Hi Steven Parker the refactor challenge was actually the next one. I do these challenges as I approach them in the course. :) . Also could you share some of the links to the videos you mentioned above. Thanks so much.

Steven Parker
Steven Parker
243,318 Points

You might start with CSS Basics, but then look over the CSS courses in the library and pick what interests you.

Hi Steven Parker I've actually spent several days going over the CSS courses Library. There's nothing in there that address my problem or the the advanced CSS layouts used in the videos. For example when displaying the JavaScript to the page the container is already styled. I look at the CSS file but about 60% of what's in there doesn't make sense to me.

Steven Parker
Steven Parker
243,318 Points

Perhaps if you start a new question and ask specifically about the CSS constructs you find confusing, someone could explain them and/or point you to a course where they are covered.