Design comparison
Solution retrospective
I used HTML, SCSS, and Vanilla JS to solve this challenge. I added a few transformations to items that could be clickable.
Any suggestions are appreciated.
** Code used for the speech bubble: https://codingislove.com/css-speech-bubbles/**
Community feedback
- @mozi47Posted over 2 years ago
Amazing work. I love it. The hovering effect is good. But I will suggest making it smooth using CSS transition property. That will then smoothly ease in and out. Apply the same property to the share button.
There is one issue when clicking on the share button, the social media icons appear but when clicked again the popup still opened. You can add the class "hide" when clicking on the share button remove the class "hide" and if click again add the "hide" class again. You can simply add this line in javascript. "classname.classList.toggle("hide")" inside the event listener callback function.
Marked as helpful0@TjasaZilPosted over 2 years ago@mozi47 Thank you for your kind words. I will revisit the code and implement the changes.
0 - @VenusYPosted over 2 years ago
You did a great job with this challenge! I like what you've done, especially the hovering effects for the share button and social media icons.
On the desktop version of the webpage, the share icon doesn't close the share container when you click it again. This is happening for two reasons: you're manually changing the display property with JavaScript, and the share button that reverts these changes does not appear on the desktop version.
One way to fix this is by using utility classes that change the visibility/display property of the element, then using JavaScript to toggle these classes on and off upon clicking the share button. For more information, look into the .classList and .toggle methods for JS.
The .classList method creates an array containing the element's classes. The .toggle method removes a class if the class is present or, if it isn't, adds it to the element.
Hope this helped! And good job with the challenge once again.
Marked as helpful0@TjasaZilPosted over 2 years ago@VenusY Thank you so much for your kind words and the time you took to view my solution! I will look into your recommendation and solve the issue.
0@VenusYPosted over 2 years ago@zuzexx No worries, good luck with your future projects! :)
0
Please log in to post a comment
Log in with GitHubJoin 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