HTML, CSS

Community feedback

• 

  Thomas Sankara•1,260

  @SankThomasPosted over 3 years ago

  Hello Ana. When you say "make the arrow turn and stay" I'm thinking you mean like the rotation animation? You could add a class on the icon which you can then target in JavaScript using querySelector and then add the toggle method on it when you click it: For example:

  /* CSS */
  img.clicked {
      transform: rotate(90deg);
      transition: transform 0.4s;
  }
  
  /* JS */
  /* 
  Select the icon. Be careful when using querySelector because it will select
  the first element that matches the argument passed in. So if you have other images
  before the icon that you want to select then it might not work.
  In such a case, assign an `id` to your icon in HTML, e.g id="arrow-icon" and
  then you can select it as `document.querySelector('#arrow-icon')
  */
  
  const img = document.querySelector('img')
  
  /* 
  Add a click event listener to your icon to toggle the class of `clicked` 
  above every time it is clicked 
  */
  img.addEventListener('click', () => {
      img.classList.toggle('clicked')
  })
  

  I hope this gives you an idea and it helps...

  0

  ---

  

  Ana Priscilla F.•50

  @AnaPriscillaPosted over 3 years ago

  Hi! SankThomas.

  Thank you very much! I will study these tips and add them here in my solution.

  1

  

  Ana Priscilla F.•50

  @AnaPriscillaPosted over 3 years ago

  @SankThomas It helped a lot and it worked! Thank you.

  1

  

  Thomas Sankara•1,260

  @SankThomasPosted over 3 years ago

  Good to hear @AnaPriscilla

  0