Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <style>
  #avatar{
    position: relative;
    width: 50px;
    height: 60px;
  }
  .cols{
    height:10px;
    width:100%;
  }
  </style>
</head>
<body>
  <div id="avatar">
    <div class="cols"></div>
    <div class="cols"></div>
    <div class="cols"></div>
    <div class="cols"></div>
    <div class="cols"></div>
    <div class="cols"></div>
  </div>
  <input id="username" type="text">
  <input type="submit">
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script>
  $("input[type=submit]").on("click", function(){
    var username = $("#username").val(),
        userhash = CryptoJS.MD5(username).toString(),
        color;
    $(".cols").each(function(i,e){
      console.log(e,i, userhash.substring(i*6, (i+1)*6))
      userhash.substring(i*6, (i+1)*6).length === 6 ? color = userhash.substring(i*6, (i+1)*6) : color = userhash.substring(i*6, (i+1)*6)+userhash[0];
      $(e).css("background", "#"+color);
    });
  });
</script>
</body>
</html>
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