JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<div class="Case-Details">
    <h3>Case Details</h3>
    <div id="caseDetails"></div>
    </div>

CSS

.home {
    border-style: dotted;
    font-family: Alegreya;
    font-style: normal;
    font-weight: normal;
    font-size: 6vw;
    text-align: center;
    color: #FF0000;
    background-color:#282b2b;
    margin-top:0vw;
}



#logo {
    width: 15vw;
}

.myButton {
    box-shadow: inset 0px -3px 10px 10px #29bbff;
    background-color: #2dabf9;
    border-radius: 15px;
    border: 5px solid #0b0e07;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Courier New;
    font-size: 8vw;
    padding: 40px 80px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #263666;
}

.myButton:hover {
    background-color: #0688fa;
}

.myButton:active {
    position: relative;
    top: 1px;
}

.UI-container {
    display: grid;
    grid-template-columns: 8vw 10vw 14.285vw 14.285vw 14.285vw 24.285vw 10vw;
    grid-template-rows: 3.5vw 10vw 10vw 10vw 5vw 2vw 2vw 8vw;
    gap: 1px 1px;
    grid-template-areas:
    "Help . Location Location Location Location time"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    "Body Body Ultrasound Ultrasound Ultrasound Ultrasound Actions"
    ". Case-Details Case-Details Case-Details . Vitals ."
    ". Case-Details Case-Details Case-Details . Vitals ."
    ". Case-Details Case-Details Case-Details . Vitals .";
}
.Help { grid-area: Help;
}
#help {
    height: 3vw;
}

.Body { grid-area: Body;
}
.Body>img {
    vertical-align:center;
}
.parent{
    position:absolute;
    z-index:0;
}

#bodyImage{
    height:39vw;
    object-fit:cover;
}
#ruqicon {
    position:absolute;
    z-index:1;
    bottom:25vw;
    right:9.5vw;
    height:2vw;}

#luqicon {
    position:absolute;
    z-index:1;
    bottom:25vw;
    right:5vw;
    height:2vw;}

#subxicon {
    position:absolute;
    z-index:1;
    bottom:26vw;
    right:7.25vw;
    height:2vw;}

#bladdericon {
   ...

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) {
  const headerPos = 0;
  var partfeed = data.feed.entry;
  var divData = [];
  for (var i = 0; i < partfeed.length; 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++) {
      //console.log('we are on the ' + j + 'th iteration');
      val = JSONrow[j].split(':')[1];
      //console.log('the value is ' + val);
      row[j] = val;
    }
    //I've changed so thgat it only...
    if (i != headerPos) {
      drawDiv(row, "#caseDetails");
    }
  }
}

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

  caseid = $.trim(divData[0]);
  title = $.trim(divData[1]);
  history = $.trim(divData[2]);
  age = $.trim(divData[3]);
  gender = $.trim(divData[4]);
  tempc = $.trim(divData[5]);
  tempf = $.trim(divData[6]);
  bpsys = $.trim(divData[7]);
  bpdia = $.trim(divData[8]);
  hr = $.trim(divData[9]);
  oxy = $.trim(divData[10]);
  outcomeObs = $.trim(divData[11]);
  outcomeCT = $.trim(divData[12]);
  outcomeSurg = $.trim(divData[13]);
  outcomeInt = $.trim(divData[14]);


  var $caseDiv = $("<div/>");
  $caseDiv.addClass('Case-Details');
  var casedetails = $("<p></p>").html("A " + age + "-year-old " + gender + " " + history);
  $caseDiv.prepend(casedetails);

  console.log(JSON.stringify($caseDiv));
  $('#caseDetails').append($caseDiv);
}