Discussion 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 number = "0123456789";
var userInitials = {};

var initials = '[{ "userID": "rkanagarajnr2", "initial": "RK", "ID": 1 }, 									{ "userID": "ednr1", "initial": "ED", "ID": 2 },												{ "userID": "dvelmurugannrdv", "initial": "DV", "ID": 3 }, { "userID": "parimalasnr", "initial": "PS", "ID": 4 }, 								 { "userID": "viswanathnr", "initial": "VV", "ID": 5 }, { "userID": "gopinr", "initial": "GS", "ID": 6 },  							           { "userID": "mquachnr", "initial": "MQ", "ID": 7 }, { "userID": "umanr", "initial": "UP", "ID": 8 }, 														 { "userID": "asifnr", "initial": "AM", "ID": 9 }, { "userID": "smurugesannr", "initial": "SM", "ID": 10 }, 											 { "userID": "lydianr", "initial": "LD", "ID": 11 }, { "userID": "rkanagaraj", "initial": "RK", "ID": 12 }]';
/*console.log(initials);
var initials = "dvelmurugannrdv,parimalasnr,ednr,viswanathnr,gopinr,mquachnr,umanr,rkanagarajnr,asifnr,smurugesannr".split(',');*/

$.each($.parseJSON(initials), function(i, v) {
  userid = $.trim(v.userID.toLowerCase());
  var s = 0; var h = 0;
  if (userInitials[userid] == undefined) {
    for (x = 0; x < userid.length; x++) {
      if (isNaN(userid.charAt(x))) {
        n = parseInt(str.indexOf(userid.charAt(x)));
      } else {
        n = parseInt(number.indexOf(userid.charAt(x)));
      }
      h += n;
    }
    s = 20 + 2.5 * parseInt(str.indexOf(v.initial.charAt(1).toLowerCase()));
    userInitials[v.userID] = {
      h: h,
      s: s
    };
  }
  $('.initial-container').append('<div style="background-color: hsl(' + userInitials[v.userID].h + ', ' + userInitials[v.userID].s + '%, 35%)" class="user-initial"><div>' + v.initial + '</div></div>');
});

console.log(userInitials);