JSFiddle - React, Tailwind, and code Playground

by MrRio

HTML

<p>Demo generating braille characters by adding up hex values for each dot and adding to 0x2800.</p>

<ul class="left">
    <li><input type="checkbox" value="0x1" /></li>
    <li><input type="checkbox" value="0x2" /></li>
    <li><input type="checkbox" value="0x4" /></li>
    <li><input type="checkbox" value="0x40" /></li>
</ul>

<ul class="right">
    <li><input type="checkbox" value="0x8" /></li>
    <li><input type="checkbox" value="0x10" /></li>
    <li><input type="checkbox" value="0x20" /></li>
    <li><input type="checkbox" value="0x80" /></li>
</ul>

<div class="braille"></div>

<div class="output"></div>

CSS

ul {
    float:left;
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
}

.braille {
    margin-left: 10px;
    font-size: 70px;
}

.output {
    clear: both;
    padding-top: 1em;
}

JavaScript

$inputs = $('input');

$inputs.change(function() {
    var val = 0;
    var points = [];
    
    $inputs.each(function() {
        if ($(this).is(':checked')) {
            val += parseInt($(this).val());
            points.push($(this).val());
        }
    });
    var code = val + 0x2800;
    
    $('.braille').text(String.fromCharCode(code));
    $('.output').text(points.join(' + ') + ' + 0x2800 = 0x' + code.toString(16));
});