TheAshwanik/CSS

## CSS
body{
  font-family:Helvetica,Arial;
  background:#f4f4f4;
}
h2{
  font-weight:normal;
}
#invite{
  position:relative;
  background:#fff;
  border:1px solid #ACACAC;
  padding:25px;
  margin:15px;
  box-shadow:0px 2px 5px #999;
}
#tags{
  border:1px solid #E3E3E3;
  padding:5px;
}
#tags{
  overflow:auto;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags span.tag{
  border-radius:3px;
  border:1px solid #2F8ABD;
  font-size:13px;
  font-weight:bold;
  color:#fff;
  cursor:pointer;
  display:block;
  float:left;
  padding:5px;
  padding-right:25px;
  margin:4px;
  background: #62c1f0; /* Old browsers */
background: -moz-linear-gradient(top,  #62c1f0 0%, #559ac3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62c1f0), color-stop(100%,#559ac3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #62c1f0 0%,#559ac3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #62c1f0 0%,#559ac3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #62c1f0 0%,#559ac3 100%); /* IE10+ */
background: linear-gradient(to bottom,  #62c1f0 0%,#559ac3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62c1f0', endColorstr='#559ac3',GradientType=0 ); /* IE6-9 */
}
#tags span.tag:hover{
  opacity:0.7;
}
#tags span.tag:after{
 position:absolute;
 content:"×";
 font-size:14px;
 padding:0 4px;
 margin:0 0 10px 5px;
 opacity:0.5;
}
#tags span.tag:hover:after{
  color:red;
  opacity:1;
}
input#email{
  /*clear:left;*/
  float:left;
  background:#eee;
  border:0;
  margin:4px;
  padding:5px;
  border:1px solid #ddd;
  width:auto;
}

/* VALIDATION */
.invalid{
  border: 1px solid red !important;
}


/* SUBMIT BTN */
input#send{
  cursor:pointer;
  border:0;
  margin:10px 0;
  padding:15px 35px;
  color:#fff;
  border-radius:3px;
  background:#4C89FD;
}


## HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>


 <form id="invite">

   <h2>Invite people to join you</h2>

   <p>Invite people by email.</p>
  <div id="tags">
    <span class="tag">treehouse@gmail.com</span>
    <span class="tag">boss@example.com</span>
    <span class="tag">myemail@gmail.com</span>
    <span class="tag">friend@yahoo.com</span>
    <input id="email" type="text" value="" placeholder="Add friend's email" />
  </div>

   <input id="send" type="button" value="SEND">

 </form>


</body>
</html>

## JS
function validEmail( val ) {
    var regx = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return regx.test(val);
}

$(function(){

  var $emailInput = $('#email');

  function validateEmailEntry( val ){
      var v = val;
      // Remove comma from validation, use as separator
      if(v.slice(-1) == ',')v = val.substring(0, val.length -1);
      if(validEmail(v)) {
          $emailInput.val('').removeClass('invalid').before('<span class="tag">'+ v +'</span>');
      }else{
          $emailInput.addClass('invalid');
      }
  }

  // validate on: Comma, Enter, Focusout
  $emailInput.on('keyup focusout', function( e ) {
      if(/(188|13)/.test(e.which) || e.type=='focusout')
      validateEmailEntry( this.value );
  });

  // PREVENT ENTER SUBMIT (we use it as separator)
  $('#invite').on('keypress', function( e ) {
      if(e.which==13) e.preventDefault();
  });

  $('#tags').on('click','.tag',function(){
       if(confirm("Really delete this email?")) $(this).remove();
  });


  // SUBMIT
  $('#send').click(function(){
      var data = [];
      var $em = $('#tags').find('.tag');
      $.each($em, function(){
         data.push( $(this).text() );
      });
      alert( data ); // TEST DATA
  });

});
	body{
	font-family:Helvetica,Arial;
	background:#f4f4f4;
	}
	h2{
	font-weight:normal;
	}
	#invite{
	position:relative;
	background:#fff;
	border:1px solid #ACACAC;
	padding:25px;
	margin:15px;
	box-shadow:0px 2px 5px #999;
	}
	#tags{
	border:1px solid #E3E3E3;
	padding:5px;
	}
	#tags{
	overflow:auto;
	border:1px solid #ccc;
	padding:5px;
	font-family:Arial;
	}
	#tags span.tag{
	border-radius:3px;
	border:1px solid #2F8ABD;
	font-size:13px;
	font-weight:bold;
	color:#fff;
	cursor:pointer;
	display:block;
	float:left;
	padding:5px;
	padding-right:25px;
	margin:4px;
	background: #62c1f0; /* Old browsers */
	background: -moz-linear-gradient(top, #62c1f0 0%, #559ac3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62c1f0), color-stop(100%,#559ac3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #62c1f0 0%,#559ac3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #62c1f0 0%,#559ac3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #62c1f0 0%,#559ac3 100%); /* IE10+ */
	background: linear-gradient(to bottom, #62c1f0 0%,#559ac3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62c1f0', endColorstr='#559ac3',GradientType=0 ); /* IE6-9 */
	}
	#tags span.tag:hover{
	opacity:0.7;
	}
	#tags span.tag:after{
	position:absolute;
	content:"×";
	font-size:14px;
	padding:0 4px;
	margin:0 0 10px 5px;
	opacity:0.5;
	}
	#tags span.tag:hover:after{
	color:red;
	opacity:1;
	}
	input#email{
	/clear:left;/
	float:left;
	background:#eee;
	border:0;
	margin:4px;
	padding:5px;
	border:1px solid #ddd;
	width:auto;
	}

	/* VALIDATION */
	.invalid{
	border: 1px solid red !important;
	}


	/* SUBMIT BTN */
	input#send{
	cursor:pointer;
	border:0;
	margin:10px 0;
	padding:15px 35px;
	color:#fff;
	border-radius:3px;
	background:#4C89FD;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>


	<form id="invite">

	<h2>Invite people to join you</h2>

	<p>Invite people by email.</p>
	<div id="tags">
	<span class="tag">treehouse@gmail.com</span>
	<span class="tag">boss@example.com</span>
	<span class="tag">myemail@gmail.com</span>
	<span class="tag">friend@yahoo.com</span>
	<input id="email" type="text" value="" placeholder="Add friend's email" />
	</div>

	<input id="send" type="button" value="SEND">

	</form>





	</body>
	</html>
	function validEmail( val ) {
	var regx = new RegExp(/^((([a-z]\|\d\|[!#\$%&'\\+\-\/=\?\^_`{\\|}~]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]\|\d\|[!#\$%&'\\+\-\/=\?\^_`{\\|}~]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+))\|((\x22)((((\x20\|\x09)(\x0d\x0a))?(\x20\|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]\|\x21\|[\x23-\x5b]\|[\x5d-\x7e]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))(((\x20\|\x09)(\x0d\x0a))?(\x20\|\x09)+)?(\x22)))@((([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|-\|\.\|_\|~\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|-\|\.\|_\|~\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
	return regx.test(val);
	}

	$(function(){

	var $emailInput = $('#email');

	function validateEmailEntry( val ){
	var v = val;
	// Remove comma from validation, use as separator
	if(v.slice(-1) == ',')v = val.substring(0, val.length -1);
	if(validEmail(v)) {
	$emailInput.val('').removeClass('invalid').before('<span class="tag">'+ v +'</span>');
	}else{
	$emailInput.addClass('invalid');
	}
	}

	// validate on: Comma, Enter, Focusout
	$emailInput.on('keyup focusout', function( e ) {
	if(/(188\|13)/.test(e.which) \|\| e.type=='focusout')
	validateEmailEntry( this.value );
	});

	// PREVENT ENTER SUBMIT (we use it as separator)
	$('#invite').on('keypress', function( e ) {
	if(e.which==13) e.preventDefault();
	});

	$('#tags').on('click','.tag',function(){
	if(confirm("Really delete this email?")) $(this).remove();
	});


	// SUBMIT
	$('#send').click(function(){
	var data = [];
	var $em = $('#tags').find('.tag');
	$.each($em, function(){
	data.push( $(this).text() );
	});
	alert( data ); // TEST DATA
	});

	});