@Omid-Heidarzadeh
Posted
Well done you've got the job done, but at the first glance, there are a few things that seem to be better to consider. 1- Choose better (more specific) names for your CSS id & class selector. Use popular conventions like BEM. when you're designing a component it is important to choose your selectors wisely, for example, setting the width and height of all image tags probably will cause problems later. 2- Try to find a more efficient approach that makes it easier to get your design responsive. The ideal approach needs the least CSS code in @media queries. Use box model concept and wrap the neighbor elements with the same arrangement on different screen sizes with a parent element and just change the flexbox direction in @media queries to achieve the same result. 3- Pay more attention to at least simple accessibility rules like filling alt attribute of image tags. 4- Keep user needs in mind whenever you use JavaScript, make sure to check whether the user needs a different way to return to the previous state or not? in this case clicking the share button is a one-way action. you could use the class toggle method instead of adding or removing classes. As I said, you've done it already, and I hope these tips help you do it more efficiently. Best wishes.