Profile Picture - Initials

by Ramesh Kanagaraj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<p>
  &nbsp;
</p>

<div class='initial-container'>

</div>

CSS

.user-initial {
  border-radius: 50%;
  font-family: "Lucida Console", monospace;
  font-size: 2.5em;
  width: 2em;
  height: 2em;
  float: left;
  margin: 5px 0 0 5px;
  color: white;
}

.user-initial::after {
  float: left;
}

.user-initial div {
  padding-top: 0.5em;
  text-align: center;
}

JavaScript

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var userInitials = {};

var initials = "LE,EL,RK,SM,AM,MQ,LD,DV,PS,PK,VV,GS,UP,WW,RK,ZZ,EL".split(',');

$.each(initials, function(i, v) {
  if (userInitials[v] == undefined) {
    H = ((parseInt(str.indexOf(v.charAt(0))) * 14) + (parseInt(str.indexOf(v.charAt(1))) * 9)) % 360;
    userInitials[v] = H
  }
  $('.initial-container').append('<div style="background-color: hsl(' + userInitials[v] + ', 85%, 45%)" class="user-initial"><div>' + v + '</div></div>');
});

console.log(userInitials);