JSFiddle - React, Tailwind, and code Playground

by Gary Guagliardo

HTML

<table>
    <thead>
        <tr>
            <th>Input <i>(type)</i></th>
            <th>Result <i>(type)</i></th>
        </tr>
    </thead>
    <tbody id="output">
    </tbody>
</table>

CSS

table, td, th {
    border: solid 1px #ddd;
    padding: 4px 6px;
    border-collapse: collapse;
}

th {
    text-align: left;
    background-color: #69C;
    color: #FFF;
    font-weight: 600;
}

i {
    font-weight: normal;
}

body {
    font-family: "Segoe UI",arial,sans-serif;
    font-size: 13px;
}

JavaScript

var inputs = [
    "123",
    "123abc",
    null, 
    undefined, 
    NaN, 
    -42,
    "   ",
    "gb$#T6u4^%*&#%!~",
    3.1415,
    1.999999,
    true,
    false,
    {},
    []
]

inputs.forEach(function (i) {
    var tbody = document.getElementById("output"),
        tr = document.createElement("tr"),
        tdIn = document.createElement("td"),
        tdOut = document.createElement("td");

    
    tdIn.innerHTML = i + " <i>(" + typeof i + ")</i>";
    var result = ~~i;
    tdOut.innerHTML = result + " <i>(" + typeof result + ")</i>";

    tr.appendChild(tdIn);
    tr.appendChild(tdOut);
    tbody.appendChild(tr);
});