Design comparison
Solution retrospective
I struggled with button styling more than API and event listener... Anyway I did my best. Any feedback will be appreciated :)
Community feedback
- @awexliPosted over 2 years ago
Nice solution @Yuko-code!
If you're up for the challenge, I'd like to see a loading indicator whenever a new advice is being fetched. Imagine someone with slow internet, it may take a long time before seeing the next quote! Showing something like a spinning animation or even the word "loading.." helps reinforce that something is happening in the background and makes for good user experience :-)
You'll also notice it doesn't fetch a new quote if you click the button in quick succession. Since the API service caches requests, repeat-request within 2 seconds will return the same piece of advice. If you're feeling really ambitious you can add something to let the user know they'll need to wait X amount of seconds until a new quote is fetched.
Good luck!
Marked as helpful1@Yuko-codePosted over 2 years ago@awexli oh good points! I’ve never used one of those loading indicator but definitely try it :) thank you!
1 - @CyrusKabirPosted over 2 years ago
hello my dear friend ♥ you did good on this challenge and here some improvements :
- you shouldn't have an block level element inside of inline level element and for a simple decorative icon you can use
::before
or::after
; - there are better ways for centering this card and you can check this link to learn them good centering ways in css
- it's better to learn some naming convention to have more readable, maintainable, structured code , and then you won't have to add multiple inline html comments to explain every section i mean when you use good naming on class names and use semantic elements you don't need any inline comments for every element also you can check this link for learning BEM : BEM docs
- use more semantic elements like
<main>
,<header>
,<article>
, etc
Marked as helpful1@Yuko-codePosted over 2 years ago@CyrusKabir thank you I really appreciate your feedbacks. I didn’t pay that much attention to naming conventions. Good points :)
1 - you shouldn't have an block level element inside of inline level element and for a simple decorative icon you can use
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