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 jQuery Basics (2014) Creating a Simple Drawing Application Using siblings(), removeClass() and addClass()

Posted by shawn khah
shawn khah
15,082 Points

plese help

On line 10 of app.js, add the class of selected to $(this). Oops! It looks like Task 1 is no longer passing. Get Help Recheck work Go to task One js/app.js index.html

"selected" 1 //Problem: No user interaction causes no change to application 2 //Solution: When user interacts cause changes appropriately 3 var color = $(".selected").css("background-color"); 4 ​ 5 //When clicking on control list items 6 $(".controls li").click(function(){ 7 //Deselect sibling elements 8 $(this).siblings().removeClass("selected"); 9 //Select clicked element 10 $(this).addclass("selected"); 11 //cache current color 12 color = $(this).css("background-color"); 13 }); 14

15 //When new color is pressed 16 //Show color select or hide the color select 17 ​ 18 //When color sliders change 19 //update the new color span 20 ​ 21 //When add color is pressed 22 //Append the color to the controls ul 23 //Select the new color 24 ​ 25 //On mouse events on the canvas 26 //Draw lines 27 ​

js/app.js 
//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");

//When clicking on control list items
$(".controls li").click(function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
   $(this).addclass("selected");
  //cache current color
  color = $(this).css("background-color");
});

//When new color is pressed
  //Show color select or hide the color select

//When color sliders change
  //update the new color span

//When add color is pressed
  //Append the color to the controls ul
  //Select the new color

//On mouse events on the canvas
  //Draw lines
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Simple Drawing Application</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <div class="controls">
        <ul>
            <li class="red selected"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
        </ul>
        <button id="revealColorSelect">New Color</button>
        <div id="colorSelect">
            <span id="newColor"></span>
            <div class="sliders">
                <p>
                    <label for="red">Red</label>
                    <input id="red" name="red" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="green">Green</label>
                    <input id="green" name="green" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="blue">Blue</label>
                    <input id="blue" name="blue" type="range" min=0 max=255 value=0>
                </p>
            </div>
            <div>
            <button id="addNewColor">Add Color</button>
            </div>
        </div>
    </div>
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>    
</body>
</html>

1 Answer

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Shawn,

you almost got it right, the only thing you have to change is write the "C" in addClass in uppercase. You wrote it in lowercase.

This should do it:

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");

//When clicking on control list items
$(".controls li").click(function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});

//When new color is pressed
  //Show color select or hide the color select

//When color sliders change
  //update the new color span

//When add color is pressed
  //Append the color to the controls ul
  //Select the new color

//On mouse events on the canvas
  //Draw lines
shawn khah
shawn khah
15,082 Points

tnx Tobias:)