JSFiddle - React, Tailwind, and code Playground

by extempl

HTML

<body>
  <p>Manually enter UIN if card swipe not applicable:</p>
  <form id="manualForm">
    UIN:<br>
    <input type="text" id="uinInput" value="" required minLength="9" maxLength="9">
    <br>
    <button id="checkinBtn" type="button">Manual Checkin</button>
  </form>
  <p>Select local CSV File:</p>
  <input id="csv" type="file">
  <output id="out"> input file content</output>

  <div id="userInfo"><u>User Info: </u></div>
</body>

JavaScript

document.getElementById('checkinBtn').onclick = function (e) {
  checkId();
}

document.getElementById('uinInput').onkeypress = function(e) {
  if (e.keyCode == 13) {
    checkId();
    e.preventDefault();
    return false;
  }
}

function checkId() {
  var typedUIN = document.getElementById('uinInput').value;
  console.log(typedUIN.length);
  if (typedUIN.length == 9) {

    loadDoc(typedUIN);

  }
}

function loadDoc(uinNum) {
  console.log(uinNum);
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(this.responseText);
      var jsonString = JSON.stringify(this.responseText, null, 4);
      console.log(json);
      var i;

      var foundEntry = json.find(function(row) {
        return row.uin == uinNum;
      })

      if (foundEntry) {
        foundEntry.studentInfo["checkin"] = true;
      } else {
        json.push({
          uin: uinNum.toString(),
          studentInfo: {} //  empty object, you can fill it with data you need
        })
      }

      console.log(json) // result of the modifying you can use for further CSV generation.

      /* Searches the JSON file for matching UIN number
      for (i = 0; i < json.length; i++) {
        When match is found, display information about the user associated to the UIN
        if (json[i].uin == uinNum) {
          json[i].studentInfo["checkin"] = true;
          document.getElementById("userInfo").innerHTML = "<u>User Info: </u>";
          document.getElementById("userInfo").innerHTML += "<br>Name: " + json[i].studentInfo["firstName"] + " " + json[i].studentInfo["middleName"] + " " + json[i].studentInfo["lastName"];
          document.getElementById("userInfo").innerHTML += "<br>UIN: " + json[i].uin;
          document.getElementById("userInfo").innerHTML += "<br>RSVP: " + json[i].studentInfo["rsvpStatus"];
          break; //Match is found, stop search
        } else {
         ...