<div class="col">
  <div class="row">
    <div class="col-5 mt-5 ta-container">
      <textarea placeholder="JSON Object Here" rows="8" cols="100" id="json-input-1"></textarea>
    </div>
    <div class="col-5 mt-5 ta-container">
      <textarea placeholder="JSON Object Here" rows="8" cols="100" id="json-input-2"></textarea>
    </div>
  </div>
      <div class="m-auto text-center">
      <button class="btn btn-primary ta-container" type="button">
        Submit
      </button>
    </div>
  <pre id="render-diff"></pre>
</div>

body {
  background: black;
}

textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  width: 100%;
}

.ta-container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

#render-diff {
  background: white;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

import {detailedDiff} from "https://cdn.skypack.dev/deep-object-diff@1.1.9";


function diffOutput() {
  const json1 = JSON.parse(document.getElementById("json-input-1").value);
  const json2 = JSON.parse(document.getElementById("json-input-2").value);
  const _diff = detailedDiff(json1, json2);
  console.log(_diff)
  document.getElementById("render-diff").innerHTML = `${JSON.stringify(
    _diff,
    null,
    4
  )}`;
}

document.querySelector("button").addEventListener("click", function () {
  diffOutput();
});