Hashing functions example

MD5, SHA-1 and SHA-256 hash functions example by Mikołaj Kamiński. https://becomeapro.pl/

by mikasjp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/core.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha256.min.js"></script>
<label for="function">Hash function:</label>
<select id="function" name="title">
  <option value="md5" selected>MD5</option>
  <option value="sha1">SHA-1</option>
  <option value="sha256">SHA-256</option>
</select>
<label for="data">Data:</label>
<textarea id="data" placeholder="Write some text"></textarea>
<label for="hash">Hash:</label>
<textarea id="hash" readonly></textarea>

CSS

label {
  margin-top: 10px;
}

label,
textarea,
select {
  width: 100%;
  display: block;
}

JavaScript

function HashFunction(text) {
  var fnc = $("#function").val();
  if (fnc == "md5")
    return CryptoJS.MD5(text).toString();
  else if (fnc == "sha1")
    return CryptoJS.SHA1(text).toString();
  else
    return CryptoJS.SHA256(text).toString();
}

function HashDarling() {
  $("#hash").val(HashFunction($("#data").val()));
}

$("#data").on("change keyup paste", function() {
  HashDarling();
});

$("#function").on("change", function() {
  HashDarling();
});

$(document).ready(function() {
  HashDarling();
});