Article preview component

Solution retrospective
This was my second project using Tailwind and my first using TypeScript. I understand that TypeScript doesn’t offer much advantage for such a simple task, but since I already have solid experience with vanilla JavaScript, I decided to switch to a typed language.
What challenges did you encounter, and how did you overcome them?The biggest issue I encountered was the inability to override styles using additional Tailwind classes. To make the tooltip’s visible state classes more specific, I had to switch not the class in TypeScript, but use custom attributes instead:
What specific areas of your project would you like help with?<div id="share-popup" class="data-[open=true]:h-full"> </div>
The code ended up cluttered with too many utility classes — perhaps it would be better to extract styles for specific component states into separate definitions.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Yasminxs3
@bulhakovolexii Great work! I noticed that the spacing on the mobile share bar is a bit wider than in the original design — you might want to check the padding.
Also, you might want to use the images provided in the project files instead of custom SVGs, to keep things consistent with the challenge and the code more clean.
Other than that, your code looks really solid. Keep it up!
Marked as helpful - @bulhakovolexii
Thank you very much for the feedback! I used the SVG icons from the project files and inserted them as inline code so I could change their color depending on the state. Your comment made me realize that this could have been achieved more simply by adding opacity to the icons. Thanks — this approach will definitely result in cleaner code.
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