Edit in JSFiddle

<h1>SHA-256 Authentication Demo</h1>
<form>
  <div>
    <label for="user">user:</label>
    <input type="text" id="user">
  </div>
  <div>
    <label for="passwd">password:</label>
    <input type="text" id="passwd">  
  </div>
  <div id="secure-hash" class="radios">
    <label><input type="radio" name="sha" value="sha256" checked>SHA-256</label>
    <label><input type="radio" name="sha" value="sha512">SHA-512</label>
  </div>
  <div class="button">
    <button type="button" id="check">check</button>
    <span id="generated-hash"></span>
  </div>
</form>

<div class="container">
  <p>Data stored in database</p>
  <table id="encrypted">
    <thead>
      <tr>
        <th class="table-user">user</th>
        <th class="table-passwd">password(hash)</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

<div class="container">
  <p>raw data</p>
  <table id="raw">
    <thead>
      <tr>
        <th class="table-user">user</th>
        <th class="table-passwd">password</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <p>Salt: <span id="salt"></span></p>
  <p>Stretch: <span id="stretch"></span>ms</p>
</div>

<div id="result"></div>

body {
  /* monospaced font */
  font-family     : Consolas, 'Courier New', Courier, Monaco, monospace;
  background-color: white;
}

$label-width      : 90px;
$container-padding: 20px;
$table-boder      : 1px #888888 solid;

/* input form */
form {
  padding: $container-padding;
  div + div {
    margin-top: 0.5em;
  }
  label {
    display   : inline-block;
    width     : $label-width;
    text-align: right;
  }
  input[type=text] {
    width: 300px;
  }
  .radios {
    padding-left: $label-width;
  }
  .button {
    padding-left: $label-width;
      button {
        width      : 80px;
        margin-left: 0.5em;
      }
  }
}

/* data grid */
.container {
  padding: $container-padding;
  table {
    width          : 100%;
    border         : $table-boder;
    border-collapse: collapse;
	  border-spacing : 0;
    line-height    : 1.5em;
    th {
      padding   : 5px;
      border    : $table-boder;
      background: #bbbbbb;
      text-align: center;
      &.table-user {
        width: 15%;
      }
      &.table-passwd {
        width: 75%;
      }
    }
    td {
      padding: 5px;
      border : $table-boder;
    }
  }
}

/* result */
#result {
  width      : 100%;
  text-align : center;
  line-height: 2em;
  font-size  : 1.5em;
  font-weight: bold;
  color : white; 
  &.success {
    background-color: rgb(68, 157, 68);
  }
  &.failure {
    background-color: rgb(217, 83, 79);
  }
}

// example data
var data = [
	{user: 'bc_rikko', password: 'password01'},
  {user: 'abc'     , password: 'password02'},
  {user: 'xyz1'    , password: 'password03'},
  {user: 'xyz2'    , password: 'password03'}
];

// counter measure for rainbow-table
var SALT = 'sha-256authenticationdemo';
var getSalt = function (user) {
	// encode base64
	return window.btoa(user + SALT);
};
var STRETCH = 1000;
var sha = sha256;

// create grid
var createGrid = function () {
	var $encryptedBody = $('table#encrypted > tbody');
  var $rawBody       = $('table#raw > tbody');

  $.each(data, function (i, d) {
  	var $encryptedTr = $('<tr>');
    $encryptedTr.append('<td>' + d.user +'</td>');
    $encryptedTr.append('<td>' + sha(d.password + getSalt(d.user)) + '</td>');
    $encryptedBody.append($encryptedTr);
    
    var $rawTr = $('<tr>');
    $rawTr.append('<td>' + d.user +'</td>');
    $rawTr.append('<td>' + d.password + '</td>');
    $rawBody.append($rawTr);
  });
};

// clear grid
var clearGrid = function () {
	var $encryptedBody = $('table#encrypted > tbody');
  var $rawBody       = $('table#raw > tbody');
  
	$.each($encryptedBody.find('tr'), function (i, row) {
  	$(row).remove();
  });
	$.each($rawBody.find('tr'), function (i, row) {
  	$(row).remove();
  });
};

// check authentication
var verify = function (user, passwd) {
	var user_pass = user + sha(passwd + getSalt(user));
  var isCertified = false;
  $('tbody > tr').each(function (i, $tr) {
  	if (user_pass === $($tr).text()) {
    	isCertified = true;
      return false;
    }
  });
  return isCertified;
};

// check event
$('#check').on('click', function () {
	var user = $('#user').val();
  var passwd = $('#passwd').val();

	$('#result').removeClass();
	setTimeout(function () {
  	success = verify(user, passwd);
    $('#result')
    	.text(success ? 'Success' : 'Failure')
      .removeClass(success ? 'failure' : 'success')
      .addClass(success ? 'success' : 'failure');

		$('#generated-hash').text(sha(passwd + getSalt(user)));
  }, STRETCH);
});

// selected secure hash algorithm
$('#secure-hash').on('change', function () {
	switch ($(this).find('input:checked').val()) {
  	case 'sha256':
    	sha = sha256;
      break;
    case 'sha512':
    	sha = sha512;
      break;
  }
  
  clearGrid();
  createGrid();
});

// load
$(function () {
	createGrid();
  $('#salt').text(SALT);
  $('#stretch').text(STRETCH);
});