Responsive solution and small bit of animation on the button

Community feedback

• 

  Joanna Skrzypczak•510

  @joaskr

  Posted over 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

  00

  Marked as helpful