Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

amit dilawri
amit dilawri
1,244 Points

Here is my solution

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

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

function colorMix(){ red = getRandomColor(); green = getRandomColor(); blue = getRandomColor(); return rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; }

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

document.write(html);

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

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

function colorMix(){ 
red = getRandomColor(); 
green = getRandomColor(); 
blue = getRandomColor(); 
return rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; }

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

document.write(html);

I reformatted the code to look better

Looks Great!!! code looks nice and clean. I forgot to give the div a width and height, so it wasn't showing up. Silly me.

8 Answers

`

amit dilawri
amit dilawri
1,244 Points

colorMix() only works when you call it under var html. html has this div tag which I believe makes the color shows up in the circles.

I see it now sorry.

It's not working in my browser. Is it working in your's?

amit dilawri
amit dilawri
1,244 Points

John Larson - How do you format the code the way you did it?

near the bottom of the page there's a link that tells how to do it. Markdown Cheatsheat. But its: three back tics the word JavaScript. Hit enter a few times. Paste in your code. Hit enter a few more times. Three more back tics, and your done :D

amit dilawri
amit dilawri
1,244 Points

Have you copied the css file and index.html from the workspace?

amit dilawri
amit dilawri
1,244 Points
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color Blocks</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body id="color">
<script src="script.js"></script>
</body>
</html
@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');

/*General*/
body {
  background: #fff;
  max-width: 980px;
  margin: 50px auto;
  padding: 0 20px;
  font: Helvetica Neue, Helvectica, Arial, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: #8d9aa5;
}

a {
  color: #3f8aBf;
  text-decoration: none;
}

a:hover {
  color: #3079ab;
}

a:visited {
  color: #5a6772;
}

h1, h2, h3 {
  font-weight: 500;
  color: #384047;
}

h1 {
  font-size: 1.8em;
  margin: 60px 0 40px;
}

h2 {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    padding: 10px 0 30px 0;
}

#home h2 {
  margin: -40px 0 0;
}

h3 {
  font-size: .9em;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

h3 em {
  font-style: normal;
  font-weight: 300;
  margin: 0 0 10px 5px;
  padding: 0;
  color: #8d9aa5;
}

ol {
  margin: 0 0 20px 32px;
  padding: 0;
}

#home ol {
  list-style-type: none;
  margin: 0 0 40px 0;
}

li {
  padding: 8px 0;
  display: list-item;
  width: 100%;
  margin: 0;
  counter-increment: step-counter;
}

#home li::before {
    content: counter(step-counter);
    font-size: .65em;
    color: #fff;
    font-weight: 300;
    padding: 2px 6px;
    margin:  0 18px 0 0;
    border-radius: 3px;
    background:#8d9aa5;
    line-height: 1em;
}

.lens {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #8d9aa5;
  border-radius: 5px;
  position: absolute;
  margin: 5px 0 0 -19px;
}

#color div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

span {
  color: red;
}
var html = '';
var red;
var green;
var blue;
var rgbColor;

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

function colorMix(){
    red = getRandomColor();
    green = getRandomColor();
    blue = getRandomColor();
    return rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
    }

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

document.write(html); 
amit dilawri
amit dilawri
1,244 Points

Thanks for your feedback John.

lol, you gave me more feedback than I gave you.

amit dilawri
amit dilawri
1,244 Points

I got program to work however I do need help in understanding the following lines of codes:

return rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

I don't understand why we have strings such as commas and rgb in the above line of code. Without those strings the code doesn't work.

b) html = html + '<div style="background-color:' + colorMix() + '"></div>';

What code is the div style = background-color referring to? Is it in CSS? If yes, can you explain me where in CSS.

//this is inline css.  we are generally discouraged from doing this
//but in this case I think it's the only way
//it's how they did style before css style sheets

'<div style="background-color:' + colorMix() + '"></div>'

//it would have looked like this
//and would have been on the html page

<h1 style="background-color: red;">This is my Header</h1>

as far as this part

return rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

//this is one of the ways to add color
//an rgb value, it looks like this

//rgb(75, 25, 80);

//so we are generating a string that does the same thing
//as if we had placed the string right in the html
amit dilawri
amit dilawri
1,244 Points

Got it. Thank you for your help.