jQuery Random Animate

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <script src="lib/script.js"></script>
  </head>

  <body>
    <span id="console"></span>
    <div id="div5"></div>


  </body>
</html>

/* Add your styles here */
body{
  font-family: "arial narrow",sans-serif;
}

#div5{

  background:#66ff00;height:150px;width:150px;
z-index: 1;
  border-radius:50%;
  position:absolute;
  left:20px;
  top:10px;
  
}

.white{

  border:4px solid #7f2d7f;
  border-radius:5px;
}
.black{

  border:4px solid #333;
  border-radius:5px;
}

#console{
  margin-top:20%;

position:absolute;
   padding:3px 15px;
    
  font-size:30px;
  text-align: center;
  color: #479aec;
  background-color:rgba(248, 235, 0, 0.836);
  font-weight:bold;
  z-index: -1;
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function () {
  const div5 = $('#div5');
  const cons = $('#console');
  div5.addClass('white');
  $(document).on('click', function () {
    div5.animate(
      {
        left: getRandomInt(1, 500) + 'px',
        top: getRandomInt(1, 500) + 'px',
      },
      getRandomInt(100, 500)
    );
    cons.animate(
      {
        top: getRandomInt(1, 500) + 'px',
        left: getRandomInt(1, 500) + 'px',
      },
      getRandomInt(100, 500)
    );
  });
  cons.html('Click anywhere on the page!').addClass('white');
  let i = 0;
  while (i < 20) {
    div5.animate(
      {
        left: getRandomInt(1, 500) + 'px',
        top: getRandomInt(1, 500) + 'px',
      },
      getRandomInt(100, 500)
    );
    cons.animate(
      { top: getRandomInt(1, 500) + 'px', left: getRandomInt(1, 500) + 'px' },
      getRandomInt(100,500)
    );
    i++;
  }
});