klebercode · August 25, 2015 18:59
diff --git a/user-initials.html b/user-initials.html
 <html>
 	<head>
 		<title>User Initials</title>

 		<style>
 			/* Relevant Code */
 		.person {
 			display: table;
 			margin: 24px auto;
 			}
 			.person > * {
 				display: table-cell;
 				vertical-align: middle;
 			}

 			.person-avatarPlaceholder {
 				width: 48px;
 				height: 48px;
 				border-radius: 50%;
 				border: 2px solid;
 				line-height: 46px;
 				text-align: center;
 			}
 			.person-avatarPlaceholder.color-0 {
 				color: #d9566f;
 				background: rgba(217, 86, 111, 0.15);
 			}
 			.person-avatarPlaceholder.color-1 {
 				color: #56bcd9;
 				background: rgba(86, 188, 217, 0.15);
 			}
 			.person-avatarPlaceholder.color-2 {
 				color: #7fbb15;
 				background: rgba(127, 187, 21, 0.15);
 			}

 			.person-name {
 				padding-left: 12px;
 			  }

 			  /* Style */
 			* {
 				box-sizing: border-box;
 			  }

 			  body {
 				  color: #4f4f4f;
 				  font-size: 18px;
 				  font-family: "Helvetica Neue", "Segoe UI", "Roboto", sans-serif;
 				  padding: 24px;
 				  text-align: center;
 			}

 			input {
 				-webkit-appearance: none;
 				border-radius: 0;
 				border: 1px solid #4f4f4f;
 				font: inherit;
 				height: 32px;
 				line-height: 32px;
 				padding: 0 8px;
 				margin: 0;
 			}
 			input:focus {
 				outline: none;
 			  }
 			  input + .btn {
 				  margin-left: -1px;
 			}

 			.btn {
 				cursor: pointer;
 				display: inline-block;
 				vertical-align: top;
 				height: 32px;
 				line-height: 32px;
 				padding: 0 8px;
 				border: 1px solid #4f4f4f;
 				background: linear-gradient(to bottom, white 0%, #eee 100%);
 			}
 			.btn:hover {
 				background: linear-gradient(to bottom, white 0%, #ddd 100%);
 			  }

 			  .form {
 				  display: table;
 				  margin: 0 auto;
 				  zoom: 1;
 			}
 			.form > * {
 				float: left;
 			  }
 			  .form:before, .form:after {
 				  content: ".";
 				  display: block;
 				  height: 0;
 				  overflow: hidden;
 			  }
 			  .form:after {
 				  clear: both;
 			}

 			.serif {
 				font-family: Georgia, serif;
 				margin-bottom: 24px;
 			}

 			@media (max-width: 767px) {
 				body {
 					font-size: 15px;
 			}
 			}

 		</style>
 	</head>

 	<body>
 		<p class="serif">Change the input below and see how the placeholder avatar reacts.</p>
 		<div class="form">
 			<input type="text" value="Jerry Primrose" class="js-input"/>
 			<a class="btn js-submit">Submit</a>
  		</div>
  		<div class="person">
 	    	<div>
 				<div class="person-avatarPlaceholder color-1 js-avatarPlaceholder">
 					<span class="js-initials">JP</span>
 				</div>
 			</div>
 			<div class="person-name js-name">Jerry Primrose</div>
 		</div>

 		<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 		<script>
 			String.prototype.hashCode = function() {
 				var hash = 0,
 				i, chr, len;
 				if (this.length == 0) return hash;
 					for (i = 0, len = this.length; i < len; i++) {
 						chr = this.charCodeAt(i);
 						hash = ((hash << 5) - hash) + chr;
 						hash |= 0; // Convert to 32bit integer
 					}
 					return hash;
 			};
 			String.prototype.getInitials = function(glue) {
 				if (typeof glue == "undefined") {
 					var glue = true;
 				}
 				var initials = this.replace(/[^a-zA-Z- ]/g, "").match(/\b\w/g);
 				if (glue) {
 					return initials.join('').substring(0, 2);
 				}
 				return initials.substring(0, 2);
 			};
 			var numColors = 3;
 			$('.js-submit').click(function() {
 				var initials = $('.js-input').val().getInitials();
 				var hash = Math.abs($('.js-input').val().hashCode()) % numColors;
 				$('.js-initials').text(initials);
 				$('.js-name').text($('.js-input').val());
 				$('.js-avatarPlaceholder').removeClass('color-0').removeClass('color-1').removeClass('color-2').addClass('color-' + hash);
 			});
 		</script>
 	</body>
 </html>
	<html>
	<head>
	<title>User Initials</title>

	<style>
	/* Relevant Code */
	.person {
	display: table;
	margin: 24px auto;
	}
	.person > * {
	display: table-cell;
	vertical-align: middle;
	}

	.person-avatarPlaceholder {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid;
	line-height: 46px;
	text-align: center;
	}
	.person-avatarPlaceholder.color-0 {
	color: #d9566f;
	background: rgba(217, 86, 111, 0.15);
	}
	.person-avatarPlaceholder.color-1 {
	color: #56bcd9;
	background: rgba(86, 188, 217, 0.15);
	}
	.person-avatarPlaceholder.color-2 {
	color: #7fbb15;
	background: rgba(127, 187, 21, 0.15);
	}

	.person-name {
	padding-left: 12px;
	}

	/* Style */
	* {
	box-sizing: border-box;
	}

	body {
	color: #4f4f4f;
	font-size: 18px;
	font-family: "Helvetica Neue", "Segoe UI", "Roboto", sans-serif;
	padding: 24px;
	text-align: center;
	}

	input {
	-webkit-appearance: none;
	border-radius: 0;
	border: 1px solid #4f4f4f;
	font: inherit;
	height: 32px;
	line-height: 32px;
	padding: 0 8px;
	margin: 0;
	}
	input:focus {
	outline: none;
	}
	input + .btn {
	margin-left: -1px;
	}

	.btn {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	height: 32px;
	line-height: 32px;
	padding: 0 8px;
	border: 1px solid #4f4f4f;
	background: linear-gradient(to bottom, white 0%, #eee 100%);
	}
	.btn:hover {
	background: linear-gradient(to bottom, white 0%, #ddd 100%);
	}

	.form {
	display: table;
	margin: 0 auto;
	zoom: 1;
	}
	.form > * {
	float: left;
	}
	.form:before, .form:after {
	content: ".";
	display: block;
	height: 0;
	overflow: hidden;
	}
	.form:after {
	clear: both;
	}

	.serif {
	font-family: Georgia, serif;
	margin-bottom: 24px;
	}

	@media (max-width: 767px) {
	body {
	font-size: 15px;
	}
	}

	</style>
	</head>

	<body>
	<p class="serif">Change the input below and see how the placeholder avatar reacts.</p>
	<div class="form">
	<input type="text" value="Jerry Primrose" class="js-input"/>
	<a class="btn js-submit">Submit</a>
	</div>
	<div class="person">
	<div>
	<div class="person-avatarPlaceholder color-1 js-avatarPlaceholder">
	<span class="js-initials">JP</span>
	</div>
	</div>
	<div class="person-name js-name">Jerry Primrose</div>
	</div>

	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	<script>
	String.prototype.hashCode = function() {
	var hash = 0,
	i, chr, len;
	if (this.length == 0) return hash;
	for (i = 0, len = this.length; i < len; i++) {
	chr = this.charCodeAt(i);
	hash = ((hash << 5) - hash) + chr;
	hash \|= 0; // Convert to 32bit integer
	}
	return hash;
	};
	String.prototype.getInitials = function(glue) {
	if (typeof glue == "undefined") {
	var glue = true;
	}
	var initials = this.replace(/[^a-zA-Z- ]/g, "").match(/\b\w/g);
	if (glue) {
	return initials.join('').substring(0, 2);
	}
	return initials.substring(0, 2);
	};
	var numColors = 3;
	$('.js-submit').click(function() {
	var initials = $('.js-input').val().getInitials();
	var hash = Math.abs($('.js-input').val().hashCode()) % numColors;
	$('.js-initials').text(initials);
	$('.js-name').text($('.js-input').val());
	$('.js-avatarPlaceholder').removeClass('color-0').removeClass('color-1').removeClass('color-2').addClass('color-' + hash);
	});
	</script>
	</body>
	</html>