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

Vue Advice Generator API

#axios#vue#sass/scss

@Aleroms

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 Frontend Community!

I really enjoyed this one! I know understand APIs and how to GET information from them ;)

one thing that I'd like to address is my advice card changes height whenever i resend a request. This is because the text length changes. Is there any way I could maintain the same height?

Community feedback

@kimagin

Posted

Hello, This looks great! I'm still looking for an answer to the question which you've posted. The best thing that comes to my mind is to give a min-height of at least two lines to a wrapper for the text.

One other thing that I just learned is that instead of adding quotation marks manually, you can inject the text in a <h1><q>advice</q></h1> tag, and then the quotation marks will look like the one on the provided design images.

Hope this will be helpful :)

Marked as helpful

1

@Aleroms

Posted

@kimagin Thank you for your reply, I will have to add those in to my code. I did not know of the quotation tags - that will realy come in handy next time I use quotes. I will try adding the min-height property to my css file. Thanks again!

1

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