Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Image profil</title>
</head>
<body>
  <span id="pfl-img">
    <span id="pfl-ini"></span>
  </span>
</bo9dy>
</html>
 
#pfl-img {
  display: block;
  position: relative;
  width: 45px;
  height: 45px;
  color: white;
  font-family: Arial;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%;
  background-color: #333;
}
#pfl-img > #pfl-ini {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -9px;
}
 
var colors = ['#226666', '#AA3939', '#AA6C39', '#2D882D'];
function getColor() {
  var max = 3;
  var min = 0;
  var colorKey = Math.floor(Math.random() * (max - min)) + min;
  console.log(colorKey);
  var color = colors[colorKey];
  return color;
}
function avatarGen(fst_name, lst_name) {
  var pfl_img = document.getElementById('pfl-img');
  var pfl_ini = document.getElementById('pfl-ini');
  
  pfl_img.style.backgroundColor = getColor();
  
  // Generate initials and insert DOM
  var initials = /^\w/;
  var fst_initial = initials.exec(fst_name);
  var lst_initial = initials.exec(lst_name);
  pfl_ini.innerHTML = fst_initial + lst_initial;
  
  return 0;
}
(function() {
  avatarGen("Ruan", "Aragão");
})();
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers