Necesito que el círculo se agrande 10px cuando lo pulses y se disminuya 5px cuando dejes de pulsar. Su tamaño original es de 200px y cuando llegue a 420px explote y vuelva a su tamaño original. Aparte con cada clic su color cambiará en el siguiente orden: de rojo a verde, luego azul y de vuelta al rojo.
No consigo ejecutarlo correctamente, lo único que hace es agrandarse un poco cuando lo pulso pero no hace lo que necesito.
El código es el siguiente:
.glovo{
width: 200px;
height: 200px;
background-color: red;
transition: all 0.3s ease;
border-radius: 50%;
margin-top: 20%;
margin-left: auto;
margin-right: auto;
}
.glovo:hover{
transform: scale(1.1);
}
.glovo.active{
background-color:black;
transform: scale(1.2);
}
.glovo.explode{
animation: explode 0.5s linear forward;
}
@keyframes identifier {
0% { transform: scale(1);}
100% { transform: scale(0);}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ballon</title>
<script src="ballon.js"></script>
<link rel="stylesheet" href="ballon.css">
<script>
const glovo = document.getElementById('glovo');
let size = 200;
let colorIndex = 0;
let interval;
const color = ['red', 'green', 'blue'];
glovo.addEventListener('click', function(){
size += 10;
if (size > 420) {
size = 200;
glovo.classList.add('explode');
setTimeout(() => {
glovo.classList.remove('remove');
}, 500);
}else{
colorIndex = (colorIndex +1 ) % color.length;
glovo.style.backgroundColor = colors[colorIndex];
}
globo.style.width = size + 'px';
globo.style.heigth = size + 'px';
});
globo.addEventListener('mouseenter', function() {
size -= 5;
if (size < 200) {
size = 200;
} else {
colorIndex = (colorIndex - 1 + colors.length) % colors.length;
}
globo.style.width = size + 'px';
globo.style.height = size + 'px';
globo.style.backgroundColor = colors[colorIndex];
});
</script>
</head>
<body>
<div id="glovo" class="glovo"></div>
</body>
</html>
<script>
al final del documento, justo antes del cierre del tag</body>
. ¿Porqué? Porque el documento HTML se lee linea a linea, y cuando tratas de acceder al elemento seleccionado, el mismo aún no ha sido renderizado por el navegador. Comenta el resultado.globo
=>glovo
,color
=>colors
. Te has preocupado por depurar tu código mediante la consola del navegador? Con unos ajustes estaría corriendo.