Article preview component made with flexbox and vanilla JavaScript

What challenges did you encounter, and how did you overcome them?

There were many minor challenges but the toughest one was making the share button behave the way I intended. Here's the logic I wanted to achieve:

• On desktop, show the share options toast when hovering over share button and change the button color
• When no longer hovering over either, hide the toast and reset the button color
• After clicking the button, show the toast and "lock" so it stays open even when the mouse moves away
• Allow the user to close the toast either by clicking the button again or anywhere else on the page
• Use subtle fade transitions for all visual changes

I implemented this behavior by dynamically adding and removing classes like .hidden and .hovering on the button and toast based on user interactions. I also used the aria-pressed attribute to track whether the button was currently active.

For accessibility I also needed to give the toast display: none when it's hidden because with just zero opacity it is still clickable. But I couldn't fade the toast by giving it display: none directly because the display property cannot be animated. I solved this by listening to the transitionend event to set display: none on the toast right after it finished fading out.

What specific areas of your project would you like help with?

If you know a better way to handle the share button logic or have tips to make my code cleaner and more professional please feel free to share them. This is my first solution using JavaScript and I'll appreciate any feedback that helps me learn.

Also, if you notice anything wrong with the page layout or responsiveness, please don't hesitate to comment.