Advice generator with HTML / CSS and Javascript (fetch)
Design comparison
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
- @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 helpful1 - @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 helpful0
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