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

P

@daniel-ribas

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


Trust me guys, i had to change the card height cause sometimes the API brings big advices.

Community feedback

@DennyIsNaive

Posted

The API gives each advice a number so you can reference that object inside the advice heading a adviceNumber.textContent = #ADVICE ${data.slip.id};so the API does the changes automatically instead of using js to manually change the numbers.

There is also a small problem in your code. The quotes in your website do not change even after waiting for 5 minutes. This is because the quotes are stored temporarily before being removed from cache memory. In the docs, it says 2 seconds but ideally it is more than that. I'd advice you set cache: 'no-cache' manually when using the API so data isn't cached at all. Your UI looks splendid. All that is left is the problem with caching the quotes. I hope this helps XD

Marked as helpful

0

P

@daniel-ribas

Posted

@DennyIsNaive Wow, thanks. That's really helpful :D

0

@AudunKodehode

Posted

Nicely done. Another way to go about it is to get the string length in javascript and change the font-size based on the length of the advice.

Marked as helpful

0

P

@daniel-ribas

Posted

@AudunKodehode Oh, you're right! Thanks for the tip :D

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