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 App --- Semantic HTML, Axios, and a whole lot of fun!

Eric Salvi 1,330

@ericsalvi

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


Any feedback is always helpful.

This one was actually really fun and easy to implement.

I did notice one thing that I couldn't figure out. The Grayish Blue - hsl(217, 19%, 38%) color I never used. It was not obvious to me where it was being referenced.

Community feedback

maia 300

@maiaflow

Posted

this looks so awesome, Eric! i was feeling a bit out of my depth giving feedback, not really having an understanding of how axios works. (i'm still trying to figure out exactly where the advice is coming from!) but then I read your readme, and I'm honored you learned something from me! :o) box shadow looks awesome! and i totally know what you mean about the colors- i often feel that way with the front end design challenges, that the colors are either slightly off or not used. well done as always!

Marked as helpful

1

Eric Salvi 1,330

@ericsalvi

Posted

@maiaflow Thank you for your comment! Also thank you for showing me something new that made box shadows super easy.

As for Axios, it is used to make XMLHttpRequests. What that means is it allows me to pass something into this package and then it outputs a variable to use with that given data. So in https://github.com/ericsalvi/advice-generator-app/blob/main/scripts/scripts.js line 1 is the URL of advice data and line 8 is the request. Then if you were to go to that URL, https://api.adviceslip.com/advice you'll see it displays JSON. Lines 10 and 11 essentially sets the variables based on the 2 items the JSON code provides.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest is another approach directly using JS. Axios is sort of like a package that does just this.

I hope this helps and we can chat more about it if you wanted.

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