Article Preview Component - HTML/CSS/JS

Community feedback

• 

  Jesse•430

  @jesse10930Posted over 3 years ago

  Hi Kristina, your project looks great so far!

  As to your issue with the event listener, the problem is that the target differs depending on where the mouse clicks inside the button, so the parent to which you are adding 'active' also differs. For example, if you hover on the very edge of the button and click, the 'body' element toggles the class of 'active'. If you hover on the svg image inside the button and click, the 'container-card' element toggles the class of 'active'. And if you hover inside the button but not on the svg and click, the 'article-container' element toggles the class of 'active'. So the reason it seems like it stops working is because if you click on the button to add 'active' but then move the mouse and click on a different spot in the button, the function is adding 'active' again, but to one of the other elements. And then to get rid of the active state, you'd have to click on each of those positions to remove 'active' from each of the elements to which 'active' was added.

  I think your best bet would be to use querySelector to target a specific element to which you want to toggle the 'active' class inside your function, just like you did in the 'button' variable. This way the function always changes the same element rather than being dependent on 'e.target'.

  button.addEventListener("click", function(e) {
      document.querySelector(".container-card").classList.toggle("active");
    });
  

  Hope this helps! Happy coding :)

  1

  ---

  

  Kristina•175

  @kristinalesnjakovicPosted over 3 years ago

  Hi Jesse, thank you so much! I already made a change as you advised and it works as expected :) But even more important, it is clear for me now why my solution didn't work as excepted.

  1
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Kristina! 👋 Congrats on finishing another challenge! Your solution looks very good and also responds well. In addition to jesse10930 great feedback here's my few tips:

  • To fit your .main-img image to fill full height of container you need to remove max-height and max-width from image and apply these styles: object-fit: cover; height: 100%;.
  • Change the alt attributes for the .main-img, .avatar, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.

  Good luck with that, have fun coding! 💪

  0

  ---

  

  Kristina•175

  @kristinalesnjakovicPosted over 3 years ago

  Hi @tediko! Thank you for your tips, it certainly helps so I will try to make changes as you suggested :)

  0