Automating Your Gruntwork w/ JS- Part 1 (Plain JS)

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

//This is the URL of the Google sheet with a 'callback function' with a response we'll pare down to JSON. What's JSON? See: https://en.wikipedia.org/wiki/JSON
//If you want to see the URL of the sheet itself, copy this into your browser: https://docs.google.com/spreadsheets/d/1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g/.

sheetIndex = 0
sheetsFileID = "1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g"

var SHEETSRESPONSE = `https://docs.google.com/spreadsheets/d/${sheetsFileID}/gviz/tq?tqx=out:json&tq&gid=${sheetIndex}`

//This waits until the baseline page is loaded and then gets the JSON feed, and as long as it doesn't error, calls the readdata function to start taking that feed and drawing the HVAC parts. The way it does this is through 'AJAX', which stands for 'Asynchronous JavaScript And XML'. This allows you to go and get data from a server/service (like Google Sheets) after the page has loaded.

/*
WHAT IS THE 'FETCH' FUNCTION AND WHY IS IT HERE?
The 'fech' function below is doing a kind of job that's probably new to you: making a request, waiting for a response, and then (and only then) executing some other code. While this isn't the case in all coding languages, JS is designed to always execute as much of itself as it can vs. run line by line ('synchronously'). This matters here because the Google Sheet respnose will usually arrive well after the rest of the JS code would execute. If it did that, it would fail in weird ways, basically saying "I don't know what you're talking about w/ this Google Sheet response". So, fetch waits for a response and then executes what we ask it, which you can see in the various '.then' statements. Another key part of fetch's plumbing is that the variable you're seeing (ex: 'response') as the first input in the .then statements is the output of the last statement. More on fetch here: https://www.w3schools.com/jsref/api_fetch.asp. 
 */

/*
 WHAT DOES => MEAN?
 This is a shorthand that works well for this particular chunk of...