JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<p>
your password, please: <input class="example" type="password" size="11" value=""/>
- <button>generate random password</button>
</p>

CSS

body {
    padding: 1em;
}
input[type=password] {
    background: white none;
    color: black;
}
input[type=password].load {
    background: #eec url(http://creativecouple.github.com/jquery-timing/load.gif) right center no-repeat;
}

JavaScript

var alphabet = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';

function addRandomChar() {
    return $(this).val() + alphabet[Math.floor(Math.random() * alphabet.length)];
}
$('button').click($).prev().unrepeat().val('').addClass('load')
    .repeat(200).val(addRandomChar).until(10).removeClass('load');