JSFiddle - React, Tailwind, and code Playground

by b_long

HTML

<html> <head> <script type="text/javascript"> function 
</script>
</head> <body> <span id="someText" style="position:absolute; top:50; left:50;"> This text is really awesome. <br> You just need to accept that fact. </span> <form> <input type="button" onClick="moveText()" Value="Click Here" style="position:absolute; top:50; left:1050;"> </form> </body> </html>

JavaScript

var moveText = function() {
    var x = 50;
    var y = 50;

    var interval = setInterval(function() {
        x = x + 10;
        y = y + 10;
        document.getElementById("someText").style.top = x;
        document.getElementById("someText").style.left = y;
        if (x == 50) {
            document.getElementById("someText").innerHTML = "This text is really awesome. <br> You just need to accept that fact.";
        }
        else if (x >= 750) {
            document.getElementById("someText").innerHTML = "Back to being awesome text.";
        }
        else {
            document.getElementById("someText").innerHTML = "WOAH, I'm moving!!";
        }
        if (x >= 850) {
            clearInterval(interval);
            interval = null;
        }
    }, 100);

}