2

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>

3
  • 1
    ¿Leíste el error que aparece cuando ejecutás el snippet?
    – padaleiana
    el 29 jun. a las 15:21
  • 2
    Mueve el tag <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. el 29 jun. a las 15:22
  • 2
    Además, tienes una gran mezcla de nombres de variables: globo=> glovo, color => colors. Te has preocupado por depurar tu código mediante la consola del navegador? Con unos ajustes estaría corriendo. el 29 jun. a las 15:27

3 respuestas 3

1

En tu código hay cosas que no son parte del requerimiento. En base a este, he preparado un ejemplo que hace lo que describes, quitando lo que no es esencial para su funcionamiento y haciendo algunos cambios:

  1. Declaro algunas constantes con los valores que no cambian lo cuál, en mi opinión hace más legible el código, además de fácil de mantener.

  2. Solo se necesitan dos manejadores de evento, uno para el mousedown y otro para el mouseup, sin otros efectos, según la descripción que das, por lo que he dejado solo esos manejadores.

  3. En el mousedown básicamente vamos agrandando el tamaño del div, hasta que alcanza el maxSize. Cuándo lo alcanza, entonces remuevo los cambios que se han ido haciendo al estilo para agrandarlo, hago un cambio de clase y dejo corriendo un timer que regresa todo a su estado original para que se pueda volver a empezar.

    En este mismo evento hago el cambio de colores, según el ciclo establecido.

  4. En el mouseup le quito 5 pixeles al tamaño.

Creo que el código se auto-explica, pero si te queda alguna duda, dejame un comentario y con gusto vemos de qué se trata.

const glovo = document.getElementById("glovo");
const startSize = 200;
const maxSize = 420;
const factorCrecimiento = 10;
const factorDecrecimiento = 5;
let colorIndex = 0;
let size = startSize;
let explotado = false;
const colorNames = ["red", "green", "blue"];

const setSize = (size) => {
  glovo.style.width = `${size}px`;
  glovo.style.height = `${size}px`;
};

glovo.addEventListener("mousedown", function () {
  if (explotado) return;
  colorIndex = (colorIndex + 1) % colorNames.length;
  glovo.style.backgroundColor = colorNames[colorIndex];
  if (size < maxSize) {
    size += factorCrecimiento;
    setSize(size);
  } else {
    explotado = true;
    glovo.classList.remove("glovo");
    glovo.classList.add("explotado");
    glovo.style.removeProperty('width');
    glovo.style.removeProperty('height');
    glovo.style.removeProperty('background-color');
    setTimeout(() => {
      glovo.classList.remove("explotado");
      glovo.classList.add("glovo");
      size = startSize;
      colorIndex = 0;
      setSize(size);
      explotado = false;
    }, 500);
  }
});

glovo.addEventListener("mouseup", function () {
  if (explotado) return;
  setTimeout(() => {
    size -= factorDecrecimiento;
    setSize(size);
  }, 50);
});
.container {
  width: 500px;
  height: 500px;
  display: grid;
  place-items: center;
}
.glovo {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.explotado {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: all 1.0s ease;
  border-radius: 50%;
  animation: explode 1.0s linear forward;
}
<div id="glovo" class="glovo"></div>

El ejemplo ha quedado en un snippet para que puedas probarlo aquí mismo en la respuesta haciendo clic en el botón Ejecutar.

1

lo primero es que tienes muchos errores en tu código, como que la etiqueta script tiene que ir al final de la etiqueta body.

ahora lo primero en cuanto html, es que deberias encapsular el div glovo en otra etiqueta con un tamaño predefinido para así evitar un shift layout.

en cuanto a css el hover y activate sobran a no ser que hagas algo más allá de solo darle una escala

y en javascript estás usando los eventos incorrectos para que te funcione deber aplicar el "mousedown" que escucha el evento cuando el mouse es clickeado, una vez hecho esto debes aplicar un intervalo para que el tamaño se expanda de 10 en 10, hasta que supere el tamaño máximo que quieres y limpias el intervalo y seteas a su valor inicial las variables que lo requieren. Para el evento cuando se deja de pulsar debes usar "mouseup" en donde limpias el intervalo para que no se siga ejecutando y restas los 5 pixeles que deseas, se usa timeout para que el efecto tenga un delay y se pueda observar la reducción.

te dejo un ejemplo de como puedes aplicarlo.

const glovo = document.getElementById("glovo");
    let size = 50;
    const maxSize = 420;
    let colorIndex = 0;
    const colorNames = ["red", "green", "blue"];
    let expand;
    
    const setSizes = (size) => {
      glovo.style.width = `${size}px`;
      glovo.style.height = `${size}px`;
    };
    
    glovo.addEventListener("mousedown", function () {
      glovo.style.backgroundColor = colorNames[colorIndex];
      colorIndex = colorIndex + 1 >= 3 ? 0 : colorIndex + 1;
      expand = setInterval(() => {
        size += 10;
        setSizes(size);
        if (size >= maxSize) {
          clearInterval(expand);
          size = 50;
          setSizes(size);
          colorIndex = 0;
        }
      }, 100);
    });
    
      glovo.addEventListener("mouseup", function () {
      clearInterval(expand);
      setTimeout(() => {
        setSizes(size - 5);
      }, 250);
    });
 .container {
      width: 500px;
      height: 500px;
      display: grid;
      place-items: center;
    }
    .glovo {
      width: 50px;
      height: 50px;
      background-color: red;
      transition: all 0.3s ease;
      border-radius: 50%;
    }
 <div class="container">
     <div id="glovo" class="glovo">
     </div>
    </div>

2
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 29 jun. a las 19:48
  • Hola Felipe, bienvenido y gracias por tu colaboración, tu respuesta no resuelve el problema planteado, te sugiero que la edites y corrijas a fin de evitar votos negativos, ver como responder aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener una medalla!. el 30 jun. a las 6:11
0

Como te indican en las respuestas anteriores, hay varios problemas en tu código, el más grave: nombres de variables, algunas veces escribes "globo" otras "glovo", "color" y "colors"... así no hay código que aguante!!!.
Otro error está en los eventos que escuchas, como te dijeron, debes usar mousedown y mouseup, para obtener lo que quieres.
Sacando esos problemines, tu código está bastante bien, me tomé el atrevimiento de hacer algunos cambios, para llevarlo a la "meta".

  // agregue este escuchador, para evitar que el "JS" sea llamado antes de que se cargue el documento
window.addEventListener( 'load', function() {

    const globo = document.getElementById( "globo" );;
    const colors = [ 'red', 'green', 'blue' ];
    let colorIndex = 0;

       // agregué la propiedad para evitar que el círculo "camine" 
    let margen = 110;
    let size = 200;
    let interval;

    globo.addEventListener( "mousedown", function() {
        size += 20;

           // cada vez que aumentamos el diámetro, modificamos la posición 
           // le puse valores mayores, para que se vea mejor el efecto
        margen -= 10;
        if( size > 420 ) {
            size = 200;   
         
               // volvemos a la posición original
            margen = 110;
            globo.classList.add( 'explode' );
            setTimeout(() => {
                globo.classList.remove( 'remove' );
            }, 500 );
        }
        else {
            colorIndex = ( colorIndex +1 ) % colors.length;
            globo.style.backgroundColor = colors[ colorIndex ];
        }

           // modificamos la posición
        globo.style.marginTop = margen + 'px';
        globo.style.marginLeft = margen + 'px';
        globo.style.width = size + 'px';
        globo.style.height = size + 'px';
    });
    
    globo.addEventListener( 'mouseup', function() {
        
           // dado que la modificación del margen tiene que ser la mitad de la
           // modificación del diámetro, uso para este un número par
        size -= 4;
        margen += 2; 
        if( size < 200 ) {
            size = 200;   

               // mantengo la posición original
            margen = 110;
        } 
        else {
            colorIndex = ( colorIndex - 1 + colors.length ) % colors.length;
        }
           // ya explicado
        globo.style.marginTop = margen + 'px';
        globo.style.marginLeft = margen + 'px';
        globo.style.width = size + 'px';
        globo.style.height = size + 'px';
        globo.style.backgroundColor = colors[ colorIndex ];
     });
});
        
   // metí el globo en un div, para no lidiar con la distancia a los bordes
   // quité el "hover" no me parecio que lo necesitaras y quea "competía" con el efecto principal 
   .globo {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
    transition: all 0.3s ease;
    border-radius: 50%;
    margin-top: 110px;
    margin-left: 110px;
}  
  
#contenedor {
    width: 420px;
    height: 420px;
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
}    

.globo.active {
    background-color:black;
    transform: scale(1.2);
}

.globo.explode {
    animation: explode 0.5s linear forward;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> ballon </title>
    </head>
    <body>
        <div id="contenedor">
          <div id="globo" class="globo">
          </div>   
        </div>   
    </body>
</html>

Como verás, no son muchos cambios, solo presta más atención a los nombres de las variables...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.