Skip to content
Submitted over 3 years ago

Using API for first time with this Advice Generator

accessibility, fetch
Roy•195
@royschrauwen
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone! 👋

This was the first time I used an API for a project / challenge like this. It was not as hard to get it working as I thought it would be. However I am not sure if I did it the right way, because I am very new to this.

Also I tried to keep in mind that changing text on screen, like with this challenge, is hard to notice for people with screen-readers so I tried to use aria-live for that. I also added a focus to the button in CSS for better accessibility.

❓ Concrete questions ❓

  1. Did I do the JavaScript for the API in the correct way?
  2. Did I do the accessibility the right way?

📑 GitHub: https://github.com/royschrauwen/100-days-of-code/tree/master/day-21

💻 Live: https://royschrauwen.github.io/100-days-of-code/day-21/

I also did this project for the #100DaysOfCode Challenge! Today is day 21 and I am still very much enjoying it!

Have a nice day! 🙋‍♂️

Code

Please log in to post a comment

Log in

Community feedback

  • Rémi Martineau•355
    @MartineauRemi

    Hey Roy ! You did a nice job completing this challenge, congratulations :) The js part is good, but could be improved a bit :

    1. You used Promises but didn't cover the eventuality of a failure coming from the API. So you could add a 'catch' clause to handle errors, and display a custom error message for example. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

    2. Your js file is small for now, but its size may increase over the time. I suggest you take the code inside of 'then' and create a separate function, that you call in your 'then'. Your code will be easier to read (especially for other developers working with you). This advice is purely personal though. Others will tell you there is no need to do that.

    3. This one is a detail, but I think you forgot to remove a console.log line 28.

    Hope this clear enough and that it can help you. Keep up the good work, and enjoy your #100daysOfCode challenge :D

  • optimusprime202•1,160
    @optimusprime202

    Hey @royschrauwen, Now This is what I call a fine job.

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