JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Interactive programming</title>
  </head>

  <body>
    <h1 id="heading">Hello world!</h1>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

    <script>
      var direction = 'right';
      var offset = 0;

      $("#heading").offset({
        left: offset,
        top: offset
      });
      var moveHeading = function() {
        if (direction === 'right') {
          $("#heading").offset({
            left: offset
          });
          offset++;
          if (offset > 200) {
            offset = 0;
            direction = 'down';
          }
        } else if (direction === 'down') {
          $("#heading").offset({
            top: offset
          });
          offset++;
          if (offset > 200) {
            offset = 200;
            direction = 'left';
          }
        } else if (direction === 'left') {
          $("#heading").offset({
            left: offset
          });
          offset--;
          if (offset < 0) {
            offset = 200;
            direction = 'up';
          }
        } else if (direction === 'up') {
          $("#heading").offset({
            top: offset
          }); +
          offset--; +
          if (offset < 0) {
            +offset = 0; +
            direction = 'right'; +
          } +
        } +
      }; +
      +setInterval(moveHeading, 30); +

    </script>
    +</body>
  +

</html>