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
Sal Sal
47 PointsI dont understand the stuff that goes in html and rgb variable. Please help.
I have no idea whats happening inside these variables please help. Specially the 'html' and 'rgbColor' variable. The commas inside the rgbColor and html variable makes no sense. Please explain. 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>';
10 Answers
Sal Sal
47 PointsI completely loose it when I see the commas and "" or ''. I dont know what they mean at all these positions.
Jacob Mishkin
23,117 PointsLet breakdown the code!
var red = Math.floor(Math.random() * 256 ); //random number
var green = Math.floor(Math.random() * 256 ); //random number
var blue = Math.floor(Math.random() * 256 ); //random number
var rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; //combine random numbers to create an rgb value
var html += '<div style="background-color:' + rgbColor + '"></div>';// add rgb value into the background style for div.
What is happening here is first we are creating random numbers for an RGB value. RGB is a way for us to combine the colors red green and blue to create a color. We first create the variable red, green, then blue, that will will create three random numbers that will give us a value for our RGB color.
then we create the RGB color in a variable called rgbColor by creating a string with the CSS property for RGB color and combining the prior variables red, green, and blue through concatenation we then apply the variable rgbColor to the html variable as the background style.
Sal Sal
47 PointsCan You please tell me why and how does the "" , '' works in both rgbColor variable and html variable. Plus why do we add <div> and style="background-color".?
Jacob Mishkin
23,117 PointsIt's cool. First you need to know what is RGB
background-color: #74992e; /* Hexadecimal value */
background-color: rgb(255, 255, 128); /* RGB value */
the reason why we are adding the commas as strings is so we create the rgb value as shown above. if not we get this
background-color: rgb(255255128); /* RGB value */ does not equal a rgb value.
we need to add the commas as strings to create the value for our background color. The quote marks signal a string an opening quote starts the string and the last string closes the string.
Jacob Mishkin
23,117 PointsFrom looking at what you have studies so far, I would suggest you start learning HTML and CSS first. This will give you a better understanding of what you are doing here.
Sal Sal
47 PointsThanks alot Jacob. I have studied HTML and CSS and I know how rgb works, but was really confused here with the commas and quotations. One more question Jacob. What does the <div> and style=background-color mean over here.?
Jacob Mishkin
23,117 Pointsyou are creating an html element with an inline style.
Sal Sal
47 PointsAnd how does the commas and quotations work in the html variable.?
Jacob Mishkin
23,117 Pointsthe quotation marks are strings. You are concatenating strings to properly create the CSS property of RGB. With out the strings or commas you create this in the HTML:
background-color: rgb(255255128); /* RGB value */ does not equal a rgb value.
The above is not a valid value.
you add the strings to create this:
background-color: rgb(255, 255, 128); /* RGB value */
Sal Sal
47 PointsAnd how does the commas and quotations work in the html variable.? Can you please explain.?
Sal Sal
47 Points'<div style="background-color:' '"></div>'
How does these quotes work.?
Jacob Mishkin
23,117 Pointsthis is nesting strings. you have one string defined by the single quote ' ', then you have a nested string defined by the double quotes " ", then nested inside of the double quote you have a single quote ' '.
Sal Sal
47 PointsI am really sorry for asking too many questions Jacob. And thanks alot for your time. Can you please explain how does the quotes work in here: '<div style="background-color:' '"></div>' I dont get which is the starting quote and where it ends.
Jacob Mishkin
23,117 PointsYour fine, I want you to understand this, and keep asking until you get it. to read this you start left and work your way right. the first quote is single quotes, then you have a nested double quote then inside of the double quote you have a nested single quote then at the end of the string you have a single quote that ends the initial single quote.
Sal Sal
47 PointsThanks Jacob, Its starting to make a lil bit sense. But why do we need to put so many nested quotes especially ' + rgbColor + ' , over here.? Can you break them down for me please.
Jacob Mishkin
23,117 Pointsyou need to review how strings work. you are adding the var rgbColor to the inline style, if the var is inside quotes the JS interpreter will read it as a string not a variable.
Sal Sal
47 PointsJacob, Can u please tell me whats wrong with this code: html += 'style="background-color:"' + rgbColor;