1.1 Results Page -MK

by mastersj19

HTML

<script src="https://spreadsheets.google.com/feeds/cells/1LncVOyV47RuIoPsgP28AfsejXGxANr2u_xg2txUfcEQ/1/public/values?alt=json-in-script&callback=doData"></script>

<div id="data" />

<div id="parts-content" />

<div class="top-bar">
  <ul class="top-logo">
      <img src="https://drive.google.com/uc?id=1ruWIp9fBNwQ1ktnpYsn48KLMqK3xA555" alt="Itinerant Logo" size>
      </ul>
	<ul class="nav-list">
  	<li><a href="#">Home</a></li>
   	<li><a href="#">Help</a></li>
	</ul>

	<div id="search-box">
    <input type="text" name="parts-search" placeholder="Type of Date, Place, Neighborhood" size=30>
	</div>
</div>
<div id="search-controls">
<div id="filter-parts">
 Filter By
    <select id="dd-type">
				<option value="All">Type of Date</option>
				<option value="Dinner">Dinner</option>
				<option value="Breakfast">Breakfast</option>
				<option value="Lunch">Lunch</option>
				<option value="Drinks">Drinks</option>
        <option value="Coffee">Coffee</option>
        <option value="Activity">Activity</option>
			</select>
    	<select id="dd-name">
				<option value="All">Place</option>
				<option value="Veritas Winery">Veritas Winery</option>
				<option value="Oakhart Social">Oakhart Social</option>
				<option value="Take It Away">Take It Away</option>
        <option value="Mudhouse">Mudhouse</option>
			</select>
			<select id="dd-neighborhood">
				<option value="All">Neighborhood</option>
				<option value="Belmont">Belmont</option>
				<option value="Downtown">Downtown</option>
				<option value="The Corner">The Corner</option>
				<option value="MidTown">MidTown</option>
			</select>
  </div>
  <button type="button" id='search-btn'>Go</button>
</div>

CSS

.top-bar, #search-box, #search-btn, #dd-type, #dd-name, #dd-neighborhood, .nav-list li, .nav-list a {
	background-color: #0FDEBD;
	font-family:'Lato', sans-serif;
	font-weight: bold;
	font-size: 110%;
	color: white;
}

.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;
    background-color: #0FDEBD;
}

#search-box {
	margin-left: auto; 
	margin-right:0px;
	padding: 10px;
 }
 
.top-logo img{
  vertical-align: middle;
  display: block;
  max-width:200px;
  max-height:95px;
  width: auto;
  height: auto;
  float:left;
 }



.top-menu{
   text-align: center;
   padding-top: 25px;
   padding-bottom: 10px;
   font-family: 'Lato', sans-serif;
   font-weight: 400;
  }

#search-controls {
	background-color: #ffffff;
	padding: 5px 15px 15px 15px;
	font-family: 'Lato', sans-serif;
	font-size: 70%;
  display: flex;
  align-items: center;
  color: #0FDEBD;
}


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

.card {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  width: 300px;
  height: 425px;
  margin: 10px;
  padding: 5px 5px;
  position:relative;
  float: left;
  border-style: solid;
  border-color:#D1D3D4;
  border-radius:5px;
  align-self:center;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
}

.card img {
  height: auto;
  /*vertical-align: middle;*/
  width: 100%;
}

.photo {
  width: auto;
  display: block;
  
}

.rating {
  color: #0FDEBD;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
 font-weight: 400;
  display: block;
}

.number-of-reviews {
  color: #288ad6;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  font-weight: 200;
  text-decoration:...

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) {

  const startCol = 1;

  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;

  name = divData[0];
  type = divData[1];
  neighborhood = divData[2];
  rating = divData[3];
  price = divData[4];
  resURL = divData[5];
  phone = divData[6];
  address = divData[7];
  photo1URL = divData[8];
  photo2URL = divData[9];
  photo3URL = divData[10];
 ...