Hash Identifier

Hash Identifier.markdown

Hash Identifier

Punch a hash into the box, the page will tell you what kind of hash it might be. For most hashes there will be multiple matches.

A Pen by mattfinch on CodePen.

License.

index.html

<h1>Enter a hash!</h1>
		<input type="text" class="inputHash" autofocus="autofocus"></input>
		<div class="output"></div>
		<footer><a href="https://mattfin.ch">mattfin.ch</a></footer>

script.js

hashTypes = getHashTypes();

$('.inputHash').on('input', function() {
    if (!$('.inputHash').val()) {
        $('h1').text("Enter a hash!");
        $('.output').slideUp();
        $('body').css('background-color', '#78909C');
    } else {
        var inputHash = $('.inputHash').val();
        var matches = new Array();

        $.each(hashTypes, function() {
            if (inputHash.match(this.pattern)){
                $.each(this.names, function() {
                     matches.push(this);
                });
            };
        });

        if (matches.length > 0) {
            $('h1').text("Matches Found!");
            $('.output').slideDown();
            $('.output').html(matches.toString().replace(/,/g,"<br />"));
            $('body').css('background-color', '#66BB6A');
        } else {
            $('h1').text("No matches.");
            $('.output').slideUp();
            $('body').css('background-color', '#EF5350');
        }
    }
});

function getHashTypes() {
    var ret = [];
    $.getJSON("https://raw.githubusercontent.com/psypanda/hashID/master/prototypes.json", function(json) {
        $.each(json, function() {
            hashType = new Object();
            hashType.names = [];
            hashType.pattern = this.regex;
            $.each(this.modes, function() {
                hashType.names.push(this.name);
            });
            ret.push(hashType);
        });
    });
    return ret;
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html {
    position: relative;
    min-height: 100%;
}
body {
    background: #78909C;
    text-align: center;
    color: #fff;
    margin: 5% 0 50px; /* bottom = footer height */
}
.inputHash {
    width: 50%;
    min-width: 300px;
    margin: 1em auto;
    font-size: 2em;
    background: #fff;
    border: none;
    padding: .5em;
}
.output {
    display: none;
    font-size: 1.25em;
    line-height: 1.5em;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
}
footer a {
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    font-family: 'Inconsolata','Consolas',monospace;
    font-size: 0.75em;
}
* {
    font-family: 'Roboto';font-weight: 300;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    outline:none;
}

styles

<link href="http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900,400'" rel="stylesheet" />