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

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:

rgb(0,0,0)
//or
rgb(53,234,23)
//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! :)