Submitted over 2 years ago

Using Axios and React hooks to display random advice

Nika• 180

@nikavolk

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

My first API-related project. Made with HTML5, SASS, ReactJS (Axios, useState, useEffect).

What I've learned:

basics of SASS (using variables and nesting)
playing with media view for completely responsive design
basics of useState
basics of useEffect
basics of GIT (commit, push) and Github

My considerations

The project took me considerably less time than my very first project (the Rating component). The first one took over 8 hours, whereas this took about 4 hours, mostly spent on getting the Axios.get working, and minutiae CSS details.

CSS: Positioning the button was difficult, played around with negative margins which didn't seem like an elegant solution. Researched alternatives and used transform, instead.

React: Could have used fetch instead of the Axios package, had difficulties implementing the get function and reading data on it. Lots of Googling and reading docs.

Thank you for taking the time to check my work out. I'm very open to any and all comments and suggestions ❤️

Community feedback

Matthijs van der Plas• 30

@MatthijsvanderPlas

Posted over 2 years ago

Awesome App! Inspiring me to look forward to sass and react. Code looks really clean.

I could only suggest changing the width to a more static display so it doesn’t change depending on the quote it displays. Only the height would adjust slightly.

Some delay on mobile before you can get a new quote, no idea how.

Keep it up!!

Marked as helpful

Nika• 180

@nikavolk

Posted over 2 years ago

@MatthijsvanderPlas Thank you! ☀️

Ohh, I know about the width ... If I set it to a static width, there's this odd, ugly sort of transition when the media query gets triggered, which makes the card sort of jump, whereas if I set it to auto, the width of it just flows beautifully when resizing the display 🙈 But it will look better if I set a static width, true. Thanks! ❤️

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