Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice Generator API

turboo-sy 210

@turboo-sy

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

The problem that I'm having is that when I click the button , I have to press it twice to go to the next advice Is the api the problem, or there's a different reason for it?

Community feedback

Fer 3,970

@fernandolapaz

Posted

Hello, regarding your question:

On the API site https://api.adviceslip.com you can see the note "Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice."

That is the reason.

I hope this clarifies your doubt.

Greetings,

1

turboo-sy 210

@turboo-sy

Posted

Hey bro ...

Thank you so much about it @fernandolapaz

1

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

FEW IMPROVEMENTS :

  • " I have to press it twice to go to the next advice Is the api the problem, or there's a different reason for it ? ", No your solution works right! This issue is cause by the API itself. Sometimes it will generate the existing advice (it doesn't know existing ones, so it generate the same thing multiple times)
  • Currently <button> element to generate advice is not accessible because it does not have any text content or an aria-label attribute that describes its purpose or function. The alt attribute on the <img> element inside the button is not an adequate replacement for an accessible name.
  • To make the button accessible, you should add an aria-label attribute to the <button> element that describes its purpose or function.
  • Here's an example:
<button aria-label="Click to generate a new advice">
    <img src="images/icon-dice.svg">
</button>

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

1

turboo-sy 210

@turboo-sy

Posted

Hello My Friend Words cannot express the way I appreciate you To Be Honestly , I'm not very experienced in this domain, I take advice from other people and apply it to my situation.@0xabdulkhalid

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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