Submitted almost 2 years ago
Responsive solution and small bit of animation on the button
@aniket-codeheaven
Design comparison
SolutionDesign
Community feedback
- @joaskrPosted almost 2 years ago
Hi Aniket, Great job! Your solution is almost identical to the provided design and it works perfectly! I really like the animation on the button π²
If you want to make your solution even better here are some suggestions:
Accessibility
- You should wrap your content in landmark HTML tags such as <header> <main> <nav> <footer> as they make your page more accessible and are especially useful for users with screen readers. You are currently using
<section id="main">
-> this should be replaced with <main> element.
Design
- I would change cursor to pointer on the button. To make that you can add the following css code to the <button id=btn> element
cursor: pointer;
Code
- I see that you are using
rdm = Math.floor(Math.random() * 224)
to get a random advice number. That step can be skipped completly as the API provides an endpoint for getting random quote. You just need to replace
url = 'https://api.adviceslip.com/advice/' + rdm;
with
url = 'https://api.adviceslip.com/advice'
You can see more details about it in the API documentation
Overall, great job! Let me know if you have any questions :)
Keep coding and good luck with future challenges
Marked as helpful0 - You should wrap your content in landmark HTML tags such as <header> <main> <nav> <footer> as they make your page more accessible and are especially useful for users with screen readers. You are currently using
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