JavaScript30 - Day 16

By Camilla Krag Jensen naxoc |

Day 16 of #javascript30 is having fun with a little bit of math and some CSS.

This lesson creates some text and when you hover over it, the text shadow follows the mouse. I learned some good practices when dealing with math for stuff like this. When calculating x and y position of the mouse on the mousemove event, then use the event.target.offsetLeft and event.target.offsetTop instead of event.offsetX and event.offsetY if the item you are listening on (this) is not the same as event.target.

Destructuring assignment

I already wrote something about the destructuring assignment and I said there that I didn't like the syntax and that I had yet to see a place where it would make sense. I think I found a variation that does now.

This is actually quite elegant, I think. The e is an event.

let { offsetX: x, offsetY: y} = e;

I now have two variables: x and y with the offset values from the event. Maybe I will have to reconsider my dislike of the destructuring assignment