Design comparison
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)
tofetch(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%); }
1Account 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.
1@WerSzpePosted over 1 year ago@at33v It all works now. Thank you once again, I learned quite a lot!
0Account 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!
1
Please log in to post a comment
Log in with GitHubJoin 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