CodePen

HTML

            
              <div id="circle"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #circle {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              JS
(function(){
    var circle = document.getElementById("circle"),
        computedStyle = window.getComputedStyle(circle, ""),
        bodyWidth = document.body.clientWidth,
        bodyHeight = document.body.clientHeight,
        speed = 5,
        step = 2,
        circleWidth = circle.clientWidth;

    function moveCircleLeft() {
        var currentMarginLeft = parseInt(computedStyle.marginLeft);
        timerLeft = setInterval(moveLeft, speed);

        function moveLeft() {
            currentMarginLeft += step;
            if (currentMarginLeft < bodyWidth - 100) {
              circle.style.marginLeft = currentMarginLeft + "px"; 
            } else {
              clearInterval(timerLeft);
              moveCircleDown(); 
            }
        }
    }

    window.addEventListener("click", moveCircleLeft, false);
  
 
   function moveCircleDown() {
        var currentMarginTop = parseInt(computedStyle.marginTop);
        timerDown = setInterval(moveDown, speed);

        function moveDown() {
            currentMarginTop += step;
            if (currentMarginTop < bodyHeight - 100) {
              circle.style.marginTop = currentMarginTop + "px"; 
            } else {
              clearInterval(timerDown);
            }
        }
    }
 
}())
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................