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

Using API for first time with this Advice Generator

#accessibility#fetch
P
Roy 195

@royschrauwen

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


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! 🙋‍♂️

Community feedback

@MartineauRemi

Posted

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

1

@optimusprime202

Posted

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

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