Advice Generator App - HTML | CSS | JS

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  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

  1

  ---

  

  Faris P•2,810

  @FarisPalayiPosted over 2 years ago

  @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.

  1

  

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  @FarisPalayi I feel you! I once spent nearly an hour messing with a cubic bezier curve for an animation. 🤣

  1

  

  Faris P•2,810

  @FarisPalayiPosted over 2 years ago

  @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.

  1

  

  Faris P•2,810

  @FarisPalayiPosted over 2 years ago

  @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. 👍

  1

  

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  @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. 💯

  1

  

  Faris P•2,810

  @FarisPalayiPosted over 2 years ago

  @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 :)

  1
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  I really like your solution it is really working well and all. Besides there are no ccessibility issues📌

  Good job Keep coding👍

  1

  ---

  

  Faris P•2,810

  @FarisPalayiPosted over 2 years ago

  @Kamasah-Dickson Thanks, appreciate it :)

  0