Solution: Automating Your Gruntwork with Javascript- Part 1 (Get Parts)

This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable

by Alex Cowan

HTML

<script src="https://spreadsheets.google.com/feeds/cells/1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g/1/public/values?alt=json-in-script&callback=doData"></script>
<!-- To see the file itself: https://docs.google.com/spreadsheets/d/1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g/ -->

<div id="data" />

<div id="parts-content" />

CSS

.top-bar,
#search-box,
.nav-list li,
.nav-list a {
  background-color: #002D45;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  font-weight: bold;
  font-size: 110%;
  color: #ffffff;
}

.top-bar {
  color: #FFFFFF;
  height: 40px;
  margin: 0px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline;
}

.nav-list li {
  float: left;
}

.nav-list a {
  display: inline;
  padding: 8px;
  text-decoration: none;
}

#search-box {
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
}

#search-controls {
  background-color: #ffffff;
  padding: 15px 15px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 70%;
  display: flex;
  align-items: center;
}

#result-sort {
  display: inline;
  float: left;
}

#filter-parts {
  float: right;
  margin-left: auto;
  margin-right: 0;
  padding-right: 5px;
}

.catalog-part {
  margin: 2px;
  padding: 0px 5px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  display: table-cell;
  position: relative;
}

.catalog-part img {
  height: auto;
  vertical-align: middle;
  width: 100%;
  /*  display: block; */
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f4f4f4;
  display: inline-table;
}

.catalog-part:hover .overlay {
  opacity: .75;
}

p {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  line-height: 1;
  overflow: scroll;
}

.catalog-part p {
  vertical-align: middle;
  text-align: center;
  color: black;
  display: table-cell;
  vertical-align: middle;
  font-size: 80%;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

JavaScript

$(document).ready(function() {
  readData($("#parts-content"));
});

var spData = null;

//This just creates a variable that's prepared for a JSON feed. What's JSON? See: https://en.wikipedia.org/wiki/JSON
function doData(json) {
  spData = json.feed.entry;
}

function readData($partsContent) {

  //these statements initialize the variables below, meaning that it puts them in the baseline state we want before we start doing stuff with them
  const startCol = 2;

  var data = spData;
  var divData = [];
  var row = 0;

  //This is a for loop that iterates through the cells in the Google Sheet, now in a JSON object. What is a for loop? See: https://www.w3schools.com/js/js_loop_for.asp. See also the Codecademy module on Javascript: https://www.codecademy.com/learn/introduction-to-javascript. 
  for (var i = 0; i < data.length; i++) {
    //data[i] indexes a given item in the array of data that has the JSON content. What is an array? See: https://www.w3schools.com/js/js_arrays.asp or check out the Codecademy tutorial above (module on arrays). 
    //These weird strings 'gs$cell' and '$t' are basically Google Sheets-specific markers in the JSON feed. To see where they appear, either pull up the 		URL you see in the HTML or uncomment (and modify as desired) the console statement below. 
    var cell = data[i]["gs$cell"];
    var val = cell["$t"];
    //console.log(val);
    if (cell.col == startCol) {
      drawDiv(divData, $partsContent, (row == 1));
      divData = [];
      row++;
    }
    divData.push(val);
  }
  drawDiv(divData, $partsContent);
}

//Basically, this function takes a parts-worth of data and maps the right parameters onto JQuery functions that actually draw the div.
function drawDiv(divData, parent, isHeader) {
  if (divData == null) return null;
  if (divData.length == 0) return null;
  if (isHeader) return;

  partNum = divData[0];
  imgURL = divData[1];
  mfr = divData[2];
  model = divData[3];
  type = divData[4];
  price = divData[5];
  avail =...