JSFiddle - React, Tailwind, and code Playground

by albertoarena

HTML

<table id="log">
    <thead>
        <tr>
            <th>Value</th>
            <th>typeof</th>
        </tr>
    </thead>
</table>

CSS

table#log {
    font-family: monospace;
}
table#log th {
    padding: 5px;
    border: 1px solid #ccc;
    background: #eee;
}
table#log td {
    padding: 5px;
    border: 1px solid #ccc;
}
table#log td.highlight {
    font-weight: bold;
    color: blue;
}
}

JavaScript

$(function () {

    $log = $('#log');

    function createTd(v, highlight) {
        var td = $('<td/>').text(v);
        if (v === true && highlight) {
            td.addClass('highlight');
        }
        return td;
    }

    function logMe(v) {
        $log.append(
        $('<tr/>')
            .append(createTd(v))
            .append(createTd(typeof v)));

        //$log.append($('<p>' + v1 + ' : ' + v2 + '</p>'));
    }

    var list = [3, 3.14, "hello", true, false, {
        a: 1
    }, [1, 2], null, undefined];
    for (var i = 0; i < list.length; i++) {
        logMe(list[i]);
    }

});