$(function(){
var textfield = $("input[name=user]");
$('button[type="submit"]').click(function(e) {
e.preventDefault();
if (textfield.val() != "") {
$("#output").addClass("alert alert-success animated fadeInUp").html("Welcome back " + "<span style='text-transform:uppercase'>" + textfield.val() + "</span>");
$("#output").removeClass(' alert-danger');
$("input").css({
"height":"0",
"padding":"0",
"margin":"0",
"opacity":"0"
});
$('button[type="submit"]').html("continue")
.removeClass("btn-info")
.addClass("btn-default").click(function(){
$("input").css({
"height":"auto",
"padding":"10px",
"opacity":"1"
}).val("");
});
$(".avatar").css({
"background-image": "url('http://api.randomuser.me/0.3.2/portraits/women/35.jpg')"
});
} else {
$("#output").removeClass(' alert alert-success');
$("#output").addClass("alert alert-danger animated fadeInUp").html("sorry enter a username ");
}