VizHash.js Password Check Demo

HTML

<script src="https://raw.github.com/sametmax/VizHash.js/master/vizhash.min.js"></script>
<h1>VizHash.js Password Check Demo</h1>

  <p><a href="https://github.com/sametmax/VizhHash.js">Project page</a></p>

<form action="." method="get" name="hashForm"
      accept-charset="utf-8" >
  <p id="hashInput">
    <label for="userInput" >
      Password: <input type="password" name="userInput" >
    </label>
  </p>

</form>

CSS

canvas {
            -moz-box-shadow: 3px 3px 3px rgba(68,68,68,0.6);
            -webkit-box-shadow: 3px 3px 3px rgba(68,68,68,0.6);
            box-shadow: 3px 3px 3px rgba(68,68,68,0.6);

            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            margin:1em;
            vertical-align:middle;
}
p {
margin:1em;
}

JavaScript

$(function(){


function addHash(){
  if (vizhash.supportCanvas()) {
    try {
      var pwd = document.hashForm.userInput.value;
      var vhash = vizhash.canvasHash(pwd, 64, 64);
      var pwdhash = document.getElementById('pwdhash');
      var hashInput = document.getElementById('hashInput');
      if (pwdhash) { hashInput.removeChild(pwdhash)}

      vhash.canvas.id = 'pwdhash';
      hashInput.appendChild(vhash.canvas);

    } catch (err) {
      alert(err);
    }

  }
}

    $('label').keyup(addHash);    
    
});