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

Posted by shyarkhalil
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points

Hello, guys! Could you please help me understand the following methods:

In jQuery basics course with Andrew Chalkley – Creating a Simple Drawing Application - platform 2 video – how to show color select or hide the color select, he shows the following:

$("#revealColorSelect").click(function () { colorChange(); $("#colorSelect").toggle(); });

I get this logic very well: when the button of New Color is pressed, the .toggle() method simply displays or hides the matched element which is in this case colorSelect.

Then he changes the background color of the newColor span. by adding .css("background-color", "value") method.

My questions are:

  1. Why does he put var r = $("#red").val(), var g = $("#green").val() and var b = $("#blue").val() inside colorChange function?

  2. When he wants to change the background color of NewColor, why does he use the rgb as a value of background color?

  3. Why does he call colorChange(); function inside $("#revealColorSelect").click() function?

  4. I don't understand the logic behind this method: $("input[type=range]").change(colorChange);

  5. Why when I move the range of color from 0 to 255 the color changes - I would like to know the logic behind.

Sorry but I am really confused and I'm the beginner. Shouldn’t there be some other course to start with prior to this one to understand the whole picture?

Thanks a lot for your help! Much appreciated!

This is a link of the mentioned video: https://teamtreehouse.com/library/jquery-basics/creating-a-simple-drawing-application/perform-part-2

2 Answers

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Other course to start with prior to this one:

These courses are listed as prerequisites for the course you are taking (in the Teacher's Notes of the first video);

shyarkhalil
.a{fill-rule:evenodd;}techdegree seal-36
shyarkhalil
Front End Web Development Techdegree Graduate 17,762 Points

Thanks Steven Parker for these links but I have already seen all of these videos...

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

I'll try to clear things up.

    1. Why does he put var r = $("#red").val(), var g = $("#green").val() and var b = $("#blue").val() inside colorChange function?

Those variables represent the position of the color choosing sliders (range inputs). This code loads each variable with the value of the current slider position.

    2. When he wants to change the background color of NewColor, why does he use the rgb as a value of background color?

The rgb function converts the separate values for each color component into a combined color, which can then be displayed in the background of the sample area (the newColor span).

    3. Why does he call colorChange(); function inside $("#revealColorSelect").click() function?

This makes sure that the color being shown in the sample area is the correct one for the current slider positions.

    4. I don't understand the logic behind this method: $("input[type=range]").change(colorChange);

This establishes the function to be called as the event handler every time one of the range sliders is moved. This keeps the sample area color matched to what has been chosen by the sliders. For a fun modification you might try substituting this line:

$("input[type=range]").on("input", colorChange);

This will cause the sample area color to be updated while you move the slider instead of after you finish moving it.

    5. Why when I move the range of color from 0 to 255 the color changes - I would like to know the logic behind.

As I said, the event handler function is called any time you move one of the sliders. The handler function takes the values of the sliders, converts them into a color, and sets that color as the background of the sample area.