New JSON Thing

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

<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

var JSONURL = 'https://spreadsheets.google.com/feeds/list/1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g/1/public/basic?alt=json';

//This just creates a variable that's prepared for a JSON feed. What's JSON? See: https://en.wikipedia.org/wiki/JSON

$(document).ready(function() {

  $.ajax({
    url: JSONURL,
    success: function(data) {
      readData(data);
    }
  });

});



function readData(data) {
  //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;
  const marginRow = 0;
  const headerRow = 1;

  var partfeed = data.feed.entry;
  //console.log(partfeed);

  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 < partfeed.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. Uncomment the console statements to see what it's doing.
    var row = partfeed[i].content.$t;
    console.log('the row I have is: ' + row);
    //var val = cell["$t"];
    
    var item = row.split(',')[2];
    console.log('the 2nd test is ' + item);
    
    var value = item.split(':')[1];
    console.log('the 3rd test is ' + value);
    
  }

}

//Basically, this function takes a parts-worth of data and maps the right parameters onto JQuery functions that actually draw the div.
function...