Skip to content
Submitted over 1 year ago

Advice Generator with React + Vite

Ryan Martin•240
@rmartin93
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

Honestly, this was just a quick one for fun while I was bored today 😂

Feel free to critique, but it was pretty straightforward.

I did add some cool neon styles for the button hover effect but other than that, nothing too exciting going on.

button:hover {
cursor: pointer;
box-shadow: 0 0 10px var(--neon-green), 0 0 40px var(--neon-green),
0 0 80px var(--neon-green);
transition: box-shadow 200ms ease-in-out;
}

Happy coding!

Community feedback

  • Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    hey 👋,

    let me say, I love the initial "fetching advice" quote, like the loading spinner on the button on click, and the hover effects.

    I think it looks and functions great! good job.

    1
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    @peanutbutterjlly

    Thanks! I had to put a setTimeout in the fetch so that the spinner would show but yeah, this was a nice and simple one just for fun 👌

    1

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