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 PointsCan someone please break down the html variable.? I am completely loose it over here.
Can someone please breakdown the HTML variable for me.? How does those so many quotations works.?
5 Answers
Jennifer Nordell
Treehouse TeacherHi there! I received your request for assistance 
html variable starts as an empty string. This is important because later we're going to concatenate onto it. I'm looking at your profile and I see no points in HTML or CSS so I'm wondering if it might be a good idea to review these topics since that is what is being written to the DOM.
But let's take a look. If we were writing this in a html file not using JavaScript we would write it this way (I'm going to pick a random color here):
<div style="background-color: rgb(110, 38, 21)"></div>
The problem here is that the thing that is written to the DOM needs to have quotation marks too. But we generally use quotation marks in JavaScript to indicate a string. So how do we get quotation marks into our string without ending the string?
First, let's take a look at the rgbColor:
rgbColor = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
//Assuming we generated the numbers 110, 38 and 21 for our red, green and blue values
// The ending string for rgbColor will be rgb(110, 38, 21)
// Note how you can see the concatenation of the parentheses and commas and spaces in the above line
And now that we have our rgbColor in place, let's take a look at the creation of the div element. Here we're taking our empty string and building onto it with our div element.
html += '<div style= "background-color:' + rgbColor + '"></div>';
And let's break it down step by step. The beginning of the string literals begin with a single quote because we need a double quote to be part of our string and not act as beginning and ends of our string. The first part of the string is <div style="background-color:. Then we concatenate the value of rgbColor which we already said is rgb(110, 38, 21). At this point, our string is <div style="background-color: rgb(110, 38, 21). And now we start the ending of our string which also must contain a double quotes so we concatenate "></div>. Our final html string would be the same as if we writing <div style="background-color: rgb(110, 38, 21)"></div>. However, this wouldn't be nearly as fun if it had the hard-coded numbers in there.
Hope this helps clarify things!
Rhys Kearns
4,976 PointsThat is simply an empty string :)
Sal Sal
47 PointsThankYou Jennifer,
Can you please tell me whats wrong with the below code:
html += 'style="background-color:"' + rgbColor;
P.S: I cannot preview the colors in my web browser even if I put the code the same as done in the tutorial.Can you please help me out why is that so.?
Jennifer Nordell
Treehouse TeacherThis would be easier to help you troubleshoot if I could see a "snapshot" of your workspace. You can find instructions on how to make one here. When you've created the snapshot, you can link it here. This will allow me to fork your workspace and take a look around. I don't see anything immediately incorrect with that line, so I'll need to see all of it to help you further
Sal Sal
47 Points
Jennifer Nordell
Treehouse TeacherWhile the code you listed above is not syntactically incorrect, it does not produce the results you wish. I had thought that maybe you had started by adding the div first and then concatenating this and then concatenating the closing div, but this is not the case. The line you're missing is as I stated above:
html += '<div style= "background-color:' + rgbColor + '"></div>';
That being said, adding this line will not result in you having anything on your page. You have (for some reason) removed the css folder, file, and link to the CSS in your code. You will need to replace these for anything to render. You can grab the CSS folder and file from the "Downloads" section to the right of the "Teacher's Notes" and then upload them to your workspace. This will not render anything without those in place.
A <div> element by itself has no inherent size, which means it will not render at all until given a size. This size and styling is being provided by the CSS file which has been removed and unlinked.
Hope this helps!
pat barosy
6,759 PointsWhy is there a single quote then a double quote at the end of the opening div tag? I thought that the double quote would precede the single quote at the end of the string. Can you explain why this isn't the case?
Thank you
Jennifer Nordell
Treehouse Teacherpat barosy Hi there! Because the double quotation marks are part of the string to be concatenated. They are present in the resulting string and are not the ending or beginning of the string. Those are your single quotation marks.
The first part of the string '<div style= "background-color:'
concatenated with a variable: <div style= "background-color:' + rgbColor
which is then concatenated with a third string:'<div style= "background-color:' + rgbColor + '"></div>';
The two strings start`with a single quote an end with a single quote, because we want our string to contain double quotes. If you didn't start with a single quote and end with a single quote, it would think that the double quotes are the beginning and ending of the strings instead of part of the string.
