Random advice generator app using Axios and bootstrap
Design comparison
Solution retrospective
Hi I finished this challenge and I've got a question. How can I make api call by default like as soon as you open the link? I hardcoded an advice for now. Please review my code and give some advice. I appreciate it. Thank you
Community feedback
- @zougari47Posted over 1 year ago
You can click the button on the page load. I sent you a pull request in GitHub.
Marked as helpful0@neew18Posted over 1 year ago@zougari47 thank you for ur help. I merged it now.. but I don’t like the way my default code is showing first and then a random advice popped up. May be if I remove my default code if it might look okay?
Edited- I just checked ur solution. It look really cool with the animations.. can u recommend me a good course where I can learn those things ?
0@zougari47Posted over 1 year ago@neew18 yes left the inside id and advice empty in HTML.
I use React and Tailwind in my solution. The frameworks don't matter just get strong in JavaScript and CSS .
I don't have a specific course, just learn more about CSS animation. Here is the animation I use in my solution.
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } }
0 - @shihabmunshi06Posted over 1 year ago
you can use conditional rendering, when you have the data you set your fetchingDone state to true (we are using a useState hook here) and the elements will be shown on the page
As far as I know it might take some time to fetch the data when you open a page and submit a request so there might be no IMMEDIATE rendering, you can use a loading spinner or some text if you want to show the fetched data and your page together
you can check my solution as i am using some messages as I am loading the data
Marked as helpful0@neew18Posted over 1 year ago@shihabmunshi06 thank you so much. I looked at your code and there are some I haven’t learnt yet too.. I will do some research and try to read your code. Can I ask you something? Like i saw you use a file with jsx extension and call it inside js file. Can u explain to me about it?
0@shihabmunshi06Posted over 1 year ago@neew18 I didn't understand you. Name the files maybe
0@shihabmunshi06Posted 10 months ago@neew18 I havent been coding for 9 month cause of mental illness, starting fresh, are you a expert developer now ?
0
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