JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<script src="https://cdn.rawgit.com/mathiasbynens/he/master/he.js"></script>
<script src="https://cdn.rawgit.com/mathiasbynens/cssesc/master/cssesc.js"></script>
<form id="target" action="">
    <input type="text" name="glyph" value="&#128038;">
    <br/>
    <input type="submit" name="submit" value="Submit">
</form>
<div id="result">Results will show here</div>

CSS

input[type=text] {
    width: 80%;
}

JavaScript

$(document).ready(function () {
    var result = {}; // my object
    result.chr = null;
    result.amp = null;
    result.css = null;
    result.ucd = null;
    result.msg = null;
    result.html = "<b>Character:</b> $char  <br/><b>CSS:</b> $css<br/>   <b>Unicode:</b> $uc";

    $("#target").submit(function (event) {
        event.preventDefault();
    });

    $("input[name='submit']").on("click", function () {
        var input = $("input[name='glyph']").val();
        var type = input.substring(0, 2);
        if (type === "&#") {
            input = he.decode(input);
        }

        result.chr = he.decode(input);
        result.css = cssesc(input);
        result.css = he.escape(result.css); 
        //result.css = result.css.replace('&', '&amp;');
        result.msg = result.html;
        result.msg = result.msg.replace('$char', result.chr);
        result.msg = result.msg.replace('$css', result.css);
        //alert(result.css);
        //alert(newHTML);
        $("#result").html(result.msg);
    });
});