To Do List

What’s it?

It’s a device I made/ programmed to display what movies I need to check out, chores I’m neglecting, what side projects I’ve ginned up to keep myself entertained.

Wanna see it running?

Of course you do!

Uh why?

Glen you fiendishly handsome devil, why do you need something like this? Well my flattering reader I do occasionally find myself watching a season of Rick & Morty that I’ve seen so many times I could probably rattle off the lines easier than the pledge of allegiance while guiltily thinking “aren’t there about a million things I want to check out right now, why can’t I remember a single one of them?”. I built this machine to stop myself from aimlessly slouching around on the couch… and because it looks super fly in my living room.

How’s it work (without mentioning a lick of actual code)?

Finer details can be found here in the repo

A bit of code asks a Google sheet of mine for its contents
Google feeds back the spreadsheet data to the code
Another part of the code spits out the spreadsheet data as a neat little website
Rinse and repeat every 15 minutes

Heavy-duty design or coding details

This is my testing ground for interesting layouts, new font usage, and seeing if I can make certain colors work together so the overall theme is “whatever looks cool”. If you refresh the list, a new theme will pop up. At the point in time I’m writing this, there are 3 different themes it cycles through on refresh.

Case design

That’s a hand-drawn, laser engraved chunk of wood covering the front so buckle up kiddo, it’s a bit of a story.

Why “Calling You Home”?

So my brother and I were chilling out (possibly watching Rick & Morty again) and he remarked that my house had good vibes out the yin-yang… well what he actually said was that my house felt like a song by Seven Lions titled “Calling You Home” which he played for me and lemme tell ya, having the apartment I’ve put together compared to that song was one of the highest compliments I’ve ever been given.

After hearing it, I knew I would have to work that song into my home somewhere and being that I was already fixated on building a cool case for my motivational gizmo, I had a good idea of where it would end up. The only question left was how to make something which felt like that song and the case design you see is my answer.

Laser engraving

Did the engraving myself, I totally went out and got trained on how to work a big ol’ laser at a maker space called TC Maker (shout out!) in the twin cities.

How’d I code this beast?

The easiest way to explain is to check out the repo, in specific this file is where the party’s at.

The code work was probably the easiest part of this project as most of what I consider the tricky stuff was grabbed from an earlier project of mine so most of the focus was on making the code as easy to read as possible so the main custom.js file is TRICKED OUT with comments on what each line is doing.

Walk me through the steps, this time nerd it up!

You asked for it…

Make call to Sheets API
Wipe out any pre-existing cards
Assign variable to JSON response length (var y)
Create a card for each data set
Fill the card with the corresponding data in an unordered list
Do the whole song and dance again every 15 minutes
Swap theme every 8 hours or so by randomly selecting a class from an array
Remove old theme class
Apply new theme class

Does clicking a link to see the repo seem exhausing?

Gotcha covered, fam!

//Wrap everything in a function because... well them's the rules!
function glenToDo() {
  //Make a call to the mighty Google Sheets API and pray for a response
  /*The way this call works is really cool! You can check out the details of what each bit of the URL-thing below is doing at: https://developers.google.com/sheets/api/guides/concepts 
  Sidenote: if you copy + paste the URL below into your browser you can see the array in a totally useless but kinda interesting way (no viruses, pinky swear!)*/
  var json = $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/1ZDI3TOYKbliJxHWt76d_-ay6sz0e2OpA6LB63vuKKlk/values/'To Do'/?key=AIzaSyA1T4CcA8nnxMfxShN7Blrinr9y7LL5CzY", function(json) {
  
  //Reset card values on each run of the function
  $('.card').remove();
    //Response granted, no need to light any more incense!
    /*Got the whole JSON object from the API call in a single variable called 'json'. Below we are setting up some ground rules for what I'll be keen to know about going forward, in specific I'll be needing to know how many rows are in the sheet which I get from json.values.length so I hook that value to the variable 'y' */
    for (var x = 0, y = json.values.length; x < y; x++) {
      //Now we iterate things based on the idea we should do something based on the number of rows
      for (var i = 0; i < y; i++) {
        /*Below we are setting one array "coordinate" to change each time we run this little loop (variable i is saying switch which sub-array is being looked at ever iteration but always look at the same value within the new sub-array), and another that swaps each time we do a larger loop rotation (variable x is saying to look at a new value within each sub-array we cycle through)*/
        var valList = json.values[i][x];
        //Loop the JSON values till you run out of stuff to spit out but don't add any HTML if you're just adding blank HTML elements
        if (valList != '' && valList != null && valList != ' ') {
          //On first loop iteration, make a new card with an unordered list in it
          if (i == 1) {
            $('.card-columns').append('<div class="card '+ valList +'"><ul></ul></div>');
            //Make the first value an H2 header
            $('.card:last-of-type ul').append('<h2>' + valList + '</h2>');
          } else {
            //Make all values other than the first in a column basic list objects
            $('.card:last-of-type ul').append('<li>' + valList + '</li>');
          }
        }
      }
    }
  });
}
//Equivalent to hitting the play button on my big ol' music box!
glenToDo();
//Refresh the page every 15 minutes
setInterval(glenToDo, 900*1000);
//Just one look n' feel is SO LAME-- this segment gives our script a sudden urge to switch it up once every 8 hours
function skinToggle(){
//Nix the old class running the show before assuming our fresh new look
  $("body").removeClass();
//A cleverly named variable array that alludes to the array position right in the name of each variable
var classes = ["one", "two", "four"];
//Literally saying each object defined as a body will have this function performed on it, probably not an idea statement but it does the trick
    $("body").each(function(){
      //Finally the good bit where we pick a class at random from our array and stick it on the body object(s)
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
    
}
//Trigger function on main script load
skinToggle();
//Every 8 hours switch look n' feel
setInterval(skinToggle, 288*10000);

//Wrap everything in a function because... well them's the rules!

function glenToDo() {

//Make a call to the mighty Google Sheets API and pray for a response

/*The way this call works is really cool! You can check out the details of what each bit of the URL-thing below is doing at: https://developers.google.com/sheets/api/guides/concepts

Sidenote: if you copy + paste the URL below into your browser you can see the array in a totally useless but kinda interesting way (no viruses, pinky swear!)*/

var json = $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/1ZDI3TOYKbliJxHWt76d_-ay6sz0e2OpA6LB63vuKKlk/values/'To Do'/?key=AIzaSyA1T4CcA8nnxMfxShN7Blrinr9y7LL5CzY", function(json) {

//Reset card values on each run of the function

$('.card').remove();

//Response granted, no need to light any more incense!

/*Got the whole JSON object from the API call in a single variable called 'json'. Below we are setting up some ground rules for what I'll be keen to know about going forward, in specific I'll be needing to know how many rows are in the sheet which I get from json.values.length so I hook that value to the variable 'y' */

for (var x = 0, y = json.values.length; x < y; x++) {

//Now we iterate things based on the idea we should do something based on the number of rows

for (var i = 0; i < y; i++) {

/*Below we are setting one array "coordinate" to change each time we run this little loop (variable i is saying switch which sub-array is being looked at ever iteration but always look at the same value within the new sub-array), and another that swaps each time we do a larger loop rotation (variable x is saying to look at a new value within each sub-array we cycle through)*/

var valList = json.values[i][x];

//Loop the JSON values till you run out of stuff to spit out but don't add any HTML if you're just adding blank HTML elements

if (valList != '' && valList != null && valList != ' ') {

//On first loop iteration, make a new card with an unordered list in it

if (i == 1) {

$('.card-columns').append('<div class="card '+ valList +'"><ul></ul></div>');

//Make the first value an H2 header

$('.card:last-of-type ul').append('<h2>' + valList + '</h2>');

} else {

//Make all values other than the first in a column basic list objects

$('.card:last-of-type ul').append('<li>' + valList + '</li>');

}

});

}

//Equivalent to hitting the play button on my big ol' music box!

glenToDo();

//Refresh the page every 15 minutes

setInterval(glenToDo, 900*1000);

//Just one look n' feel is SO LAME-- this segment gives our script a sudden urge to switch it up once every 8 hours

function skinToggle(){

//Nix the old class running the show before assuming our fresh new look

$("body").removeClass();

//A cleverly named variable array that alludes to the array position right in the name of each variable

var classes = ["one", "two", "four"];

//Literally saying each object defined as a body will have this function performed on it, probably not an idea statement but it does the trick

$("body").each(function(){

//Finally the good bit where we pick a class at random from our array and stick it on the body object(s)

$(this).addClass(classes[~~(Math.random()*classes.length)]);

});

}

//Trigger function on main script load

skinToggle();

//Every 8 hours switch look n' feel

setInterval(skinToggle, 288*10000);

TL;DR

I made a super techy and slick looking to-do list