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

Kenn Hyatt
Kenn Hyatt
9,683 Points
Posted by Kenn Hyatt
Kenn Hyatt
9,683 Points

A review of a personal project I'm working on

Enclosed here is a personal project of mine that is helping me improve my Jquery skills.

The script I have written works, however, I am sure there is a better way to write it. I am especially concerned about the series of add and remove classes I have in the hover states.

I want to be able to write one line for adding the classes and one for removing classes, and using variables to differentiating between the buttons.

The project is very straight forward and am looking for open, honest critique

http://codepen.io/comfychair/pen/vERqep

Thanks

4 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Kenn,

Thanks for sharing. I made some changes I think you'll like. Below is the entire JS file. Here is the forked Codepen.

var box = document.getElementsByClassName("navInfo");

$("button").mouseenter(function(e) {
    $(box).append(e.target.id);
    $('.navInfo').wrapInner( $("<p></p>")); 
    $(box).addClass("glyphicon glyphicon-"+e.target.id);
}).mouseleave(function(e) {
  $('.row > .navInfo > p').detach();
  $(box).removeClass("glyphicon glyphicon-"+e.target.id);  
});

Unfortunately, the glyphicon for sign no longer works because it's class name is glyphicon-info-sign. I'll leave that up to you how to fix this. There is likely an even better way to go about this - but, sub-optimal working code is always better than optimized, broken code (though, I guess this is now broken code with sign no longer working!)

I hope this helps in some way.

Cheers!

Kenn Hyatt
Kenn Hyatt
9,683 Points
Kenn Hyatt
Kenn Hyatt
9,683 Points

Good Show Robert!

That was exactly what I was looking for! I keep seeing people use 'e' as variable passed into that function, what does it stand for in this situation? Is that what a 'this' keyword would refer to if I were using it?

Again, Thanks Robert, this is awesome, I can learn much from this

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

The e in this context is information about the event that is being passed along and made available to your function call-back. Some developers call it evt or literally event or me for mouse event, and you can call methods and get property values from it.

I had to fix the sign bug, so here is the updated Codepen.

var box = document.getElementsByClassName("navInfo");
var elementId = "";

$("button").mouseenter(function(e) {
    elementId = e.target.id;
    if (elementId == "sign") {
      elementId = "info-sign";
    }
    $(box).append(e.target.id);
    $('.navInfo').wrapInner( $("<p></p>")); 
    $(box).addClass("glyphicon glyphicon-"+elementId);
}).mouseleave(function(e) {
  $('.row > .navInfo > p').detach();
  $(box).removeClass("glyphicon glyphicon-"+elementId);  
});
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I made one final change to the Codepen script, and that is to console.log(e) on the mouseenter event. If you want to see what all information is available from the e variable, open up the dev console (F12 on windows) and make sure console tab is open - mouse over a box, and you'll see an expandable n.Event appear. This is actually the first time I've done this, and I'm amazed by how much information is available is that event object.

Cheers!

Kenn Hyatt
Kenn Hyatt
9,683 Points
Kenn Hyatt
Kenn Hyatt
9,683 Points

Thats perfect Robert,

A lot of great information here I cant imagine the code getting any cleaner than this!

regards,

Kenn

Kenn Hyatt
Kenn Hyatt
9,683 Points
Kenn Hyatt
Kenn Hyatt
9,683 Points

For anyone still following this project, I've made some more changes:

http://codepen.io/comfychair/pen/vERqep

I have noticed a minor intermittent problem. It seems like the hover state for the buttons on the right hand side randomly does not want to work. Seeing as how its random, I don't know how to start troubleshoot the issue. It seems to me it may have something to do with the browser not being quick enough? Maybe I need a wait timer on it?