JSFiddle - React, Tailwind, and code Playground

by mrrena

HTML

<!-- external highlighter css and js -->
<link href="http://www.panosaurus.com/css/highlighter.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.panosaurus.com/scripts/highlighter.js"></script>
<div class="body-text">
    <a href="http://mrrena.blogspot.com/2012/05/javascript-better-typeof-accurately.html" onclick="top.location.href=this.href">Javascript: A Better typeof &#8212; Accurately Determine the Type of Variable</a>:
</div>
<div class="form-wrapper">
    <h2>Press <kbd>Enter</kbd> to Submit:</h2>
    <kbd class="func">realTypeOf(<input type="text" id="input-string" />);</kbd><br />
    <pre class="code"><span class="commentx"></span></pre>
    <div id="tip">For interesting results, try something like: <tt>alert(9)</tt> or <tt>prompt("What do you say?")</tt></div>
</div>
<div id="output-box"></div>

CSS

.body-text {
    padding: 28px 38px 14px;
    text-shadow: 1px 1px #bbb;
}
.form-wrapper {
    margin: auto;
    width: 88%;
    padding: 10px;
    margin-top: 14px;
    margin-bottom: 28px;
    box-shadow: 0 0 20px -2px #999;
}
.form-wrapper .code {
    display: none;
}
.form-wrapper .func {
    margin-left: 40px;
}
.commentx {
    color: #ccc;
}
#tip {
    margin-top: 18px;
    font-size: 10px;
    color: #666;
    text-align: right;
}
body {
    background-color: #eee;
    font-family: 'gill sans', tahoma;
    font-size: 15px;
}
a {
    color: #b27022;
}
h2 {
    margin-bottom: 13px;
    text-shadow: 1px 1px #999;
    color: maroon;
    font-size: 20px;
}
tt {
    font-weight: bold;
    margin: 10px;
}

JavaScript

// the "typeof" replacement function
var realTypeOf = function(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1);
};

// example form event handler
$$('.form-wrapper')[0].removeEvents('keyup').addEvent('keyup', function(evt) {
    if (evt.code == 13) {
        var commentEl = $$('.commentx')[0];
        var inputStr = $('input-string').get('value'),
            val;
        commentEl.set('html', '');
        commentEl.getParent('.code').show();
        if (inputStr) {
            try { // realTypeOf could be expanded to handle undefined exceptions
                // here, we just hack for an interactive screen prompt
                val = realTypeOf(JSON.decode(inputStr));
            } catch (e) {
                var message = (/.+;$/.test(inputStr)) ?
                    'try leaving off the trailing ";"' :
                    'try using quotes instead: "' + inputStr.replace(/[^\\]"/g, '\\"') + '"'
                val = 'undefined\n\n// ' + message;
            }
        } else {
            commentEl.getParent('.code').hide();
        }
        commentEl.set('html', val);
    }
});

// hide interactive result box if user blurs out of empty input field
$('input-string').removeEvents('blur').addEvent('blur', function() {
    if (!this.value) {
        $$('.commentx')[0].getParent('.code').hide();
    }
});

$('input-string').focus();

// include all testing cases in array as strings so we can
// print out the input source (eval'ed with JSON.encode())
var strArr = ["'hi there'", "true", "{}", "[]", "function() {}",
                "new Date()", "/[0-9]/", "$('does-not-exist')", 'document.body',
                "$('output-box')", "$$('a')[0]", "$$('link')[0]",
                "$$('script')[0]", "999", "Math.min(3, 7)"];

// create empty results bucket
var realTypeList = [];

// loop the test cases
Array.each(strArr, function(item) {
    // pack realTypeList with printout string including
    // processed JSON.decode'ed source
   ...