<h1>PIN code 1.0</h1>
<div class=”pin-code”>
<input type=”number” maxlength=”1″ autofocus>
<input type=”number” maxlength=”1″>
<input type=”number” maxlength=”1″>
<input type=”number” maxlength=”1″>
</div>


<style>

h1 {
font-family: helvetica;
text-align:center;
}

.pin-code{
padding: 0;
margin: 0 auto;
display: flex;
justify-content:center;

}

.pin-code input {
border: none;
text-align: center;
width: 48px;
height:48px;
font-size: 36px;
background-color: #F3F3F3;
margin-right:5px;
}

.pin-code input:focus {
border: 1px solid #573D8B;
outline:none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
<script>
//var pinContainer = document.getElementsByClassName(“pin-code”)[0];
var pinContainer = document.querySelector(“.pin-code”);
console.log(‘There is ‘ + pinContainer.length + ‘ Pin Container on the page.’);

pinContainer.addEventListener(‘keyup’, function (event) {
var target = event.srcElement;

var maxLength = parseInt(target.attributes[“maxlength”].value, 10);
var myLength = target.value.length;

if (myLength >= maxLength) {
var next = target;
while (next = next.nextElementSibling) {
if (next == null) break;
if (next.tagName.toLowerCase() == “input”) {
next.focus();
break;
}
}
}

if (myLength === 0) {
var next = target;
while (next = next.previousElementSibling) {
if (next == null) break;
if (next.tagName.toLowerCase() == “input”) {
next.focus();
break;
}
}
}
}, false);

pinContainer.addEventListener(‘keydown’, function (event) {
var target = event.srcElement;
target.value = “”;
}, false);
</script>