@brasspetals
Posted
Hi, Faris! Awesome job on this solution! I really like the animations you've added, and the loader is a great touch. π
My only suggestion for improvement would be to have the advice h2 and blockquote animate on every new quote not just the first time the page loads. In vanilla JS, I believe the only way to do this would be to put your animations in classes. Then in showRandomAdvice() you would first remove the animation classes from adviceElm & adviceElmID. After the rest of the function had finished, you would then re-add the classes so that the animations would run again.
Example for clarity:
adviceElm.classList.remove("animation");
getRandomAdvice()
// rest of your function, adding innerText, etc.
adviceElm.classList.add("animation");
Might be worth trying out just for fun. Again, great job on this one and looking forward to seeing your next solution! π
Marked as helpful
@FarisPalayi
Posted
@brasspetals First off, thanks for the feedback/suggestion and for looking at my code.
About the suggestion, actually, It was my plan to add those transitions, and I did play with a bunch of animation effects too. But, since I looked at the site so many times that I got to a point where I couldn't really judge if certain things are better than others or not. So, in the end, I couldn't decide if I should implement it or not. So, I abandoned it. And I'm someone who kinda gets stuck between deciding minor things like a 10ms difference in the animation duration Β―_(γ)_/Β―. But, now that you mentioned it, I think the current sudden transition is not working well with the overall look & feel of the site. So, thanks again for your suggestion, cuz, it's nice to have a fresh pair of eyes. So yeah, I'll be adding that.
@brasspetals
Posted
@FarisPalayi I feel you! I once spent nearly an hour messing with a cubic bezier curve for an animation. π€£
@FarisPalayi
Posted
@brasspetals Yeah, exactly π. I know a bunch of projects in which I spent loads of time playing with the bezier curves and decided to go with something inbuilt like ease-in or linear in the end.
@FarisPalayi
Posted
@brasspetals Added it π. Before | After.
- Even though it first seemed like just as simple as toggling animation classes, It created a bunch of problems like a long delay and long intervals when generating new advice. i.e. intro animation didn't work well for the "new advice animation". So, I used pure CSS for the intro animation and used a variable to keep track of the fetch request state, and ran the "new advice animation" only after the first successful fetch request. π
@brasspetals
Posted
@FarisPalayi Sorry to hear it gave you more trouble than expected! π€¦ββοΈ Isn't that just the way it seems to go? The end result turned out great though! π That little (or, not so little) bit of extra just makes it. π―
@FarisPalayi
Posted
@brasspetals Yeah, it definitely is the way it goes, evry single timeπ (sometimes the opposite happens too, right?). Doing this has definitely helped me organize my CSS and also, I have forgotten to add button :focus styles, so, was able to add that. And as a new little feature/bugfix, I disabled the button while loading data to prevent multiple fetch requests. So, everything's considered, It wasn't as bad as I expected it to be, though. So, yeah, thanks, it was worth it. And thanks for your kind words, appreciate it :)
