Skip to content
Submitted about 2 years ago

Advice generator app with Vanilla JS

Gabriel Alves•50
@Gabriel-Alves-95
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

Hello, everyone!

This is my solution to the Advice generator app challenge. I have used HTML, CSS and Vanilla JS only.

I am new to fetch so I would appreciate any suggestions or remarks about its use in my project. Specially, I would like to hear from you if there is a better way of employing the spinner than the one I have made. If you simulate a slow 3G connection in your browser, you will see that the spinner does not work properly.

Thanks in advance.

Community feedback

  • dgjenni2•320
    @dgjenni2Posted about 2 years ago

    It looks like the loading spinner loads correctly after the first load when it does not.

    An idea I had to fix that behavior was rather than replacing the entirety of the html during the load, maybe you could try making the spinner a hidden element absolutely positioned in the center of the screen. Then, when the button is clicked, toggle the css that hides the spin to make it appear, and when the fetch call gets a response, then make the spinner hide again. Just an idea, haven't had the time to try out the fix to guarantee it'll work, but conceptually I don't see why that wouldn't fix the problem by having the image element load in sooner.

    Marked as helpful
    0
    Gabriel Alves•50
    @Gabriel-Alves-95Posted almost 2 years ago

    Hi, @dgjenni2!

    Thanks for your answer. I have added the spinner directly into the index.html file with the "display: none" property, just like you suggested, and it worked fine. It was not needed to absolute position it, for other declared CSS properties handle the positioning of the elements. But this is a minor detail.

    Best regards, Gabriel.

    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