Article preview component using HTML, CSS Flexbox, and JavaScript

What are you most proud of, and what would you do differently next time?

Implementing different interactions for desktop and mobile screens using JavaScript and window.innerWidth.

How to adapt behavior conditionally depending on screen size, such as hiding and showing specific elements (e.g., showing the mobile share icon or hiding the desktop button on smaller screens).

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

I spent a lot of time figuring out how to display the popup when clicking the share button, especially getting its style and position right. It wasn’t easy for me at first. I used absolute positioning for the popup and had to test different width and height values multiple times to make it look correct on both desktop and mobile screens. To make the popup show and hide properly, I also experimented with JavaScript and had to debug it through trial and error until I got the desired result.

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

I'm having trouble changing the color of the share icon. I used filter: brightness() to make it look white, but the result doesn’t match the design in the Figma file. I’d like to learn a better or more accurate way to style the icon so it looks the same as the design.