Skip to content
Submitted over 3 years ago

Fluid Responsive Design Layout using HTML5, CSS3, and Vanilla JS

accessibility, bem
Bryan Sanchez•590
@0-BSCode
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Had a lot of fun with this one! I decided to do a simple challenge so I can work on my animations and basic API fetching. Some questions I have regarding my results.

  1. Is there a better way to organize my JS and CSS files? Before I'd just dump all the code for each in one file, so I thought I'd try organizing it better in this challenge. However, I've had limited success since I don't really know how to compartmentalize my code and the challenge wasn't really complex so there wasn't much code to compartmentalize. I'd greatly appreciate any feedback and advice regarding this!
  2. For this challenge, I decided to create a loading animation while data was being fetched from the API. I just placed a rotating div element where the text should be and have it display while the data was being fetched and hidden when the data arrived. Is this good practice or is there some better method that can be used?

Any and all advice or feedback would be of immense help😁 Cheers!🎉

Code

Please log in to post a comment

Log in

Community feedback

  • Luis Castillo•380
    @lipe11

    Hi, nice solution there! And reading your code taught me a about intersection observers, didn't know they existed!.

    Regarding your question about compartmentalization, I think what you did with 3 files makes sense. I think whatever helps with readability is good. Having said that, I'll leave a couple of personal thoughts about separating code.

    In my opinion, is a bit easier to get better at it when you star working with modules. In this case, the 3 files are joined in the same scope at the end, so it's like it was just one file anyways, but with modules, each file lives within it own scope. So it makes you think a little different on what is best to put in each file.

    This used to be more of a node thing, but I've seen there's some browser support for modules this days (in fact, I imported an external module in my own advice solution). If you haven't used them before, I'll leave a reference here.

    As a suggestion related to separating code, you could break some of your functions a little more, for instance, your fetch function could be 3 functions (one for "fetch", one for "disable" and one for "enable"). Just beware, since your fetch function is async, you would need to use it within another async function or with the promise/then syntax.

    Hope this is useful in some way.

    Marked as helpful

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