Skip to content
Submitted over 2 years ago

Advice generator app solution

Praise Immanuel•250
@PraiseImmanuel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey everyone 👋 I had a lot of fun in this challenge and had a good opportunity to learn how to use React and Redux for the first time. While I am yet to finish my React Course, I decided to build this web application to work with what I have learned so far. During this project execution, I learned a few things listed below

-How to consume an API using Axios -How to respond to an error from an Axios async function -How to use Redux-Thunk in dispatching a function as an action -How to use Redux to manage state in a react application

Also after much research, I had to use javascript event listeners to handle hover effects, I am wondering if there might be a reason I had issues using the hover effects in CSS. Feel free to leave any necessary feedback on my solution.

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Hi Praise Immanuel, I love your solution, and I think it looks great! I remember I used to have issues using hover when writing React, but I think it might have been more of the issue with how I was writing the CSS and what I was using. I recently used Vite.js to run an React while using just Sass and had no issues. By the way, as a "level up" for this challenge, you can try to see how to enhance the accessibility function. That's what I just finished working on as an add-on for my advice challenge, and I think it's a great way to learn accessibility as well. Good luck finishing your course!

    Marked as helpful
    0
    Praise Immanuel•250
    @PraiseImmanuelPosted over 2 years ago

    @elaineleung Thanks for your awesome feedback. Please, I will be glad if you can guide me in fixing the accessibility issues.

    0
    Elaine•11,400
    @elaineleungPosted over 2 years ago

    @PraiseImmanuel You can have a look at my solution, although I still need to do quite a bit of work to clean up the CSS, but in terms of how the app functions with the tab key, I think it kind of shows a rough idea anyway. The main thing is to make sure :focus is included in the CSS for various components. Good luck!

    0

Please log in to post a comment

Log in with GitHub

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