Skip to content
Submitted over 2 years ago

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

Bryan Sanchez•590
@0-BSCode
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

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!🎉

Community feedback

  • Luis Castillo•380
    @lipe11Posted over 2 years ago

    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
    1
    Bryan Sanchez•590
    @0-BSCodePosted over 2 years ago

    @lipe11 Thank you so much! Will definitely look into the reference you left.

    0
    Luis Castillo•380
    @lipe11Posted over 2 years ago

    @0-BSCode Hi, glad to see you found interest in modules.

    I just recently came across this tutorial on how to get started with modules on the browser, I think explains it very clearly. I thought it was worth leaving that reference here too.

    Cheers!

    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