Diff Checker

A basic comparison for diff and all

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
<div class="container-fluid">
    <div class="row">
        <h2 class="text-center">Diff Checker</h2>
        <div class="col-md-6">
            <textarea class="form-control" id="first-text" placeholder="Original Text"></textarea>
        </div>
        <div class="col-md-6">
            <textarea class="form-control" id="second-text" placeholder="Copied Text"></textarea>
        </div>
        <div class="col-md-12 text-center">
            <button id="diff-action" class="btn  btn-primary">Find Diff</button>
        </div>
    </div>
</div>

CSS

textarea.form-control{
    width:100%;
    margin-bottom: 20px;
    height:200px;
}

JavaScript

var dmp = new diff_match_patch();
$("#diff-action").on("click", function (e) {
		alert('a');
    e.preventDefault();
    var source = $("#first-text").val(), copied = $("#second-text").val();
    var diff_ray = dmp.diff_main(source, copied);
    console.log(diff_ray.length);
    dmp.diff_cleanupSemantic(diff_ray);
    console.log(diff_ray);
    alert(diff_ray);
    
                   
});