JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<div id="test">
    
</div>
<pre></pre>

CSS

#test
{
    background: #999;
    height:200px;
}

JavaScript

var mouseDiff = {
    "startPoint" : {"x" :0, "y" : 0},
    "endPoint"   : {"x" :0, "y" : 0},
    "hypotenuse" : function(a,b) {
        var c;
        a = Math.abs(a);
        b = Math.abs(b);
        c = Math.sqrt(a*a  + b*b);
        return c;
    },
    "init"       : function(){
        var self=this;
        $('#test').mousedown(function(e) {
            self.startPoint.x = e.pageX;
            self.startPoint.y = e.pageY;
        }).mouseup(function(e) {
            self.endPoint.x = e.pageX;
            self.endPoint.y = e.pageY;
            
            //Below could be moved to it's own function.
            var a=self.startPoint.x - self.endPoint.x;
            var b=self.startPoint.y - self.endPoint.y;
            $("pre").append(self.hypotenuse(a,b) +"\n");
        });
    }
}
    
mouseDiff.init();

function MouseDiff() {
    this.startPoint = {"x" :0, "y" : 0};
    this.endPoint ={"x" :0, "y" : 0};
    
}

MouseDiff.prototype.hypotenuse = function(a,b) {
    var c = 0;
    a = Math.abs(a);
    b = Math.abs(b);
    c = Math.sqrt(a*a  + b*b);
    return c;
}
    
MouseDiff.prototype.init = function() {
    var self=this;
    $('#test').mousedown(function(e) {
        self.startPoint.x = e.pageX;
        self.startPoint.y = e.pageY;
    }).mouseup(function(e) {
        self.endPoint.x = e.pageX;
        self.endPoint.y = e.pageY;
        
        //Below could be moved to it's own function.
        var a=self.startPoint.x - self.endPoint.x;
        var b=self.startPoint.y - self.endPoint.y;
        $("pre").append(self.hypotenuse(a,b) +"\n");
    });
}
    
var myMouse = new MouseDiff;
myMouse.init();


var MouseDiff2 = function() {
    var startPoint = {"x" :0, "y" : 0};
    var endPoint = endPoint ={"x" :0, "y" : 0};
    var hypotenuse = function(a,b) {
            var c;
            a = Math.abs(a);
            b = Math.abs(b);
            c = Math.sqrt(a*a  + b*b);
            return c;
    };
    return {
        hypotenuse: hypotenuse,
       ...