Persistent Check Off List

Screenshot of the photography scavenger hunt list with a few items highlighted in green and checked.

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

#phomag_hunt #nostalgia

A post shared by Tom Phomag (@tom4phomag) on

 

Comments on this post

  1. Cog.Dog said on August 26, 2019 at 9:31 am

    Your timing is prescient. I’m about to develop (hopefully) a light HTML/js only site that can be used to show what’s new in content from a WP site (via API) and I want to make it so a visitor can use checkboxes to indicate categories they want to see- the local storage is ideal to be free of smelly cookies. Thanks for cutting my dev time!

    • Tom Woodward said on August 26, 2019 at 10:35 am

      Beautiful. Nothing makes me happier than helping out a person who has done so much to help me (and others).

      Plus prescience is always awesome.

  2. John said on August 31, 2019 at 4:21 pm

    Hi Tom,
    Very cool. I did something similar with local storage for a DS106 photoblitz page
    https://johnjohnston.info/photoblitzer/
    I think I got the list of challenges from Alan