function createAvatar(name, size) { function getInitials(name) { var nameArray = name.split(" "); if(nameArray.length <= 1) { return name.charAt(0).toUpperCase(); } return nameArray[0].charAt(0).toUpperCase() + nameArray[1].charAt(0).toUpperCase(); } function getRandomColor(colors) { var index = Math.floor((Math.random() * colors.length) + 0); return colors[index]; } var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"]; var initials = getInitials(name); var $elem = $('
'); var $text = $elem.find('span').text(initials); $elem.css({ 'height': size, 'width': size, 'font-size': size / 2.5, 'background': getRandomColor(colors), 'border-radius': '50%' }); $elem.addClass('generated-avatar'); return $elem; } var list = [ 'Pete Campbell', 'Don Draper', 'Peggy Olsen', 'Roger M. Sterling', 'Joan', 'victor@auth0.com' ]; for (person in list) { var name = list[person], $avatar = createAvatar(name, 60); $('body').append($avatar); }