JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<div id="ib">
    <div class="ib_input_holder">
        <p class="ib_p">encode</p>
        <input type="text" name="encode" id="encode" value=""/>
        <div id="encode_run"><p>run</p></div>
    </div>
    <div class="ib_input_holder">
        <p class="ib_p">KEY</p>
        <input type="text" name="key" id="key" value=""/>
    </div>
    <p class="ib_p">result :</p>
    <p id="result"></p>
</div>

CSS

body {
 background:url('http://vikupavto24.ru/modules/mod_yapointer/tmpl/fancybox_overlay.png');
}
#ib {
padding: 20px 40px 35px 40px;
min-height: 415px;
width: 380px;
background: #FAFAFA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
top: 90px;
margin: 0 auto;
}
input {
    -moz-box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.4);
    -webkit-box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.4);
    box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.4);
    border: 0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
    border-bottom: 1px solid #E7E7E7;
    resize: none;
    outline: none;
    height:25px;
    text-indent: 10px;
    width:100%;
}
.ib_p {
    font-size: 15px;
    color: #555454;
    text-transform: uppercase;
    font-family: arial;
}
.ib_input_holder {
    position:relative;
}
#encode_run,#decode_run {
    background: #00A3CC;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #FFF;
    font-size: 16px;
    line-height: 22px;
    padding: 0 12px;
    display: inline-block;
    text-decoration: none;
    -webkit-transition: background 0.5s ease-in;
    -moz-transition: background 0.5s ease-in;
    -o-transition: background 0.5s ease-in;
    -ms-transition: background 0.5s ease-in;
    cursor: pointer;
    transition: background 0.5s ease-in;
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-family: arial;
    text-transform: uppercase;
cursor: pointer;
}
#encode_run p,#decode_run p {
    margin:0px;
    padding:0px;
}

JavaScript

$("#encode_run").click(function () {
    var encode_val = $("#encode").val().toLowerCase();
    encode_val = encode(encode_val);
    $("#result").text(encode_val);
});

function encode(str) {
    var ar,al,uar,keyo,key,t1,t2,n1,n11,n2,n3,n33,n4,n44,end='',ch=0,tf;
    al=['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'];
    ar=['z','y','x','w','v','u','t','s','r','q','p','o','n','m','l','k','j','i','h','g','f','e','d','c','b','a'];
    uar=[];key=[];keyo=[];
    t1 = str;
    t2 = $("#key").val();
    keyo=t2.split('');
    for (n4=0;n4<keyo.length;n4++) {
        tf=0;
        for (n44=0;n44<keyo.length;n44++) {
            if (key[n44]==keyo[n4]) {tf=1;}
        }
        if (tf==0) {key[ch]=keyo[n4];ch++;}
    }
    for (n1=0;n1<key.length;n1++) {
        for (n11=0;n11<ar.length;n11++) {
            if (key[n1]==ar[n11]) {ar.splice(n11,1);}
        }
    }
    key.reverse();
    for (n2=0;n2<key.length;n2++) {
        ar.splice(0,0,key[n2]);
    }
    uar=t1.split('');
    for (n3=0;n3<uar.length;n3++) {
        for (n33=0;n33<ar.length;n33++) {
            if (uar[n3]==al[n33]) {end+=ar[n33];}
            else if (uar[n3]==' ') {end+=' ';}
        }
    }
    return end;
}