JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<!-- The core Firebase JS SDK is always required and must be listed first -->
       <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script>
    
       <!-- TODO: Add SDKs for Firebase products that you want to use
            https://firebase.google.com/docs/web/setup#available-libraries -->
       <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-analytics.js"></script>
       <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-firestore.js"></script>
       <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
       <script>
       
         // Your web app's Firebase configuration
         // For Firebase JS SDK v7.20.0 and later, measurementId is optional
         var firebaseConfig = {
           apiKey: "AIzaSyDazXuLjulvof69k00gM2i2Q9bwVlAwrzM",
           authDomain: "project-ultra-14a78.firebaseapp.com",
           databaseURL: "https://project-ultra-14a78-default-rtdb.firebaseio.com",
           projectId: "project-ultra-14a78",
           storageBucket: "project-ultra-14a78.appspot.com",
           messagingSenderId: "405691008774",
           appId: "1:405691008774:web:905795e75c371024b98087",
           measurementId: "G-Y58FK549GV"
         };
         // Initialize Firebase
         firebase.initializeApp(firebaseConfig);
         firebase.analytics();
       </script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VVHMBP13JW"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-VVHMBP13JW');
</script>
</head>
<link rel="stylesheet" href="PeregrineStyle.css">
<div class="UI-container">
    <div class="Help">
        <a href="https://share.balsamiq.com/g/gvpu8v8guWpTm9P17CPZzt.png">
            <img alt="help" id="help" src="ProgramFiles/Icons/qmark.png"></a>
    </div>

    <div class="Body">
     ...

JavaScript

var JSONFEED = 'https://spreadsheets.google.com/feeds/list/1dpcguZ2Ak0zc0Sh1WoPV0c0tXVxre3yGWC1Wo5ElWtc/1/public/basic?alt=json';

$(document).ready(function() {
  $.ajax({
    url: JSONFEED,
    success: function(data) {
      readData(data);
    }
  });
});

function readData(data) {
  var partfeed = data.feed.entry;
  var divData = [];
  var length2 = Object.keys(partfeed).length-1;
  //console.log(length2);
  // random number for the row where the case will be pulled from
  var i = 0 + Math.floor(Math.random() * length2);
  localStorage.caseNum = i;
  console.log("Case No: "+i);
  //console.log(i, ':i');
    var JSONrow = partfeed[i].content.$t.split(',');
    var row = [];
   //console.log('the Current Case Data is: ' + JSONrow);
    for (var j = 0; j < JSONrow.length; j++) {
      val = JSONrow[j].split(':')[1];
      row[j] = val;
    	title = row[0];
    }
    drawDiv(row, title, "#caseDetails");
    
  }


function drawDiv(divData, thehistory, parent, loc) {
  if (divData == null) return null;

  console.log("Case: " + title);
  localStorage.case1Title = title;
  scenario = $.trim(divData[1]);
  age = $.trim(divData[2]);
  gender = $.trim(divData[3]);
  tempc = $.trim(divData[4]);
  tempf = $.trim(divData[5]);
  bpsys = $.trim(divData[6]);
  bpdia = $.trim(divData[7]);
  hr = $.trim(divData[8]);
  oxy = $.trim(divData[9]);
  outcomeObs = $.trim(divData[10]);
  outcomeCT = $.trim(divData[11]);
  outcomeSurg = $.trim(divData[12]);
  outcomeInt = $.trim(divData[13]);
  ruqimg = $.trim(divData[14]);
  luqimg = $.trim(divData[15]);
  subximg = $.trim(divData[16]);
  bladderimg = $.trim(divData[17]);
  lungrimg = $.trim(divData[18]);
  lunglimg = $.trim(divData[19]);
  keyImg = $.trim(divData[20]);
  localStorage.case1KeyImg = keyImg;
  keyLocation = $.trim(divData[21]);
  localStorage.case1KeyLoc = keyLocation;
  console.log("Key Location: "+localStorage.case1KeyLoc);
  keyAction = $.trim(divData[22]);
  localStorage.case1KeyAction = keyAction;
 ...