JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div></div>

CSS

div {
    position: absolute;
    top: 0;
    left: 100px;
    height: 100px;
    width: 100px;
    background: red;
}

JavaScript

var corrections = new Array();

function correction(original, correctionAmount){
    this.original = original;
    this.correctionAmount = correctionAmount;
}

move();

function move(){
    // push to the side by a random number between -20 and +20
    $('div').css('left', $('div').css('left').replace('px','') - (Math.floor(Math.random()*100 - 50)) + 'px');
   
    
    
    // carry out animation + correction 
    var finalPositionX = 0;
    
    for (i = 0; i < corrections.length; i++) {
        // loop through all currently stored values to see if the correction has been done before
        if (corrections[i].original == $('div').css('left').replace('px','')) {
            // Has happened before
                if (corrections[i].original + corrections[i].correctionAmount == 100) {
                    // Has found the solution before
                    finalPositionX = corrections[i].correctionAmount;
                } else {
                    // Not yet found the solution, so work out what it did last time and add/subtract 1 

                }
        } // No else, still looping
    }
    
    
    
    
}