YouTube Demo - Form Personalisation

gistfile1.txt

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/1.0.1/js/md5.min.js"></script>

<script>
function validateEmail(email) {
    var re = /^[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
    return re.test(email);
}
$('#user_email').on('change keyup keydown', function() {
    var email = $(this).val(),
        valid = validateEmail(email);

    $(this).toggleClass('error', !valid);

    if (valid) {
        var hash = md5($.trim(email.toLowerCase())),
            url = 'http://www.gravatar.com/avatar/'+hash+'?s=100&d=mm&r=g';
            localStorage.setItem('md5', hash);

        $('#image').css('background-image', 'url('+url+')');

        $.get('http://www.gravatar.com/'+hash+'.json',
              function(s) {
                  console.log(s);

              });

    }
});
$('#user_username').on('change keyup keydown', function() {
  var name = $(this).val();
  localStorage.setItem('name', name);
  $( ".card-title" ).text( "Nice to meet you, "+name+"!");
});
</script>