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
James Delaplain
5,872 PointsWhat Do I have wrong, the New Color Box is blank, thus any rgb slider pick is only that blank color (dark grey actually)
//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").on("click", function() {
//Deselect siblings elements
$(this).siblings().removeClass("selected"); //Select clicked element $(this).addClass("selected"); //Cache current color color = $(this).css("background-color"); });
//When "New Color" is pressed
$("#revealColorSelect").click(function(){ //Show color select or hide the color select changeColor(); $("#colorSelect").toggle(); });
//Update the new color span
function changeColor() {
var r = $("#red").val();
var g = $("#green").val();
var b = $("#blue").val();
$("newColor").css("background-color", "rgb(" + r + ", " + g +", " + b + ")");
}
//When color sliders change
$("input[type=range]").change(changeColor);
//When add color is pressed
$("#addNewColor").click(function(){
//Append the color to the controls ul
var $newColor = $("<li></li>"); $newColor.css("background-color", $("#newColor").css("background-color")); $(".controls ul").append($newColor);
//Select the new color
$newColor.click(); });
//On mouse events on the canvas //Draw lines
James Delaplain
5,872 PointsRelevant CSS if needed: } .controls { min-height: 60px; margin: 0 auto; width: 600px; border-radius: 5px; overflow: hidden; } ul { list-style:none; margin: 0; float: left; padding: 10px 0 20px; width: 100%; text-align: center; }
ul li, #newColor { display:block; height: 54px; width: 54px; border-radius: 60px; cursor: pointer; border: 0; box-shadow: 0 3px 0 0 #222; }
ul li { display:inline-block ; margin: 0 5px 10px; }
.red { background: #fc4c4f; }
.blue { background: #4fa3fc; }
.yellow { background: #ECD13F; }
.selected { border: 7px solid #fff; width: 40px; height: 40px; } button { background: #68B25B; box-shadow: 0 3px 0 0 #6A845F; color: #fff; outline: none; cursor: pointer; text-shadow: 0 1px #6A845F; display: block; font-size: 16px; line-height: 40px; }
revealColorSelect {
border: none;
border-radius: 5px;
margin: 10px auto;
padding: 5px 20px;
width: 160px;
}
/* New Color Palette */
colorSelect {
background: #fff;
border-radius: 5px;
clear: both;
margin: 20px auto 0;
padding: 10px;
width: 305px;
position: relative;
display:none;
}
colorSelect:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
newColor {
width: 80px;
height: 80px;
border-radius: 3px;
box-shadow: none;
float: left;
border: none;
margin: 10px 20px 20px 10px;
}
1 Answer
Kristopher Van Sant
Courses Plus Student 18,830 PointsCheck your var $newColor where you're appending the color to the controls ul. You're missing the li tags that go between the quotes
var $newColor = $("<li></li>");
James Delaplain
5,872 PointsGoodness, yes the Lists It was in and back and forth process Trying to figure out what it was. Finally using the left of my brain a little more I saw the id # for newColor wasn't there! Thank you for your reply Kristopher!
Kristopher Van Sant
Courses Plus Student 18,830 PointsHaha, yup it's easy to get lost in our code! Glad you were able to figure it all out! :)
James Delaplain
5,872 PointsJames Delaplain
5,872 PointsHTML if thats needed: <!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="http://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>