Thomas Stoeckert

project/pick-a-picture
A screenshot of a simple website, with black text on a plain white background. The text reads

Nov. 2018

#JavaScript #OneDay #WebDev
A simple one-day website made using JS, which suggested a random movie from my apartment's shared collection

Pick-A-Picture

It's fall of 2018. I'd been living with my new roommates in college for a few months - the three of us (our fourth was never home, and was decidedly against being friendly) had amassed a collection of movies in our common room. A single bookshelf for us all to share. But how do we keep track of whose is whose? And what happens when we move out?

Well, we already had that solved. Before I moved in, I had organized a google sheet so we could coordinate all of our belongings. It started off with kitchen utensils, common-room furniture, etc. But shortly before move-in, we added an extra sheet: Movies.

A screenshot of our dorm's movie inventory spreadsheet. It lists movies and information about each, like the owner, category, and year.

So, we had all this information already prepared, hosted through Google's wonderful document API. What can I do with it?

Well, how about something that randomly recommends a movie that we already have?

That's an easy one-day project.

 

Github Pages was chosen once again, thanks to its simplicity. A static HTML page with some scripts that run at the start of the page, and we've got ourselves a plan. But how do we do this?

Step 1: Get data from Google Sheets

A little finnicky, but simple to do. A web request with the Google Sheets API setting from the Google Developer console, a proper API key, and asking for values in a series of ranges is decidedly easy. The syntax gets a little particular, but it wasn't bad.

Step 2: Parse data from Google Sheets

Also easy. Google Sheets returns a JSON object, so parsing that, splitting each column into its own array, and then picking an index at random from 0 to the length of the array results in exactly what we'd need.

Step 3: Display it.

The biggest challenge of displaying this is what we did with some movie titles. As is responsible for organization, we moved articles "The," "A," to the back of the word. Displaying it like this is a little funky, so peeling it from the back and sticking it to the front is a must. You just have to remove the comma, and it's good to go. From here, it's just sticking the data into the appropriate DOM element in the HTML document. 

Tada! All good to go.

A screenshot of a simple website, with black text on a plain white background. The text reads

Every time you refreshed the page (or clicked "...or maybe not"), the movie would change. Neat!

I printed up a little sign and QR code, stuck it to the bookshelf, and had completed this project in just a few hours.

 

 

Did it solve the problem of knowing which movie to watch?

 

Absolutely not.

 

 

If you get a bunch of recommendations over and over again, you're just going to keep re-rolling until you actually think of something you want. If that counts as a success, then yay! Otherwise, no. But it wasn't really a problem that needed solving. Just a fun little exercise in code.

Thanks to changes to Google's API, it is currently broken. But otherwise, it is available at https://thomasstoeckert.github.io/pick-a-picture, and the sourcecode is available at https://github.com/thomasstoeckert/pick-a-picture.