JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://cdn.jsdelivr.net/npm/@fxi/[email protected]"></script>
<div id="container"></div>
<div id="results"></div>

CSS

#results {
  max-height:100px;
  overflow:auto;
}

JavaScript

const elResults = document.getElementById('results');
const elContainer = document.getElementById('container');

const mx = new mxsdk.Manager({
container : elContainer,
  url:
    "https://app.mapx.org"
});

mx.on("ready", () => {
  
  addResult('Ready!');
  
  mx.ask("get_views").then(addResult);
  mx.ask("get_ip").then(addResult);
  setTimeout(() => {
    mx.ask("set_project", "MX-YBJ-YYF-08R-UUR-QW6").then(()=>{
      addResult('Project changed');
    })
  }, 3000);
});


function addResult(json){
  const elResult = document.createElement('pre');
  const txt = json instanceof Object ? JSON.stringify(json) : json;
  elResult.innerText = txt;
  elResults.appendChild(elResult);
  
}