I’m hoping other people will share their projects/mini projects so we can all pick up some hints and tips from various places.
I was messing around on Codepen trying to create the functionality I needed for part of my weather app and ended up creating this little compass spinner.
Wondering if anyone wants to double check the code and tell me if there’s a better way of doing any of it.
Also, I couldn’t get the slider to centralise without manually adjusting the padding - any ideas?
Hey, I like your idea for thread like this.
I did something very similar in my weather app, a directional arrow for the wind - which is how I assume this little project started?
Based on API response instead of an input like yours, so it in reverse, but similar i think?
//CURRENT WIND POPULATE, ROTATE ICON FOR WIND DIRECTION
var direction = response.current.wind_dir;
var icon_dir = {
"N": 0,
"NNE": 22,
"NE": 45,
"ENE": 67,
"E": 90,
"ESE": 112,
"SE": 135,
"SSE": 157,
"S": 180,
"SSW": 202,
"SW": 225,
"WSW": 247,
"W": 270,
"WNW": 292,
"NW": 315,
"NNW": 337
};
$('#windArrow').css({
'transform': 'rotate(' + (icon_dir[direction]) + 'deg)'
});
Ah, I was going to learn something like that for my portfolio items, but I ended up making a slider out of one of my books.
So is that a div behind that moves position on hover or did you work some other magic?
Good one 
1 parent div, with 2 divs inside. The parent div has overflow: hidden and the inner divs have a height: 100%. On hover: set margin of first inner div to - (div height). So the whole div is pushed up, and the div beneath is also pushed up (automatically).
Cool compass. I’m actually making use of a similar technique in my weather app, but with a picture of a windsock instead. You can add some inertia bounce for flavour with transition: transform 1s cubic-bezier(.52,.52,.7,1.3); or something.