JSFiddle - React, Tailwind, and code Playground

by spinal007

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>
<table id="code_block">
    <tr>
        <td><div>1</div></td>
        <td><div>2</div></td>
        <td><div>3</div></td>
    </tr>
    
    <tr>
        <td><div>4</div></td>
        <td><div>5</div></td>
        <td><div>6</div></td>
    </tr>
    
    <tr>
        <td><div>7</div></td>
        <td><div>8</div></td>
        <td><div>9</div></td>
    </tr>
</table>
<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: 1%;
    margin-left: 30px;
}
#code_block td {
    padding: 5px;
}
#code_block div {
    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: pointer;
}
#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: 30px;
}
.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 {
    background: #FF0 !important;
}
p {
    font-size: 1.5em;
    color: #F00;
    margin-left: 10px;
}

JavaScript

var codeBut = $('#code_block td div').addClass('common_class');
var res = $('#res');
var uname = $('#uname');
var codeArr = [];

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('');
    codeBut.removeClass('choiced');
    codeArr = [];
    res.text('');
}

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