Skip to content
OverviewSolutions
6
Comments
14

Alex Li

@awexli400 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Maryam Nasir•150
    @maryam-nasirSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I have styled this project using Tailwind CSS framework and used React library to implement the solution.

    What challenges did you encounter, and how did you overcome them?

    Nothing till now.

    What specific areas of your project would you like help with?
    • What other efficient approaches can I use to implement the solution?
    • Any feedback on how my code can be improved in terms of code quality and accessibility?

    Interactive Rating component using React and Tailwind CSS

    #react#tailwind-css
    1
    Alex Li•400
    @awexliPosted 11 months ago

    You'll want to consider what can happen when a user submits without selecting a rating. Ideally, you'll want to prevent submission and let the user know they must select a rating before submitting. How might you implement that?

    Marked as helpful
    0
  • Alex Li•400
    @awexliPosted almost 2 years ago

    Hey Jimmy, took a peep at your code. It looks like you're doing a lot just for a slider, fortunately there's an easier way :-)

    HTML has a built-in input tag just for this, via <input type="range" /> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

    If you'd like to save the values of the input to be used later, you'll probably want to save them to React's state onChange. Some resources to help you out:

    Marked as helpful
    1
  • Alex Li•400
    @awexliPosted about 2 years ago

    Love the form validation and simulating the loading after submit :-) I think it would make a great piece on a portfolio. Forms and similar types of step functionalities are quite common in many web applications. Another great piece would be to have project that includes interaction with a backend API.

    Some minor feedback:

    • You have a typo for the label 'Email Address' (missing one more d)
    • In mobile view, step 2, there is a layout shift when changing between monthly/yearly plans. This pushes all the buttons down and some below the card, and in general is not the best user experience
    • In step 3, it doesn't allow me to select/unselect an option if I click on the number (10/yr, 20/yr), even though it gives me a visual feedback that I did click on it
    Marked as helpful
    1
  • Alex Li•400
    @awexliPosted about 2 years ago

    Awesome work! :-) I learned something new (window.matchMedia & prefers-color-scheme)

    Some things I noticed:

    • Right now, users might find it frustrating to have to manually clear the search bar for every new search. What do you think about automatically clearing the search bar after making a request?
    • My operating system prefers dark-mode, but clicking on 'light' icon does not switch it to light-mode on the first try. Try using window.matchMedia('(prefers-color-scheme: light)').matches instead! This returns a boolean (true/false) if the user prefers light scheme
    Marked as helpful
    1
  • Alex Li•400
    @awexliPosted almost 3 years ago

    Hey Shawn, nice solution :-)

    Instead of using span for the titles "How did we do?" and "Thank you!", it might be semantically better to use heading tags (<h1 />)

    Beyond the code itself, one thing to think about is the user experience. For example, what should happen if a user clicks submit without selecting any options? Should there be some type of UI feedback letting the user know they must select at least one option? How would you represent that? Maybe a little message below? It's good to keep user experience in mind as a Frontend dev -- good luck on your journey!

    Marked as helpful
    0
  • Alex Li•400
    @awexliPosted about 3 years ago

    Nice solution @Yuko-code!

    If you're up for the challenge, I'd like to see a loading indicator whenever a new advice is being fetched. Imagine someone with slow internet, it may take a long time before seeing the next quote! Showing something like a spinning animation or even the word "loading.." helps reinforce that something is happening in the background and makes for good user experience :-)

    You'll also notice it doesn't fetch a new quote if you click the button in quick succession. Since the API service caches requests, repeat-request within 2 seconds will return the same piece of advice. If you're feeling really ambitious you can add something to let the user know they'll need to wait X amount of seconds until a new quote is fetched.

    Good luck!

    Marked as helpful
    1
View more comments