Persistent Check Off List

Origin Story

We’re doing the Photography is Magic course again this semester. One thing we do the first week is go around and the room and students say a word that has something to do with their major, life etc. We also name some cliche image types from Instagram. We end up with a large list of words that form the basis of a photography scavenger hunt. We ended up with 67 words this time around. This time around I decided I’d try to do all the words by the next class. I started another account and began taking the pictures. I quickly realized I couldn’t easily remember what I’d shot and wanted a quick reference for words I needed and to keep track of what I’d already done.

Try it out here if you’d like.

Making it

Since the words were already in Google Sheets I went with the typical Sheets to JSON pattern. I’ve covered that way too many times on this site already.

The more interesting part was using local storageJeff had advised using this rather than cookies for something else I did earlier and I remembered it this time around. to keep the value of the checkboxes. I found an article on it and was able to repurpose that code in a few minutes to do what I needed.

const url = 'https://spreadsheets.google.com/feeds/list/1HtcKr_6UiZ2HIscaIfEq7Dz1Clo2L924crEkRdDr9Ko/2/public/values?alt=json';//get sheet data

var destination = document.getElementById('theList');

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
  let data = myJson.feed.entry;
  data.forEach(function(element){
      var word = element.title.$t;
      makeWords(word, destination);//make the HTML
    });
  })
.then(function(){
  var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    $checkboxes = $("#theList :checkbox");
//watch the boxes
$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });
  //store the box values
  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load check the boxes that need checking
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

})


//FUNCTIONS TO MAKE THE HTML

function makeWords(word,destination){
  var node = document.createElement("LI");                 // Create li
   makeCheckbox(word,node);
  destination.appendChild(node);     // Append 
<li> to
<ul> 
}

function makeCheckbox(word,node){
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.name = word;
  checkbox.value = word;
  checkbox.id = word.replace(/\s+/g, '-').toLowerCase();

  var label = document.createElement('label')
  label.htmlFor = word;
  label.appendChild(document.createTextNode(word));
  node.appendChild(checkbox);
  node.appendChild(label);

}

//storage from https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/

View this post on Instagram

A post shared by Tom Phomag (@tom4phomag)