JSFiddle - React, Tailwind, and code Playground

by Austin Anderson

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6">
      <h1>Membership Compare</h1>
      <div class="form-group">
        <label>Before JSON</label>
        <textarea class="form-control" id="before"></textarea>
      </div>
      <br />
      <div class="form-group">
        <label>After JSON</label>
        <textarea class="form-control" id="after"></textarea>
      </div>
      <br />
      <div>
       <button class="btn btn-primary">Compare</button> 
       <button class="btn btn-warning">Reset</button>
      </div>
    </div>
    <div class="col-6">
      <div id="result">
      
      </div>
    </div>
  </div>
 
</div>

CSS

.col-6 {
  border: solid 1px gray;
  padding: 10px;
}
.container {
  padding-top: 50px;
}

#result label {
  display: block;
  font-weight: bold;
}
#result .result-item {
  overflow: auto;
}
table {
  width: 100%;
  overflow-y: auto;
}

JavaScript

document.addEventListener("click", function (event) {
  if (event.target.classList.contains("btn-primary")) {
    compare()
  }
  if (event.target.classList.contains("btn-warning")) {
    reset()
  }
})

function reset() {
  document.getElementById("before").value = ""
  document.getElementById("after").value = ""
  document.getElementById("result").innerHTML = ""
}

function compare() {
  var listA;
  var listB;
  
  try {
    const jsonString = document.getElementById("before").value
    const jsonObject = JSON.parse(jsonString);
    listA = jsonObject;
  } catch (error) {
    alert('Error parsing the Before JSON:', error);
  }  
  
  try {
    const jsonString = document.getElementById("after").value
    const jsonObject = JSON.parse(jsonString);
    listB = jsonObject;
  } catch (error) {
    alert('Error parsing the After JSON:', error);
  }

  const pointChanges = comparePointChanges(listA, listB)
  var html = `<div>`
  html =
    html +
    `<label>No Changes</label><span class='result-item'>${pointChanges.nochanges.length}</span><hr />`
  html =
    html +
    `<label>Users Who Lost Points</label><div class='result-item'>${pointChanges.usersRemoved}</div><hr />`
  html =
    html +
    `<label>Points Removed</label><span class='result-item'>${pointChanges.pointsRemoved}</span><hr />`
  html =
    html +
    `<label>Users Who Gained Points</label><div class='result-item'>${pointChanges.usersAdded}</div><hr />`
  html =
    html +
    `<label>Points Added</label><span class='result-item'>${pointChanges.pointsAdded}</span><hr />`
  html =
    html +
    `<label>All Member Changes</label><div class='result-item'><table border=1><tr><th>ID</th><th>Point Change</th></tr>`
    pointChanges.changes.forEach((element) => html = html +`<tr><td>${element.MembershipID}</td><td>${element.pointChange}</td></tr>` )
  html = html + `</table></div></div>`
  
  
  document.getElementById("result").innerHTML = html
}

function comparePointChanges(
  array1,
  array2,
  idKey...