<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/yy/pen/rVXJrR?q=Generator&limit=all&type=type-pens" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,300,500&subset=latin,latin-ext'>
<style class="cp-pen-styles">*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
body, html {
position: relative;
height: 100%;
}
body {
background: #dce1e3;
font-family: 'Roboto';
color: #fff;
}
input, button, textarea,
.generator {
transition: all .4s ease-in-out;
}
.generator {
position: absolute;
display: block;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
font-size: 0;
white-space: nowrap;
margin-left: 125px;
}
.generator.generated {
margin-left: 0;
}
form {
z-index: 5;
position: relative;
display: inline-block;
vertical-align: middle;
overflow: hidden;
max-width: 300px;
width: 100%;
border-radius: 6px;
background: #fafafc;
box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
font-size: initial;
white-space: normal;
}
h1 {
position: relative;
display: block;
margin: 0; padding: 0 25px;
height: 60px;
font-size: 14px;
font-weight: 400;
color: #859299;
line-height: 60px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
input {
position: relative;
display: block;
margin: 0; padding: 0 25px;
width: 300px; height: 60px;
font-size: 12px;
font-weight: 400;
color: #c1c9cc;
line-height: 60px;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 0;
border-radius: 0;
box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
background: #f2f3f6;
}
.possible {
text-transform: none;
}
input:focus,
input:active {
background: #a1d3b5;
color: #608a71;
}
button {
position: relative;
display: block;
margin: 0; padding: 0 25px;
width: 100%; height: 60px;
font-size: 12px;
font-weight: 400;
color: #859299;
line-height: 60px;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 0;
border-radius: 0;
box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
background: #fafafc;
}
button:hover {
background: #a1d3b5;
color: #608a71;
}
textarea {
z-index: 2;
position: relative;
display: inline-block;
vertical-align: middle;
width: 250px; height: 200px;
max-width: 250px; max-height: 200px;
padding: 25px;
border: 0;
border-radius: 0 6px 6px 0;
background: #859299;
box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
white-space: normal;
font-size: 12px;
font-weight: 400;
color: #fff;
transform: translateX(-275px)
}
.generated textarea {
transform: translateX(0);
}</style></head><body>
<div class="generator">
<form>
<h1>Code Generator</h1>
<input class="length" type="number" min="2" placeholder="How long your codes will be?">
<input class="count" type="number" min="1" placeholder="How many code you want?">
<input class="possible" type="text" placeholder="Possible characters" value="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789">
<button class="generate">Generate</button>
</form>
<textarea class="codes"></textarea>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var generated = [],
possible = $(".possible").val() ? $(".possible").val() : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
function generateCodes(number, length) {
for ( var i=0; i < number; i++ ) {if (window.CP.shouldStopExecution(1)){break;}
generateCode(length);
}
window.CP.exitedLoop(1);
$("textarea").val(generated.join("\n"));
$(".generator").addClass("generated");
}
function generateCode(length) {
var text = "";
for ( var i=0; i < length; i++ ) {if (window.CP.shouldStopExecution(2)){break;}
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
window.CP.exitedLoop(2);
if ( generated.indexOf(text) == -1 ) {
generated.push(text);
}else {
generateCode();
}
}
$(".generate").on("click", function(e) {
var num = $(".count").val() ? $(".count").val() : 5,
len = $(".length").val() ? $(".length").val() : 5;
possible = $(".possible").val() ? $(".possible").val() : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
generateCodes(num, len);
return false;
});
//# sourceURL=pen.js
</script>
</body></html>
