Skip to content
Submitted over 2 years ago

Advice generator with HTML / CSS and Javascript (fetch)

Nicolas de Guilhem de Lataillade•20
@ndgdl
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

First challenge on Frontend Mentor, had a lot of fun :)

I struggled with the responsiveness:

  • first I tried given a width in vh (not good results on big screens)
  • then I tried to use fit-content as a width property but ended up with 1 line advice on big screens
  • I ended up giving a given width in pixels Is there a better way?

Regarding the fetch request, I was wondering if there is a way to prevent spamming the requests. The easiest way for me was disabling the button with a timeout of 1 sec, but not sure if it's best practice.

Any other feedback would be welcome!

Community feedback

  • Simon Davis•505
    @SkidragonPosted over 2 years ago

    Hi Nicolas, for width, I usually set the width: 100% then I set a max-width: 120ch or something. I use rem/em instead of pixels because some devices calculate pixels differently. For fetching requests, disabling it is good enough for the frontend since this API should be taking care of any attacks like DOS (Denial of service). If its not an API that uses caching and throttling the requests, you would need to have your own server to talk between the client and the API.

    Marked as helpful
    1
  • David Andrea•410
    @djblackettPosted over 2 years ago

    I'm not sure if you made a typo in your question or not, but there is a corresponding vw unit for getting the percentage of the viewport's width. That would be more predictable that using vh for width. I often use that or percentages.

    You can also change the percentages in a media query if it is not quite behaving the way you want at certain sizes.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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