JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div class="common_class label">Ваше имя:</div>
<input class="common_class" id="uname" type="text" name="user_name" />
<div class="common_class label">Введите код:</div>
<p>Стягивайте цифры на синее поле!!!</p>
<ul id="code_block">
        <li><div>1</div></li>
        <li><div>2</div></li>
        <li><div>3</div></li>
        <li><div>4</div></li>
        <li><div>5</div></li>
        <li><div>6</div></li>
        <li><div>7</div></li>
        <li><div>8</div></li>
        <li><div>9</div></li>
</ul>
<div id="res" class="common_class"></div>
<div id="reg" class="action common_class">Сохранить код</div>
<div id="login" class="action common_class">Пройти проверку</div>

CSS

#code_block {
    width: 285px;
    height: 285px;
    margin-left: 30px;
}
#code_block li {
    padding: 5px;
    display: inline-block;
}
#code_block div {
    position: abcolute;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    text-shadow: 1px 1px 3px #666666,
                 -1px -1px 3px #FFFFFF,
                 1px 1px #666666,
                 -1px -1px #FFFFFF;
    background: #999;
    cursor: move;
}
#uname {
    height: 25px;
    width: 300px;
    border: none;
    padding: 10px;
    margin-left: 5px;
    color: #FFDEAD;
    text-align: center;
    font-size: 1.5em;
}
.action, #res, .label {
    padding: 5px;
    width: 306px;
    margin: 5px 5px;
    color: #FFDEAD;
    text-align: center;
    text-shadow: 1px 1px 1px #000000,
                 0px 0px 3px #FFFFFF;
    cursor: pointer;
}
 #res {
    cursor: default;
    height: 80px;
    line-height: 80px;
    background: #036;
}
.common_class {
    font-size: 1.7em;
    border: 1px solid #333;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -o-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    overflow: hidden;
    background: #333;
    
}
.label {
    background: #333;
}
.choiced div {
    background: #FF0 !important;
}
.highlight {
    background: #060 !important;
}
p {
    font-size: 1.3em;
    color: #F00;
    margin-left: 10px;
}

JavaScript

var codeBut = $('#code_block div').addClass('common_class');
var uname = $('#uname');
var codeArr = [];
$('#code_block li').draggable({ 
    revert: true
});
var res = $('#res').droppable({
    hoverClass: 'highlight',
    accept: 'li:not(.choiced)',
    drop: function( event, ui ) {
        var curBut = ui.helper;
        curBut.addClass('choiced');
        res.append(curBut.text());
    }
});
/*
Array.prototype.remove=function(s){
    for (i=0; i < this.length; i++){
        if (s == this[i]){
            this.splice(i, 1);
            --i;
        }
    }
};
*/

/*codeBut.click(function(){
    $(this).toggleClass('choiced');
    if($(this).hasClass('choiced')){
        codeArr.push($(this).text());
    } else {
        codeArr.remove($(this).text());
    }
    res.text(codeArr.join(''));
    if(res.text() === ''){
        res.rext('');
    }
});*/

function clearInfo(){
    uname.val('');
    $('li').removeClass('choiced');
    codeArr = [];
    res.text('');
}

$('#reg').click(function(){
    var userName = $.trim(uname.val());
    //var userPass = $.trim(codeArr.join(''));
    var userPass = $.trim(parseInt($('#res').text(), 10));
    if(!localStorage.getItem(userName)){
        if(userName !== '' && userPass !== '') {
            localStorage.setItem(userName, userPass);
            alert('Теперь вы под пристальным наблюдением спец.служб!!!');
        } else {
            alert('Имя или пароль не введены!');
        }
    } else {
        alert('Это имя уже используется!');
    }
    clearInfo();
});
$('#login').click(function(){
    var userName = $.trim(uname.val());
    //var userPass = $.trim(codeArr.join(''));
    var userPass = $.trim(parseInt($('#res').text(), 10));
    var curPass = localStorage.getItem(userName);
    if(curPass !== null){
        if(curPass == userPass) {
            localStorage.setItem(userName, userPass);
            alert('Ух, ты! Здарофф, ' + userName + '! Пиво будешь?');
            clearInfo();
        } else {
           ...