Static: HVAC Part Detail Page

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/1Qd7ePN4xlKQAGD0ddxP03gwcVfJP3qtqXd8T4cCeNa4/1/public/values?alt=json-in-script&callback=doData"></script>

<div class="welcome_bar">
  <center>Darden Registrar Class Selection</center>
</div>

<div id="search_controls" align="right">
  <select>
    <option value="All"> Fliter by Class Type</option>
    <option value="Finance"> Finance</option>
    <option value="Marketing"> Marketing</option>
    <option value="Leadership"> Leadership</option>
  </select>
  <button type="button" id="GO_BTN"> GO
  </button>
</div>


<table id="table_test">
  <tr>
    <th></th>
    <th>Class ID</th>
    <th>Class Name</th>
    <th> Type of Class </th>
    <th>Pre-Requisties</th>
    <th>Credit Hours</th>
  </tr>
  <tr class="rows" class_type="Finance">
    <td> <input class="check_box" type="checkbox" name="Class1" value="Valuations">
    </td>
    <td>85104</td>
    <td>Valuations</td>
    <td>Finance</td>
    <td>(none)</td>
    <td>1.5 hours</td>
  </tr>
  <tr class="rows" class_type="Finance">
    <td> <input class="check_box" type="checkbox" name="Class2" value="Private Equity"> </td>
    <td>85641</td>
    <td>Private Equity</td>
    <td>Finance</td>
    <td>85104-Valuations</td>
    <td>1.5 hours</td>
  </tr>
  <tr class="rows" class_type="Leadership">
    <td> <input class="check_box" type="checkbox" name="Class3" value="Negotiations"> </td>
    <td>97523</td>
    <td>Negotiations</td>
    <td>Leadership</td>
    <td>5671-Leading Organizations</td>
    <td>1.5 hours</td>
  </tr>
</table>


<div id="class-content" />

CSS

.welcome_bar {
  background-color: #FFA500;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-weight: bold;
  font-size: 110%;
  color: #ffffff;
  border-radius: 5.25px;
}



.class_list {
  background-color: #A9A9A9;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  font-size: 75%;
  color: #000000;
  border-radius: 5.25px;


}

#table_test {
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  border-collapse: collapse;
  border: 1px solid #dddddd;
  font-size: 75%;
  width: 100%;

}

#table_test td,
#table_test th {
  border: 1px solid #ffffff;
  padding: 5px;
}

#table_test td {
  color: #000000;
  text-align: center;
}

#table_test tr:nth-child(even) {
  background-color: #f2f2f2;
}

#table_test tr:hover {
  background-color: #ddd;
}

#table_test th {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #dddddd;

}

#search_controls {
  background-color: #f2f2f2;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  display: flex;
  float: right;

}

JavaScript

$(document).ready(function() {
  readData("$classcontent");
});


console.log('code is starting');
///CODE TO PULL IN PARTS
var clsData = 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) {
  clsData = json.feed.entry;
  console.log('test');
}

console.log('code at pt 1');
function readData($classcontent) {

  //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 = 2;

console.log('code at pt 2');
  var data = clsData;
  var divData = [];
  var row = 0;
  
  for (var i = 0; i < data.length; i++)
  	{
    var cell = data[i]["gs$cell"];
    console.log(cell);
    var val = cell["$t"];
    console.log( val);
    
    //if we're ready to add a new row....
    if (cell.col == startCol) {

      var skipRow = ((row == marginRow) || (row == headerRow));
      if (!skipRow) {
        drawDiv(divData, $classContent);
      }
      divData = [];
      row++;
    }
    //otherwise if we're still collecting values across the columns...
    divData.push(val);
  }
  drawDiv(divData, $classContent);
  
}

//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) {
  if (divData == null) return null;
  //if (isHeaderorMargin) return;
 console.log('code at pt 3');
  classid = divData[0];
  classname = divData[1];
  classtype = divData[2];
  prereq = divData[3];
  credithours = divData[4];

  //Write class-content div
  var $classDiv = $("<div/>");
  $classDiv.addClass('catalog-part');
  $classDiv.attr({
    'mfr': mfr,
    'model': model
  });
  $classDiv.prepend($('<img>', {
    src: imgURL
  }));

}

    console.log('code at pt 4');
  var table = document.getElementById("table_test");
  var row = table.insertRow(4);
  var...