Drawing application not working for me. Hoping another set of eyes can help catch what I'm missing.

I can't get any of the feature's from the drawing canvas to work. I've reviewed the exercise a second time and corrected one error that I noticed but it still doesn't work.

1. Can't select any of the default red, blue or yellow buttons.

2. Can't draw on the canvas.

3. The color selector doesn't work. The "New Color" button won't toggle to reveal the RGB sliders.

4. Which means I can't use the "Add Color" feature.

Here is my app.js code.

//Problem: No user interaction causes no change to application //Solution: When user interacts cause changes appropriately var color = $(".selected").css("background-color"); var $canvas = $("canvas"); var context = $canvas[0].getContext("2d"); var lastEvent; var mouseDown = false;

//When clicking on control list items $(".controls").on ("click", "li", (function(){ //Deselect sibling elements $(this).siblings().removeClass("selected"); //Select clicked elements $(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 $canvas.mousedown(function(e){ lastEvent = e; mouseDown = true; }).mousemove(function(e){ //Draw lines if(mouseDown) { context.beginPath(); context.moveTo(lastEvent.offsetX, lastEvent.offsetY); context.lineTo(e.offsetX, e.offsetY); context.strokeStyle = color; context.stroke(); lastEvent = e; } }).mouseup(function(){ mouseDown = false; }).mouseleave(function(){ $canvas.mouseup(); });