Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

basic html/css/js

Rayco21 130

@Rayco21

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

challenged myself and added animation, learned a ton of new knowledge such as DOM manipulation, key difference between transition and animation :D

What specific areas of your project would you like help with?

would like to know if there's anything I can improve with js

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Whoa, that's cool =) I animated those bars too, except I used pseudo-element. But I was trying to figure out how to animate counter and yes - intervals! I'll bookmark your solution =)

By the way, width can be animated via transition, isn't it? It's definitely doesn't work with height, but I guess it should work with width.

Well, so that my comment is not completely useless, I noticed that you have spna tag. Fun fact - browser renders unknown tags as non-semantic inline elements (which is what span is). That's it.

Marked as helpful

0
Rayco21 130

@Rayco21

Posted

yes, transition works with width, but the thing I learned from building this is that the one key difference between transition and animation is that transition is "passive", it needs to wait for something to happen first, like state change :hover, or event occurs like click, whereas animation is more "active", it triggers immediately when the element gets rendered, that's why I chose animation over transition in this case.

thanks for the fun fact :D

1

Alex 3,130

@Alex-Archer-I

Posted

@Rayco21

Well, transition works every time when corresponding property is changing even via JS. But that doesn't really matter both approaches are good =)

Oh, I tried to say that you have a typo in the code <spna style="color:. And browser renders unknown spna element but it's still worked as intended =) Now I re-read my comment and saw that it's not such clear as was in my head =)

Marked as helpful

0
Rayco21 130

@Rayco21

Posted

@Alex-Archer-I

cool, thanks

0

Please log in to post a comment

Log in with GitHub
Discord logo

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