Design comparison
Solution retrospective
hey all this my first challenge with JS and iam pretty happy that I've finish it tell me if there is anything to add or remove thanks <3
Community feedback
- Account deleted
Hello, buddy. Congratulations, your component is very nice. Look at your html and css and everything is fine. As for your JS code, it is fine, but I will give you a recommendation for you to implement and give more style to your component. For example, you can add a simple, but elegant animation with the following:
.active{ transform: scale(0); transition: transform .3s; .show{ transform: scale(1); }
with the
transform: scale(0);
the element will "disappear" and with the.show
class you will make an incredible zoom effect, for this in your JS modify it in such a way that it looks like this:hover.addEventListener("click",()=>{ active.classList.toggle('show') })
The toggle method puts a class in case the element doesn't have one and removes it in case it already has one, so you can avoid styling with the .style property of the elements.
Try it, but take into account the other attributes that you modify from JS.
Keep practicing and coding 🚀.
Marked as helpful1@f5rcbhPosted about 2 years ago@Ang3l-SPF Thanks for that, I actually got problem with transition and already tried to do it with sass but it didn’t work But right now i got the answer thank again <3
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