Day 22 – Piggy Bank

My website has been quiet for a few days but now I’m back! I wanted to learn how to add draggable elements and decided to make a piggy bank.

JQuery UI has draggable() and droppable() widgets that enable drag and drop functionalities on any DOM element. I made the coins draggable and the piggy bank droppable. Whenever a coin is dropped onto the piggy bank, an audio element that plays a coin on metal sound is added. Instead of setting an existing audio element to play, this method removed the problem of audio occasionally not playing (as seen with my rainbow piano). A coin counter would increment each time. If the number of coins was greater than 6, a different audio clip of coins on coins would play.

An unexpected highlight was learning about Instant Alpha in Preview! I had always used the select tools (square, circle, lasso.. ) to remove image backgrounds. Instant alpha is awesome!
magicI used the rectangular select tool to remove any remaining pixels. Love all the animals!
piggyDay 22 – Piggy Bank


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s