JSFiddle - React, Tailwind, and code Playground

by fergmux

HTML

<table>
  <tr>
    <th>Input</th>
    <th>Output</th>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
}

th, td {
  border: 1px solid;
  padding: 5px;
}

JavaScript

const addZeroes = num => num.toLocaleString("en",{minimumFractionDigits: 2})

const inputs = ["1", "1.0", "1.1", "1.00", "1.11", "1.000", "1.111"]

inputs.forEach(input => {
	const table = document.querySelector('table')
 
  const rowEl = document.createElement("tr");
  const inputEl = document.createElement("td");
  const outputEl = document.createElement("td");

  const inputVal = document.createTextNode(input);
  const outputVal = document.createTextNode(addZeroes(Number(input)));

  inputEl.appendChild(inputVal);
  outputEl.appendChild(outputVal);
  
  rowEl.appendChild(inputEl)
  rowEl.appendChild(outputEl)
  
  table.appendChild(rowEl)
})