C_DEV pg 4 (WH)

by Alex Cowan

HTML

<html>

<head>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/page2.css">
  <script>
    // Function to extract file ID from the sharing link
    function extractFileID(link) {
      const fileIDStartIndex = link.indexOf('/file/d/') + 8; // Find the starting index of file ID
      const fileIDEndIndex = link.indexOf('/view', fileIDStartIndex); // Find the ending index of file ID
      return link.substring(fileIDStartIndex, fileIDEndIndex);
    }

    // Replace the sharing link with the direct link to the image
    function getDirectImageURL(link) {
      const fileID = extractFileID(link);
      return `http://drive.google.com/uc?export=view&id=${fileID}`;
    }
  </script>
</head>

<body>
  <div class="top-bar">
    <div class="logo">
      <a href="#"><img
          src="https://lh3.googleusercontent.com/pw/AIL4fc-XRqbeJJ7PbU64ATvCvO19rFoWkQPEALzTtavqpUAmNLc3H0YzqmRSTxnw-sbXkK1phCIsXuxpwUPK5s-hwfukneZW1TYmJtWwxCykdr59P38Tkn0=w2400"
          alt="Logo"></a>
    </div>
    <div class="nav-list">
      <ul>
        <li><a href="#">Skills Assessment</a></li>
        <li><a href="#">Job Fit</a></li>
        <li><a href="#">Skills Builder</a></li>
        <li><a href="#">Interview Prep</a></li>
      </ul>
    </div>
    <div class="login">
      <div id="search-box">
        <input type="text" name="parts-search" placeholder="Search">
      </div>
      <div>
        <a href="#" id="loginButton" class="login-button">Login</a>
      </div>
    </div>
  </div>
  <div class="colored-bar">
    <h2>Job Recommendations</h2>
  </div>

<div id="search-controls">
  <div id="filter-parts">
    Search By
    <select id="ddRegion">
        <option value="All">Region</option>
				<option value="US - Northeast">US - Northeast</option>
        <option value="US - South">US - South</option>
        <option value="US - Midwest">US - Midwest</option>
        <option value="US - West">US - West</option>
				<option value="Other North America">Other...

CSS

* {
  font-family: Georgia;
}

.nav-list {
  width: 100%;
  padding-left: 20px;
}
.nav-list ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.nav-list a {
  padding: 8px;
  text-decoration: none;
}
.logo img {
  max-height: 74px;
}
.login {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#search-box input[type="text"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 160px;
  margin-right: 20px;
}
#search-box input[type="text"]:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 5px #007BFF;
}
#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;
}
.login a, .nav-list li, .nav-list a {
  background-color: #FFFFFF;
  font-weight: bold;
  font-size: 110%;
  color: #232D4B;
  padding: 10px;
}
.top-bar {
  color: #FFFFFF;
  height: 100px;
  margin: 0px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
}
.colored-bar {
  background-color: #E57200;
  color: white;
  
  /* Color of the colored bar */
  text-align: center;
  padding: 10px 0;
}

 h2 {
     font-size: 18px;
     margin-bottom: 10px;
}

.colored-bar h2 {
  color: white;

/* Text color for the title */
  margin: 0;
  font-size: 200%;
}
 .image-container {
     width: 100%;
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     background-color: #ffffff;
    
    /* Background color for the image container */
}

 .image-container img {
     width: 100px;
     height: auto;
     display: block;
     margin-bottom: 10px;
     }

.subtitle {
  font-size: 1.4em;
  text-align: center;
}

.page-container {
  display: flex;
  justify-content: center;
}

.assessment-container {
  padding-right:...

JavaScript

sheetIndex = 0;
sheetsFileID = '1MVwU4HrswXMNPrgT_2CMLv6sVEeejJPp63J4LxyhfRw';

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

fetch(SHEETSRESPONSE)
  .then(response => response.text())
  .then(textResponse => prepData(textResponse))
  .then(partFeed => loadParts(partFeed));

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 response, using a regular expression to remove the stuff we don't want- OK for a proof of concept; and the HinH team is going to use Firebase for the 'production' version anyway
  data = data[1].replace(/google.visualization.Query.setResponse\((.*)\);/, "$1");
  if (isJson(data)) {
    partfeed = JSON.parse(data);
    return (partfeed);
  } else {
    console.log('it is not JSON- yarf');
  }
}

function isJson(str) {
  try {
    JSON.parse(str);
  } catch (e) {
    return false;
  }
  return true;
}


function loadParts(partfeed) {

  //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 firstCol = 1;

  /* This is a for loop that iterates through the rows from the Google Sheet, now JSON objects. 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. 
    //The JSON represents a single sheet in Google Sheets. The model is that the sheet has a table, the table has a series of rows, and those rows have values and then sometimes supplemental items. JS also has built-in facilities to index a JSON scheme where, for example, this statement:
  …partfeed.table.rows[i].c[j].v;
  based on the schema from Google Sheets and the JSON...