JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <div id="slider" style="height:200px;"></div>
<input class="convert" maxlength="1" name="ch" id="ch" />

        <ul class="output">
        <li><span id="hex">&nbsp;</span></li>
        <li><span id="dec">&nbsp;</span></li>
        <li><span id="bin">&nbsp;</span></li>
        </ul>

CSS

UL.output{
     margin: auto;
     list-style: none;
    position:relative;
 }
UL.output LI {
     margin: 0;
     padding: 0;
     list-style: none;
     float: left;
 }
 UL.output {
     margin-top: 20px;
     margin-bottom: 20px;
 }
 UL.output LI {
     padding: 8px;
     display: inline;
     margin-right: 20px;
     background: #8FCB2F;
 }
 UL.output LI SPAN {
     color: #FFFFFF;
     font-weight: bold;
     font-size: 30px;
     display: block;
     text-align: center;
 }
.rsize{
    color:red;
}

JavaScript

$(document).ready(function() {
var sizes = ["0", "1", "2", "3", "4", "5", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

$("#slider").slider({
      orientation: "vertical",
      range: "min",
      animation:false,
      min: 0,
      max: 36,
      value: 0,
  slide: function(event, ui) {
      $('.convert').val(sizes[ui.value]);      
  }
});
       var convert = function(ch) {
           $('#hex').html(Convert.toHex(ch));
           $('#dec').html(Convert.toDec(ch));
           $('#bin').html(Convert.toBin(ch));
           $('.convert').val(ch);
       }
       $('.convert').change(function(e){
           var ch = this.value;
           convert(ch);
       });
    
       $('.convert').keypress(function(e){
	       var ch = String.fromCharCode(e.which);
	       convert(ch);
	   });

 });
var Convert = {
     chars: " !\"#$%&amp;'()*+'-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
     hex: '0123456789ABCDEF', bin: ['0000', '0001', '0010', '0011', '0100', '0101', '0110', '0111', '1000', '1001', '1010', '1011', '1100', '1101', '1110', '1111'],

     decToHex: function(d){
          return (this.hex.charAt((d - d % 16)/16) + this.hex.charAt(d % 16));
     },
     toBin: function(ch){
          var d = this.toDec(ch);
          var l = this.hex.charAt(d % 16);
          var h = this.hex.charAt((d - d % 16)/16);

          var hhex = "ABCDEF";
          var lown = l < 10 ? l : (10 + hhex.indexOf(l));
          var highn = h < 10 ? h : (10 + hhex.indexOf(h));
          return this.bin[highn] + ' ' + this.bin[lown];
     },
     toHex: function(ch){
          return this.decToHex(this.toDec(ch));
     },
     toDec: function(ch){
          var p = this.chars.indexOf(ch);
          return (p <= -1) ? 0 : (p + 32);
     }
};