text: var box = document.getElementById("box");
  
  var viewWidth = window.innerWidth;
  var viewHeight = window.innerHeight;
  
  // Updates the viewport height and width dynamically
  window.addEventListener("resize", function(event) {
      viewWidth = window.innerWidth;
      viewHeight = window.innerHeight;
  });
  
  box.addEventListener("mouseover", function(event) {
      var boxAttr = box.getBoundingClientRect();
  
      var pos = getNewPosition(boxAttr.width, boxAttr.height);
  
      box.style.top = pos.y + "px";
      box.style.left = pos.x + "px";
  
  });
  
  
  function getNewPosition(boxWidth, boxHeight) {
      // The boxWidth and boxHeight are subtracted so that they would not move out from the right and bottom direction
      var newX = Math.floor((Math.random() * viewWidth) + 1 - boxWidth);
      var newY = Math.floor((Math.random() * viewHeight) + 1 - boxHeight);
  
      // These will satisfy that box does not move go out in the top and left direction
      if (newX < 0) {
          newX = 0;
      }
      if (newY < 0) {
          newY = 0;
      }
  
      return { x: newX, y: newY };
  
  
  }