Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice Generator with React + Vite

@rmartin93

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

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

@peanutbutterjlly

Posted

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

@rmartin93

Posted

@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
Discord logo

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