A Place to share mini personal projects for code reviews?

#1

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?

3 Likes
#2

Nice! Maybe add this transition: transform 2s; to .compassArrow for a spinning effect.

#3

Great idea Ben, thanks!

#4

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?

My version

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)'
    });
#5

I made a Windows 8 tile (sort of) a few months ago.

#6

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 :thumbsup:

#7

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).

2 Likes
#8

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.

1 Like
#9

Good effort, thanks for sharing!