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
Sargis Aleksanyan
2,329 PointsHow rgb and Math.floor(Math.random()) are connected ? in which lesson I can find more information about it ? thanks
red= Math.floor(Math.random()*256); green=Math.floor(Math.random()*256); blue=Math.floor(Math.random()*256); rgbColor='rgb('+red+ ','+green +','+blue+')'
4 Answers
Ryan Field
Courses Plus Student 21,242 PointsThey're not connected per se, but since an RGB value is simply made up of an array of three numbers ranging from 0 to 255, you can generate a random number in that range for each and output it as: rgb([random number 1], [random number 2], [random number 3]) and it will create a colour.
John Breslin
16,963 PointsThe function rbg takes a red, blue, and green value between 0 and 255 and combines them into a final color. 255 because it's stored in a byte, and 256 is the range of values that can be represented with a byte, traditionally. The random function is picking three random floats between 0 and 256, and floor is rounding down the remainder to an integer between 0-255. Then, it uses the these random numbers as random r, g, and b values, creating a random color. Hope that somewhat makes sense.
Iliya Narsiya
3,387 Pointswhy add а comma between each colors ? rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; why the code does not work that way? rgbColor = 'rgb(' + red + green + blue ')';
John Breslin
16,963 PointsIt's making a string, actually, concatenating together. 'rgb(' plus the variable red plus ',' plus green plus ',' plus blue plus ')'. When finished it looks like 'rgb(150,255,0)'.
Iliya Narsiya
3,387 PointsWhy put quotation marks here? html += '<div style="background-color:' + rgbColor + '"></div>';
John Breslin
16,963 PointsTwo quotation marks with nothing in between is an empty string. Adding it would be done just to make the variable a string.
Ognjen Jevremovic
13,028 PointsMore in depth explanation: I think the answer John provided is really top notch and it's really easy to understand. So thanks John for providing so indepth answer! To answer your second question; if you remember you can declare your CSS (or rather style your elements on a web page) in one of 3 ways: either by using inline styling (inline CSS declared by using the style attribute inside of an element), internal linking (by writting your CSS properties and values in between the opening and closing <style></style> tags) or by using the external linking (by creating a new CSS document and linking it to your HTML document with a <link> tag which needs to have both rel="" and href="" attributes declared). *Note, using external CSS linking is the best way of styling your HTML elements on a web page for so many reasons. I think both Guil and Nick explained the benefits of using the external linking in the CSS Basics course (thought by Guil) and in How to Make a website course (runned by Nick). Long story short, while declaring an attribute for any html element (like a <div> element in this example) you need to add either double quote or a single quote after the equal sign; meaning the correct syntaxt of a HTML element that holds the attribute that has a value declared, is as follows:
<div style=""></div> <!-- used for inline CSS or -->
<link rel="" href=""> <!-- used for external CSS linking -->
TLDR That's just the syntax of HTML; each attribute that holds a value needs to be declared with either double quotes or a single quotes wrapping the value of an attrbute, declared after the equal sign that follows the attribute.
P.S. Sorry for my formating, I'm still not aware how to use those containers for my code
Cheers!