Automating Your Gruntwork with Javascript- Part 2 (Integration w/ Plain JS)

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 class="top-bar">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Parts</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Help</a></li>
  </ul>

  <div id="search-box">
    <input type="text" name="parts-search" placeholder="Mfg., Model, or Part Number" size=30>
  </div>
</div>

<div id="search-controls">
  <div id="result-sort">
    Sort By
    <select>
					<option value="None">Popularity</option>
					<option value="Acme">Price</option>
					<option value="Bacme">Manufacturer</option>
				</select>
  </div>
  <div id="filter-parts">
    Search By
    <select id="ddMfr">
				<option value="All">Manufacturer</option>
				<option value="Acme">Acme</option>
				<option value="Bacme">Bacme</option>
				<option value="Cacme">Cacme</option>
				<option value="Dacme">Dacme</option>
			</select>
    <select id="ddModel">
				<option value="All">Model</option>
				<option value="TooCool">TooCool</option>
				<option value="TooHot">TooHot</option>
				<option value="JustRight">JustRight</option>
				<option value="Coolerator">Coolerator</option>
			</select>
    <select>
				<option value="All">Type</option>
				<option value="Sniggler">Sniggler</option>
				<option value="Wiggler">Wiggler</option>
				<option value="Jiggler">Jiggler</option>
				<option value="Tiggler">Tiggler</option>
			</select>
  </div>
  <button type="button" id='go-btn'>Go</button>
</div>

<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;
  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;
}

#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%;
}

.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. 

/*This is probably your first time seeing options/settings supplied to a JS function with key:value pairs. 	
 */

document.addEventListener('DOMContentLoaded', function () {
  fetch(SHEETSRESPONSE)
  	//this converts whatever it gets back into text, which is what we're assuming we'll work with in the code that follows
    .then(response => response.text())
    //this passes whatever came from the prior line to the prepData function, which makes some updates to it and then makes sure it's in a format called 'JSON'
    .then(textResponse => prepData(textResponse))
    //this then passes that data to a function that manages creating the div's
    .then(partFeed => loadParts(partFeed))
    //BUT if this errors, this line catches that and posts it to the console
    .catch(error => console.error('Fetch error:', error));
});

function prepData(data) {
  //response has a junk line at top (/*O_o*/), so we split it on the newline character and get the second row, [1]
  data = data.split("\n");
  //this is a kind of hacky solution to extracting the JSON body from the sheets...