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

Prakhar Patwa
Prakhar Patwa
11,260 Points

related js. confusing in the code html += '<div style="background-color:' + rgbColor + '"></div>';

in efactoring challenge 1st one line of js code is : html += '<div style="background-color:' + rgbColor + '"></div>'; ...................... background-color should be double quote. i also did not understand the full line please explain it word by word. thank you.

1 Answer

Hey Prakhar,

When you're concatenating strings and inserting data that is used with other strings, you'll sometimes see things that don't look quite clear, as I know you just found out. But I'll help you go over this line:

html += '<div style="background-color:' + rgbColor + '"></div>';

First, you are creating a string that contains a div element. Now, notice we used single quotes for the outside strings. This is important because each time we want to break apart the string we need to end and begin with the same string.

So, we then add a style attribute to the div. Now, attributes can be enclosed in either double or single quotes. We should use double quotes, as we did, because it doesn't clash with the single quote used for the actual string. And then we added the property background-color and a colon inside the quote. So, this is one string:

'<div style="background-color:'

We stopped at the colon because the next value we're using is rgbColor which is a variable that will insert an rgb color command like this with a random set of colors:

//etc. etc.

So, we add that first string and rgbColor together and we get:

'<div style="background-color:' + rgbColor

And in HTML would look very similar to this (with an example RGB value):

<div style="background-color:rgb(0,0,0)

Notice there's a lot missing? Well, we need to end the style attribute, put the ending > sign on there, and then end the div tag. We need to do that in a new string.

Again, we use the single quote for both ends of it. And we immediately put a double quote after it so that it will concatenate with what we have before and close off the style tag!

'<div style="background-color:' + rgbColor + '"></div>'

Which now looks like almost like this in HTML:

<div style="background-color:rgb(0,0,0)"></div>

And there you have it! :)

Prakhar Patwa
Prakhar Patwa
11,260 Points

thnkx again Marcus for helping me out. i got it very clearly.

Happy to help, Prakhar. :) Happy Coding!