Submitted 4 months ago

Advice Generator App (React.Js)

Roselin Y• 330

@Vanillatte68

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

What are you most proud of, and what would you do differently next time?

this time i tried using react framework to build this. i learn how to fetch an API and using react hooks to render the data. i can't get the page look as close to the design like usual but i'm proud i can make it responsive.

there are some hurdle i need to overcome as to be fair my understanding in react is quite low, but i'm would like use react framework in more challenges in the future.

What challenges did you encounter, and how did you overcome them?

when i read the challenge i thought i'm going to use math.random() to randomize the advice, but at first i didn't know where to put it. after some time i decided to make another fetch function for handling the button and use math.random() to randomize the id instead.

What specific areas of your project would you like help with?

since i can't get my solution as close to the design, i would like to ask for help with the button placement and how do you keep it "anchored" to the card's border.

and also this is the first time i use react framework for a challenge like this, feel free to review my live site and code and tell me your feedback.

Community feedback

Arnold Limberg• 410

@CreativeLogic

Posted 4 months ago

Hi. I just did this challenge myself. To get the button centered there is a trick using absolute and relative positioning.

The way I tackled it was like so: I made a div container and put the button icon inside it. I built this container to resemble the actual button. To center the container, you make it position: absolute and anchor it to the card by making the card position: relative.

Then you set the button container to left: 0, right: 0 and margin: auto. The combination of these properties centers it. Then I made the container flex to use the centering properties on the icon to center the dice icon within the container.

Marked as helpful

Roselin Y• 330

@Vanillatte68

Posted 3 months ago

@CreativeLogic Hello. I've implemented the button container and use absolute and relative position immediately, it works well with my code. It was really helpful. Thank you for the feedback.

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