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!
I used the rectangular select tool to remove any remaining pixels. Love all the animals!
Day 22 – Piggy Bank