Espero comentarios siento que he avanzo poco a poco con JS :)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello again Johnny, Congratulations on completing this challenge!

  The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.

  The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to the body to make the child (the card/container) align to its size that now will be displaying 100% of the viewport height and then give its alignment with display: flex and align-items: center / justify-items: center.

  REMOVE THE MARGINS:

  .card {
      /* margin-top: 150rem; */
      display: flex;
      justify-content: center;
  }
  

  ALIGN IT WITH MIN-HEIGHT / FLEXBOX

  body {
      min-height: 100vh;
      font-size: 16rem;
      font-family: var(--fuente);
      background-color: var(--azul-muy-oscuro);
      color: var(--blanco);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Denis•1,060

  @Mod8124Posted about 2 years ago

  Hola buen trabajo!

  Trata siempre de poner todas tu variables en el top del archivo de js en especial si usas const o let ya q no cuenta con hoisted, intenta siempre de seguir una convención por ejemplo todas las variables en el top, en el medio funciones y en la parte de abajo las llamadas de funciones y eventos de esta manera hace que tu código sea más legible para otros y para ti

  Te puedes ahorrar mucho código si seleccionas todos los botones de una Const btns = document.queryselectorAll('.card__content--li')

  Después nadamas le asignas el evento btnGris con el método forEach simpre trata de evitar el for ya q no te asegura que sea inmutable y de una aplicas programación funcional :)

  btns.forEach(btb => btn.addEventListener('click',btnGris) 
  

  Espero te sirva y good coding 👍

  Marked as helpful

  1

  ---

  

  Jhonny•180

  @jhonnymosqueraPosted about 2 years ago

  @Mod8124

  Hola Denis.

  Gracias por las sugerencias ya he aplicado los cambios, de ahora en adelante tendré mas en cuneta el document.queryselectorAll y ahora entiendo porque algunas variables me toco sacarlas de las funciones.

  Estuve intentado usar el forEach pero no lograba hacerlo funcionar, ahora entiendo mucho mejor como funciona muchas gracias :)

  1