Check Yo Hash Validator

In this example below you will see how to do a Check Yo Hash Validator with some HTML / CSS and Javascript

Validate file hashes/checksum values with this quick and easy online tool

Thumbnail
This awesome code was written by izotope115, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright izotope115 ©
  • HTML
  • CSS
  • JavaScript
    <header>
    <a href="https://github.com/izotope115/check_yo_hash" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
    <div class="row">
        <div class="col-lg-12">
            <h2>Check Yo Hash Validator</h2>
            <p>Validate file hashes/checksum values with this quick and easy online tool. For more information on Hash-based message authentication code
            visit the WIKI<a href="https://en.wikipedia.org/wiki/Hash-based_message_authentication_code" target="_blank"> here</a>.</p>
        </div>
    </div>
</header>

    <div class="row">
        <form>
            <div class="form-group">

                <input type="text" class="form-control" id="input1" placeholder="Enter First Hash Key">
            </div>
            <div class="form-group">

                <input type="text" class="form-control" id="input2" placeholder="Enter Second Hash Key">
            </div>

            <button type="button" class="btn btn-default" onclick="compare()">Submit</button> <button class="btn btn-default" type="button" value="Clear" onClick="window.location.reload()">Clear</button>
        </form>
    </div>

    <div class="row topMargin20">
        <div class="col-lg-12">
            <div class="message"></div>
        </div>
    </div>

    <footer class="text-center"><a href="https://www.gabrielkhofri.com" target="_blank">www.gabrielkhofri.com</a> |
        <a href="https://www.twitter.com/izotope115" target="_blank">Twitter</a>
    </footer>

/*Downloaded from https://www.codeseek.co/izotope115/check-yo-hash-validator-yaaEka */
    .textBoxLength {
    width: 512px;
}

.topMargin20 {
    margin-top:20px;
}

.wrap {
    word-wrap: break-word;
    font-size: 20px;
}
span {
    font-size: 14px;
}

body {
    background-color: #F3F0EB;
    margin:20px;
}


/*Downloaded from https://www.codeseek.co/izotope115/check-yo-hash-validator-yaaEka */
    function compare() {

    var history = [];
    var input1 = document.getElementById('input1').value.toUpperCase();
    var input2 = document.getElementById('input2').value.toUpperCase();

    if (input1 && input2 != '') {
        history.push(input1, '<br><br>', input2);

            if (input1 != input2) {
               $('.message').append('<p class="alert alert-danger wrap"><strong>ERR</strong> Hash Keys <strong>DO NOT MATCH!<br><span>'+history.join('')+'</span> </strong></p>');
            }

            else if (input1 === input2) {
               $('.message').append('<p class="alert alert-success wrap">Hash is Identical:<br><span>'+history.join('')+'</span></p>');
            }
    }

    else {
        $('.message').append('<p class="alert alert-warning wrap">Please Enter Your Hash Keys</p>');

    }

}

Comments