JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<!--<ul>
  <li>College of Applied Sciences and Arts
    <ul>
      <li>Advertising
        <ul>
          <li>Stat-Based: STAT 95</li>
          <li>Comment: Statway may be used in lieu of STAT 95</li>
          <li>M-I desc: You've fulfilled your GE area B4 requirement. Please use MyPlanner or consult your academic advisor.</li>
          <li>M-II label: M-II Recommended Math/QR</li>
          <li>M-II value: STAT 95</li>
          <li>M-II desc: STAT 95 - Elementary Statistics<br/>
Hypothesis testing and predictive techniques to facilitate decision-making; organization and classification of data, descriptive and inferential statistics, central tendency, variability, probability and sampling distributions, graphic representation, correlation and regression, chi-square, t-tests, and analysis of variance. Computer use in analysis and interpretation. GE Area: B4</li>
          <li>M-III label: M-III Recommended Math/QR</li>
          <li>M-III value: STAT 95 + Supported Instruction (or UNVS 15F/S</li>
          <li>M-IV label: M-IV Recommended Math/QR</li>
          <li>M-IV value: UNVS 15F/S</li>
        </ul>
      </li>
      <li>Forensic Science/Biology
        <ul>
          <li>Calc/precalc-Based: MATH 30</li>
          <li>Stat-Based: JS 15 or STAT 95</li>
          <li>Comment: Statway may be used in lieu of STAT 95</li>
          <li>M-I desc: </li>
          <li>M-II label: M-II Recommended Math/QR</li>
          <li>M-II value: STAT 95</li>
          <li>M-II desc: STAT 95 - Elementary Statistics<br/>
Hypothesis testing and predictive techniques to facilitate decision-making; organization and classification of data, descriptive and inferential statistics, central tendency, variability, probability and sampling distributions, graphic representation, correlation and regression, chi-square, t-tests, and analysis of variance. Computer use in analysis and interpretation. GE Area: B4</li>
          <li>M-III label: M-III Recommended Math/QR</li>
         ...

CSS

img#bg {
  position: fixed;
  right: 20px;
  bottom: 0px;
  opacity: 0.2;
  z-index: -1;
  width: 300px;
}

#content .content_wrapper button.btn-big, #content .btn-back {
  display: block;
  clear: both;
  width: calc(100% - 40px); 
  max-width: 300px;
  font-size: 1.2em;
  padding: 10px 0px;
  margin: 20px auto;
}
#content {
  width: 100%;
  /*max-width: 640px;*/
  margin: 0px auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 20px;
  box-sizing: border-box;
}
#content .content_wrapper td > button {
  width: 100%;
}
#content .content_wrapper div.screen {
  display: none;
  text-align:center;
}
#content .content_wrapper div.screen:nth-child(1) {
  display:block;
}
#content .content_wrapper , #content .content_wrapper  * {
  font-size: 18px;
}
#content .content_wrapper table button {
  padding: 20px;
}
#content .content_wrapper table {
  margin: 0px auto;
}
#content .content_wrapper div.course-options-container {
  padding: 20px 0px;
  box-sizing: border-box;
  text-align: left;
}
#content .content_wrapper h1 {
  font-size: 24px;
}
#content .content_wrapper h3 {
  font-size: 20px;
}
#content .content_wrapper .inst-text {
  text-align: center;
}
#content .content_wrapper div.screen .container {
  column-count: 2;
  text-align:left;
  /*max-width: 560px;*/
  width: calc(100% - 40px);
  margin: 10px 0px;
}
#content .content_wrapper div.screen .container p {
    word-wrap: break-word;
    white-space: nowrap;
    margin-top: 0px;
    margin-bottom: 6px;
}
#content .content_wrapper .course-option {
  display: block;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #eee;
  border-left: 5px solid #E5A823;
  margin: 5px;
  box-sizing: border-box;
  padding: 10px;
  text-align: left;
}
#content .content_wrapper .course-option label {
  color: #555;
}
#content .content_wrapper .course-options-container summary {
  color: #444;
  cursor:pointer;
  text-decoration: none;
}
#content...

JavaScript

const SEARCH_CRITERIA = "https://spreadsheets.google.com/feeds/list/1AR3spM2IMicid7u5Ntv4JlVj2BNu88iPmZEDOVPvON4/1/public/values?alt=json";

document.querySelector("title").innerHTML = "Interactive Math/QR Course Options Explorer";
fetch(SEARCH_CRITERIA)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    //console.log(JSON.stringify(myJson.feed.entry));
    parseData(myJson.feed.entry);
  });
 
let data = {};
function parseData(obj) {
	let college = '';
  for(let item of obj) {

  	if("" != sanitize(item["gsx$college"].$t)) {
      college = sanitize(item["gsx$college"].$t);
    }
    let temp = {};
    temp.name = sanitize(item["gsx$major"].$t);
    temp["stat-based"] = sanitize(item["gsx$stat-based"].$t);
    temp["calcprecalc-based"] = sanitize(item["gsx$calcprecalc-based"].$t);
    temp["algebradependent"] = sanitize(item["gsx$algebradependent"].$t);
    temp["generalmath"] = sanitize(item["gsx$generalmath"].$t);
    temp["undecided"] = sanitize(item["gsx$undecided"].$t);
    temp["comments"] = sanitize(item["gsx$comments"].$t);
    temp["categories"] = [];
    temp["categories"].push({
      "label": "M-I Recommended Math/QR",
			"value": "",
      "desc": sanitize(item["gsx$m-irecommendedmathqr"].$t)
    });
    temp["categories"].push({
      "label": "M-II Recommended Math/QR (Choose one)",
      "value": item["gsx$m-iirecommendedmathqrchooseone"].$t,
      "desc": sanitize(item["gsx$m-iicoursedescription"].$t)
    });
    temp["categories"].push({
      "label": "M-III Recommended Math/QR (Choose one)",
      "value": item["gsx$m-iiirecommendedmathqrchooseone"].$t,
      "desc": sanitize(item["gsx$m-iiicoursedescription"].$t)
    });
    temp["categories"].push({
      "label": "M-IV Recommended Math/QR (Choose one)",
      "value": item["gsx$m-ivrecommendedmathqrchooseone"].$t,
      "desc": sanitize(item["gsx$m-ivcoursedescription"].$t)
    });

    if(!data[college]) {
      data[college] = [];
    }
   ...