Responsive article preview component using HTML, CSS and JavaScript

Solution retrospective
I'm proud that I was able to think of different ways to solve this challenge. I was able to come up with an initial solution and after finishing it I came up with a different approach that was better than the previous one.
What challenges did you encounter, and how did you overcome them?The first challenge was on how to correctly position the tooltip on desktop screen sizes. After searching online I was able to find a way to position the tooltip close to where it should be. I used position: relative
on the main element and position: absolute
on the tooltip, this way the tooltip could go out of the component. Then I used the positions of the share button and the main element to calculate the top and left positions of the tooltip. Through several iterations I managed to obtain the correct offset for the position of the tooltip. The second challenge was how to change the behavior of the share button depending on the screen size. At first, I simply had two share buttons with different functionality, later I changed it to a single button and used window.innerWidth
in a conditional so that the button behaved in a different way depending on the condition.
Any feedback on how could I improve the accessibility or suggestions for a different approach for the share button functionality, as well as any tips on CSS style improvements would be welcome. If there are any mistakes I might have overlooked please let me know.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @devPauloski
Good job. Well done.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord