Javascript-форум - Помогите очень срочно

Мне срочно надо сделать так чтобы в моем коде анимация(а в данном моменте круг) уменьшался и после его полного исчезновения он появлялся в рандомном месте, и в центре анимации был таймер который показывает через сколько он исчезнет и появится в другом месте, очень сильно прошу мне помочь так как мне срочно надо сдать это задание, надеюсь вы мне поможите, я буду вам очень сильно благодарен.
Вот сам код, и извините я не могу его подобающе отредактировать и упростить, я еще учусь и мне это не по рукам:

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 80px; /* ширина элемента */
height: 80px; /* высота элемента */
border: 1px solid blue; /* сплошная граница размером 1 пиксель синего цвета */
margin-top: 50px; /* внешний отступ от верхнего края элемента */
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$( ".start" ).click(function(){ // задаем функцию при нажатиии на элемент с классом start
$( "div" ).animate({
width: [ "toggle", "swing" ], // ширина элемента
height: [ "toggle", "swing" ], // высота элемента
opacity: "toggle" // прозрачность элемента
}, 1500, "linear"); // продолжительность и скорость анимации
});
});
addEventListener('DOMContentLoaded', function() {

const elem = document.querySelector('div'),

size = [innerWidth - 100, innerHeight - 100],

random = a => a * Math.random()|0,

timer = () => {

const [left, top] = size.map(random);

elem.style.transform = `translate(${left}px, ${top}px`;

};

elem.addEventListener('click', timer)

});
</script>
</head>
<body>
<div class="start"><center><h1>10</center></h1></div>
</body>

</html>