A quick-and-dirty random image picker using HTML5/Javascript/CSS.

Last night my son Selene texted me and asked me if I would make an app for him that would let him keep a list of images and then show him a random image on demand. He is an artist, so this made perfect sense to me. I spent a couple of hours this morning writing what he asked for, and thought that I would share it with you.

This is definitely not intended to be high-quality, production-ready code. It is what the old Microsoft Window NT team would have called a "nice hack". It does what it's supposed to do and does it well, which is all you can ask for sometimes. It is a single HTML file which you can find on my blog.

The page is pure vanilla Javascript, which is so well documented on the vanilla-js.com website :). I use localStorage to store my array of image URLs and I manage my UI state using CSS classes. I cheated a bit by copying some utility functions I'd written for other projects to make life a little easier for me. The inability of localStorage to store and retrieve Javascript objects directly is a perpetual annoyance, but wrapping it in the getSetting and setSetting functions makes it more bearable.

It can be really satisfying to design and build a complete, working application once and a while. What have you built just for fun lately? Let me know in the comments!