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

Responsive Advice generator app using Advice Slip API

@Navroz-Singh

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 are you most proud of, and what would you do differently next time?

I am proud of my first javascript project which involved use of APIs.

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

Making a GET request was something I struggled with, because it was my first time using it. However, using online resources and documentation helped me better grasp the concept of requests.

What specific areas of your project would you like help with?

I would like help with javascript code and Requests. I want to write more readable and maintainable code. Any piece of advice would be greatly appreciated.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

Congrats with your first project with external API =)

You are using fetch right, but I suggest you to threw an error if response isn't ok (that way it'll be passed directly in the catch part).

And you can switch between two images on different versions more easier with picture tag:

<picture>
    <source srcset="mobile.jpg" media="(max-width: 900px)">
    <img src="desktop.jpg" alt="">
</picture>

It contains one or more source tags with different media conditions which it use to render corresponding image, and img tag for default image.

Oh, you have a little mistype on the 27th line =)

}).catch(error=>[          --- should be { here =)
0

@Navroz-Singh

Posted

@Alex-Archer-I Thanks you so much for pointing out the mistakes and providing me with the optimizations, I will make sure to consider all these points while working on my next project. Also, I have corrected the parentheses typo. Thank you again for the great advice.

1
Alex 3,130

@Alex-Archer-I

Posted

@Navroz-Singh

You're welcome, glad I could help =)

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