JSFiddle - React, Tailwind, and code Playground

by taa1953

HTML

<div class="wrapper">
  <form>
    <div class="group">
      <label id="num_label" for="num">Some number:</label>
      <input id="num" type="text" maxlength="20">
    </div>
    <div class="group">
      <textarea id="options" rows="9"></textarea>
    </div>
  </form>
</div>

CSS

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.group {
  width: 100%;
  height: 4rem;
  margin-top: 2rem;
}


label {
  width: 50%;
  height: 2rem;
}

#num {
  background-color: #efe;
  margin: 2rem auto;
  width: 50%;
  padding: 1rem;
}

#options {
  background-color: #efe;
  margin: 2rem auto;
  width: 50%;
  overflow-wrap: break-word;
  padding: 1rem;
}

JavaScript

let n = '12345678.99';
let f = new Intl.NumberFormat();
let options = f.resolvedOptions();
document.getElementById('num').value = f.format(n);
document.getElementById('options').value = 'locale = ' + options.locale + '\n\n' + 'resolvedOptions() = \n' + JSON.stringify(options);