JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<!This is a labeled version of the HTML>

  <!UVA Darden Logo>
    <div id="logo-header">
      <img id=UVA-Logo style="vertical-align: middle;" src="https://www.darden.virginia.edu/themes/custom/darden_main/images/logo.svg" alt="PCB board">
    </div>

    <!User logged in header information>
      <div id="header-container">
        <div id="login-info-pic">
          <img id=cowan-pic src=https://www.darden.virginia.edu/sites/default/files/styles/square_full_width_1_1_414px_fallback/public/2021-04/Alex-Cowan_faculty-bio_1x1.jpg?itok alt="Alex's Pic">
        </div>
        <div id="login-info-name">
          <h3> Alex Cowan </h3>
          <p ID=userID> ID: 8657926 </p>
        </div>
      </div>

      <!Logout modal>
        <div id="logout-modal">
          <h3> Logout from Team Hottub? </h3>
          <button type="button" id="confirm-logout"> Yes, log me out </button>
          <button type="button" id="cancel-logout"> Cancel </button>
        </div>

    <!User logged out header information>
      <div id="header-container-2">
        <div id="logout-pic">
          <img id="blank-user" src= https://static.vecteezy.com/system/resources/thumbnails/007/407/996/small/user-icon-person-icon-client-symbol-login-head-sign-icon-design-vector.jpg alt="User login pic">
        </div>
        <div id="user-login">
          <h3> User Login </h3>
        </div>
      </div>

  <!Login modal>
        <div id="login-modal">
          <h3> Please sign-in </h3>
          <input type="text" name="username" placeholder="ex) UVA student ID" size=30>
          <input type="password" name="password" placeholder="ex) Password" size=30>
          <button type="button" id="confirm-login"> Login </button>
        </div>

        <!Left side navigation panel>
          <div id="search-select">
            <div id=Search-text>
              SEARCH
            </div>
            <input type="text" name="job-search" placeholder="ex) Program Manager" size=30>
            <br>
     ...

CSS

#logo-header {
  margin-top: 20px;
  margin-left: 10px;
  padding-bottom: 15px;
  position: fixed;
  font-size: 15px;
  background-color: white;
  width: 225px;
}

.job-posting img {
  width: 100px;
}

#UVA-Logo {
  width: 90%;
  background-color: white;
  padding: 3px;
  border-radius: 5px;
}

#login-info-name {
  font-family: 'Open Sans', sans-serif;
  margin-right: 10px;
  margin-top: 10px;
  float: right;
  background-color: white;
}

#user-login {
  font-family: 'Open Sans', sans-serif;
  margin-right: 10px;
  margin-top: 20px;
  float: right;
  background-color: white;
  display: none;
}

#userID {
  margin-top: -17px;
  font-size: 14px;
}

#cowan-pic {
  border-radius: 50%;
  margin: 10px;
  margin-top: 15px;
  margin-right: 25px;
  width: 65px;
  height: 65px;
  float: right;
  background-color: white;
}

#blank-user {
  border-radius: 50%;
  margin: 10px;
  margin-top: 15px;
  margin-right: 25px;
  width: 65px;
  height: 65px;
  float: right;
  background-color: white;
  display: none;
}

#logout-modal {
  font-family: 'Open Sans', sans-serif;
  border: 1px;
  border-color: black;
  border-radius: 10px;
  background-color: #f5f5f5;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 250px;
  padding: 20px;
  float: right;
  margin-right: -210px;
  margin-top: 90px;
  display: none;
}

#confirm-logout {
  background-color: #90ee90;
  padding: 12px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 8px;
  border-radius: 15px;
  margin: 5px;
  font-weight: bold;
}

#cancel-logout {
  background-color: white;
  padding: 12px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 8px;
  border-radius: 15px;
  margin: 5px;
}

#login-modal {
  font-family: 'Open Sans', sans-serif;
  border: 1px;
  border-color: black;
  border-radius: 10px;
  background-color: #f5f5f5;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 250px;
  padding: 20px;
  float: right;
  margin-right: -210px;
  margin-top: 90px;
  display: none;
}

#login-modal input {
  margin: 5px;
  margin-top:...

JavaScript

//auto pull
sheetIndex = 0;
sheetsFileID = '1svYWLAYNDG3xm7IsKKo_Dpb5pmK-DxV-mAQ9bQ9aCZk';

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

fetch(SHEETSRESPONSE)
  .then(response => response.text())
  .then(textResponse => prepData(textResponse))
  .then(oppsFeed => loadOpps(oppsFeed))
  .then(text => console.log(text));

function prepData(data) {

  data = data.split("\n");

  data = data[1].replace(/google.visualization.Query.setResponse\((.*)\);/, "$1");
  if (isJson(data)) {
    partfeed = JSON.parse(data);
    return (partfeed);
  } else {}
}

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

function loadOpps(oppsItems) {
  const firstCol = 1;

  for (var i = 0; i < oppsItems.table.rows.length; i++) {

    val = oppsItems.table.rows[i].c[2].v;
    var row = [];

    for (var j = firstCol; j < oppsItems.table.rows[i].c.length; j++) {
      val = oppsItems.table.rows[i].c[j].v;

      row[j - 1] = val;
    }
    drawDiv(row);
  }
}

function drawDiv(divData) {
  if (divData == null) return null;

  imgURL = divData[0];
  var position = divData[1].trim();
  var company = divData[2].trim();
  var location = divData[3].trim();

  var newOppsDiv = document.createElement('div');
  newOppsDiv.className = 'job-posting';
  newOppsDiv.setAttribute("position", position);
  newOppsDiv.setAttribute("company", company);
  newOppsDiv.setAttribute("location", location);
  //image stuff
  var companyIMG = document.createElement('img');
  companyIMG.setAttribute("src", imgURL);
  newOppsDiv.appendChild(companyIMG);


  var newOppsSubDiv = document.createElement('div');
  newOppsSubDiv.className = 'Opps Displays';
  newOppsSubDivP = document.createElement('p');
  //For Sam's New Thing
  newOppsSubDivButton = document.createElement('button');
  newOppsSubDivButton.setAttribute('id', 'myBTN');
  newOppsSubDivButton.innerHTML = 'More';
 ...