Skip to content

Instantly share code, notes, and snippets.

@apokusin apokusin/index.html
Created Aug 16, 2013

Embed
What would you like to do?
A CodePen by Artur Pokusin. Code Unlock - A simple unlock UI element that I'm working on for a side project. It validates to "1234"
<div>
<h3>enter code</h3>
<form class="code_input">
<input type="text" maxlength="1" placeholder="#" autofocus></input>
<input type="text" maxlength="1" placeholder="#"></input>
<input type="text" maxlength="1" placeholder="#"></input>
<input type="text" maxlength="1" placeholder="#"></input>
</form>
<ul class="hint">
<li>Valid Code: <strong>1234</strong></li>
</ul>
</div>
// Form element
var form = $(".code_input");
var formInputs = $("input");
var validCode = "1234";
$(formInputs).autotab_magic();
var inputCode = function() {
var code = [];
$(formInputs).each(function(){
code.push($(this).val());
});
return code.join("");
};
var validateCode = function() {
var c = inputCode();
if ( c === validCode ) {
$(form).removeClass("error").addClass("success");
$(".hint").fadeOut();
return false;
} else if ( c.length === 4 ) {
$(".hint").fadeIn();
} else {
$(form).addClass("error").removeClass("success");
return false;
}
}
var clearInputs = function() {
$("input:first-child").focus();
$(formInputs).val('');
$(form).removeClass();
};
$(formInputs).keyup(function() {
if (event.keyCode == 8 || event.keyCode == 46) {
clearInputs();
return false;
} else {
validateCode();
}
});
$(formInputs).click(function() {
validateCode();
clearInputs();
});
* {
box-sizing: border-box;
text-rendering: optimizeLegibility;
margin: 0;
padding: 0;
}
body {
font-family: "Source Sans Pro", sans-serif;
text-align: center;
padding: 1em;
color: #ccc;
font-weight: 200;
}
div {
width: 200px;
text-align: center;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -70px;
}
h3 {
font-weight: 100;
font-size: 28px;
color: #ccc;
line-height: 36px;
margin-bottom: 1em;
}
form {
width: auto;
}
form.success input {
color: #8CE62C;
border-color: #8CE62C;
}
input {
font-family: "Source Sans Pro", sans-serif;
font-weight: 200;
width: 40px;
height: 50px;
border: 1px solid #CCCCCC;
display: block;
float: left;
margin-right: 10px;
outline: 0;
font-size: 28px;
color: #ccc;
line-height: 40px;
text-align: center;
cursor: pointer;
}
input:hover {
color: #9B9B9B;
}
input:focus {
color: #0091FF;
border-color: #0091FF;
}
.hint {
display: none;
}
ul {
padding-top: 2em;
clear: both;
}
ul li {
list-style-type: none;
}
strong {
color: #777;
font-weight: 200;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.