Submitted 9 months ago

React advice generator app using API

Isabella Lizarde• 60

@soybella

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Advice generator app

HTML
CSS
JS
API

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone!

Some difficulties I encountered with this project:

Button placement with dice image.
Displaying instructions "Roll dice below" on load. This is something that wasn't required, but I added it to test my javascript knowledge.
Changing pattern divider SVG image from desktop to mobile view.

I also added an animation to the dice on hover for desktop view, and for mobile view the dice will bounce infinitely.

Any feedback about my code would be appreciated, I've been trying my best to keep it as clean and readable as possible.

Community feedback

Aphelion Web Development• 120

@Aphelion-im

Posted 9 months ago

Love what you did with the animation!

I see you are using Create React App.

Have you tried ViteJS? It's so much faster than Create React App and has way less dependencies (And thus less errors/vulnerabilities. That's why I do not like NPM when compared to Maven (Java) and its pom.xml file)

Make sure to end your files with .jsx when using Vite.

Isabella Lizarde• 60

@soybella

Posted 9 months ago

@Aphelion-im Thank you! I haven't used ViteJS but I will definitely look into it, I appreciate the information.

Please log in to post a comment

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