JSFiddle - React, Tailwind, and code Playground

by clickthelink

HTML

<div id="tracker">

    <span id="page" class="data">?</span>
    <span id="ajax" class="result"></span>
    
</div>

CSS

div#tracker{
    
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    
    background: whitesmoke;
    
    font-family: sans-serif;
    font-size: 1em;
    color: #222;
    
}

span.data{
    
    float: left;
    margin: 15px;
    
}

span.result{
   
    float: right;
    margin: 15px;

}

JavaScript

$("#tracker").mousemove(function(e){
    
    var pageCoords = e.pageX + ", " + e.pageY;
    
    var pageCoords_X = e.pageX;
    var pageCoords_Y = e.pageY;
    
    $("span#page").text(pageCoords);
    
});


setInterval(function(){ 
             
    var data = 'x=' + pageCoords_X + '&y=' + pageCoords_Y;
    $("span#ajax").text("Sending data...");    

    $.ajax({
            
        url: "/echo/json/", 
        type: "GET",      
        data: data,     
        cache: false,
             
        success: function (html){              
               
            $('#tracker').prepend('<div id="message">' + html + '</div>'); 
            $("span#ajax").text("Sent data to server.");
                            
        }
                   
   });
    
}, 500);