Design comparison
Solution retrospective
This is the first time I build a project using external APIs, so I am really proud that I made it work with ease.
What specific areas of your project would you like help with?I am just curious about how I could make some kind of loading animation that executes while the first advice is beign fetched.
Community feedback
- @Alex-Archer-IPosted 3 months ago
Hey!
Neat work =)
To make some load effect you can add any element on the place of advice text. Animate it with CSS or JS, and than after fetching, remove this element, for example, with
display: block
. You can look at my work - I placed the loading message, but, as I said it could be any element with animation or without.By the way, why did you use
element.onclick
insteadaddEventListener
? i tried to find the pros of them but didn't find anything particular important.Marked as helpful1@Artur-NeriPosted 3 months agoWhat's up, @Alex-Archer-I? Thanks for the animation tip. Will remember that on my next challenge!
Me using
element.onclick
is no preference of mine, I just used becaus it was the first thing that came to mind. I have no idea if one is better than the other, but your question made me think that it is better if I think about the aproaches I am taking and consider the pros and cons, so thank you for that.1@Alex-Archer-IPosted 3 months ago@Artur-Neri
As far as I find the main difference of them is that with
element.onClick
you can add only one function and withaddEventListener
- many. So that really could be a thing in the big projects.And, hey, glad that I could help. Hope to see cool animation thing you'll make =)
1 - @IzykGitPosted 3 months ago
Good job! If I was to go about making a loading animation I would have two different classes for the icon.
One that is a static class and another class that contains a looping animation. When the user clicks and makes a fetch requests this you could have the element's static class switch to that animation class. Then once the fetch request is complete, have the class be switched back to the static class.
This shouldn't required too much CSS or Javascript to do. Or if you were to do this project in a framework there are lots of libraries that could handle this as well!
Keep up the good work
Marked as helpful0@Artur-NeriPosted 3 months agoHey, @IzykGit. Thanks, man! I could definitely use
.finally()
to change the animated class to the static one, right? Thank you once again.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