JSFiddle - React, Tailwind, and code Playground

by I Sang Hyeon

HTML

<div>
    OTP image 내의 
    <select id="selEgSaltFrom"><option value="0">?</option></select>
    번째 문자부터 <br />
    <select id="selEgSaltCount"><option value="0">?</option></select>
    개의 문자를 <br />
    본인의 비밀번호 
    <select id="selEgSaltAt"><option value="0">?</option></select>
    번째 문자 뒤에<br />
    삽입하는 규칙을 설정합니다.
</div>
<p>
    <input type="button" id="cmdEgReset" value="reset"/>
    <input type="button" id="cmdEgGet" value="GetPassword"/>
</p>

<p>[본인의 비밀번호] : entersoft</p>
<p>[OTP image]</p>
<div id="divEg1" class="divEgBlock centeredText">a</div>
<div id="divEg2" class="divEgBlock centeredText">B</div>
<div id="divEg3" class="divEgBlock centeredText">c</div>
<div id="divEg4" class="divEgBlock centeredText">D</div>
<div id="divEg5" class="divEgBlock centeredText">E</div>
<div id="divEg6" class="divEgBlock centeredText">f</div>
<div id="divEg7" class="divEgBlock centeredText">g</div>
<div id="divEg8" class="divEgBlock centeredText">h</div>
<div id="divEg9" class="divEgBlock centeredText">i</div>
<div id="divEg10" class="divEgBlock centeredText">j</div>
<br />
<hr />
<p> 입력해야 할 비밀번호 : <span id="spnEgFinalPassword">entersoft</span></p>

CSS

.divEgBlock {
    position: relative;
    background-color: #abc;
    width: 20px;
    height: 20px;
    float: left;
    margin: 2px;
}
.centeredText{
    text-align : center;
}

JavaScript

var selectedSaltFrom = 0;
var selectedSaltCount = 0;
var selectedSaltAt = 0;

$(document).ready(function(){
    makeOptionsByNumber('selEgSaltFrom', 1, 10);
    egEvents();
});

function resetAllEgEvent(){
    resetSaltFrom();
    resetSaltCount();
    resetSaltAt();
    resetFinalPassword();
    clearEgEventClass();
    resetingHeightByClassAttr();
    makeOptionsByNumber('selEgSaltFrom', 1, 10);
}

function resetSaltFrom(){
    selectedSaltFrom = 0;
    $('#selEgSaltFrom').html('<option value="0">?</option>');
}

function resetSaltCount(){
    selectedSaltCount = 0;
    $('#selEgSaltCount').html('<option value="0">?</option>');
}

function resetSaltAt(){
    selectedSaltAt = 0;
    makeOptionsByNumber('selEgSaltAt', 1, 9);
}

function resetFinalPassword(){
    $('#spnEgFinalPassword').html('');
    $('#spnEgFinalPassword').html('entersoft');
}

function clearEgEventClass(){
    $('.divEgBlock').removeClass('eg40Height');
}

function resetingHeightByClassAttr(){
    $('.divEgBlock').animate({ "height": "20px" }, "slow" );
    $('.eg40Height').animate({ "height": "40px" }, "slow" );
}

function makeOptionsByNumber(makeAtID, valueFrom, valueTo){
    var $targetID = $('#'+makeAtID);
    var optLength = 0;
    var optValue = 0;
    var htmlString = '<option value="0">?</option>';
    
    if(valueFrom > valueTo)
        return false;
    
    optLength = (valueTo - valueFrom)+1;
    optValue = valueFrom;
    $targetID.html('');
    
    for(var i = 0; i < optLength; i++){
        htmlString += '<option value="'+optValue+'">'+optValue+'</option>';
        optValue++;
    }
    
    $targetID.html(htmlString);
}

function egEvents(){
    
    $('#selEgSaltFrom').change(function(){
        var selectedOptVal = parseInt($('#selEgSaltFrom option:selected').val());
        
		resetSaltCount();
 		resetSaltAt();
        resetFinalPassword();
        clearEgEventClass();
        
    	$('#divEg'+selectedOptVal).addClass('eg40Height');
        
        selectedSaltFrom =...