Submitted about 1 year ago

An attempt for Advice generator using React

weronika• 50

@WerSzpe

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

Update: it's working, giant thanks to @at33v!

Ngl I had a hard time doing this project so a few questions:

I tried to fetch data on initial render and then onClick but I decided that there was too much redundant code repetition so I made it that initial state is hardcoded and then onClick the state changes to whatever API sends. It works BUT only once and then you need to reload whole site. For contrast, I tried using other API (Chuck Norris API) and it worked just fine, changed on every click. Then on Discord mr Alex recommended that I add a cache header with 'no-cache' value but every time I got TypeError:Network Error along CORS errors. Is there something wrong with API or app? I'm confused about it af.
What is the effect on active button state called? I tried doing the "pulse" animation type and then keyframes but I can't quite put my finger on this "dust" effect.
I have a problem with Github Pages. I was following mainly this tutorial for deployment https://create-react-app.dev/docs/deployment/#github-pages and it does not work. Any ideas why are welcome

Thanks in advance for answers!

Community feedback

Account Deleted

Hello. To get the initial data, try doing the following:

set the initial state to null
add useEffect(() => { fetchAdvice() }, []) react.dev
change fetch(url) to fetch(url, {cache: "no-cache"})

Regarding the button effect, if you're referring to the design, you can achieve it by using the box-shadow CSS property. To add the box-shadow effect to the button on hover, you can use the following code: .btnDice:hover { box-shadow: 0 0 20px hsl(150, 100%, 66%); }

weronika• 50

@WerSzpe

Posted about 1 year ago

@at33v Thank you!

Account Deleted

@WerSzpe Hello, regarding GitHub Pages, please check the settings of your repository. I managed to deploy your repository, and here's the link to it, the live website, and a screenshot of my settings.

weronika• 50

@WerSzpe

Posted about 1 year ago

@at33v It all works now. Thank you once again, I learned quite a lot!

Account Deleted

@WerSzpe You're welcome! If you have any more questions or need further assistance in the future, feel free to ask. Keep up the great work!

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