Skip to content
OverviewSolutions
6
Comments
14
Alex Li
@awexli

All comments

  • Maryam Nasir•150
    @maryam-nasirSubmitted 7 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

    1
    Alex Li•400
    @awexliPosted 7 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
  • Jimmy Wu•180
    @jameswu49Submitted over 1 year ago

    I wasn't able to figure out how to make the slider for this project. At the moment, it will move when dragged, but doesn't follow the cursor and goes off the bar itself. Would appreciate any guidance on how to best approach this!

    Made in react and tailwind

    1
    Alex Li•400
    @awexliPosted over 1 year 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
  • Catalin Banici•260
    @CatalinBaniciSubmitted almost 2 years ago

    Hello!

    This is my solution for the Multi Step Form, it has some rough edges here and there, but it works as expected. The mobile view doesn't look exactly like it is supposed to look, I had to change a lot of things for that to happen, but for now I'm satisfied with the result. Also do you think this is a good portfolio project for a first job ?

    Any feedback is well accepted!

    Multi Step Form with React and Formik

    1
    Alex Li•400
    @awexliPosted almost 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
  • Darya•160
    @DHolets99Submitted almost 2 years ago

    Hi! Another challenge completed. I's my first work with API. Any feedback is welcome, as I'm still a beginner with it. Thanks!

    Github_User_Search

    1
    Alex Li•400
    @awexliPosted almost 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
  • Shawn Lee•560
    @OGShawnLeeSubmitted over 2 years ago

    Hey! Shawn here. This is my very first solution. It took more time than expected since I had to figure out how to host it. Well I don't have much to say. I am pretty content with the result and extremely comfortable with the stack I chose: Svelte + Svelte Transition API + WindiCSS + TypeScript + Vite... Truly the joy of code. Only thing bothering me is semantic HTML and accessibility, any advice in that regard? Would love to get some feedback from you guys. Have a good one and thanks for reading/viewing!

    Animated Interactive Rating Component | Svelte TS + WindiCSS and Vite

    1
    Alex Li•400
    @awexliPosted over 2 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
  • Yuko-code•235
    @Yuko-codeSubmitted over 2 years ago

    I struggled with button styling more than API and event listener... Anyway I did my best. Any feedback will be appreciated :)

    Advice generator app

    2
    Alex Li•400
    @awexliPosted over 2 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
  • Alex Li•400
    @awexliPosted over 2 years ago

    Hey @yhas14, nice solution!

    One thing you can do to improve user experience is to implement a loading indicator (such as a spinner animation, or even the word "loading..") while we wait for an advice to return from the fetch. This lets the user know something is happening in the background.

    If you're feeling ambitious you can also implement something to let the user know they'll need to wait X amount of seconds before a new quote is fetched. Try pressing the button in quick succession and you'll notice it takes some time to update. This happens because api.adviceslip.com caches request, and any repeat-request within 2 seconds will return the same piece of advice -- most likely because they don't want anyone to overload the api service 😉

    Good luck!

    Marked as helpful
    0
  • Kellen Ruyle•930
    @rule-kellsSubmitted almost 3 years ago

    Hello community! Please provide feedback and/or criticism. I am just learning JavaScript and feel like I could have written my code more simple and elegant. So, feel free to share on how you would have written the code and if you have any resources on learning JS as well. It's something I definitely want to get better at.

    thanks in advance! Kell

    a responsive FAQ accordion card with Flex and a little JS

    2
    Alex Li•400
    @awexliPosted almost 3 years ago

    Hi Kellen, your JS reads well as-is! Here's my go at it: https://gist.github.com/awexli/193d5d6ca441ee5f8f56d9be7ac900c1

    As for JS resources:

    Marked as helpful
    1
  • Nafsuki•245
    @NafsukiSubmitted almost 3 years ago

    I created this QR code component with Nextjs & TS project as a practice. It's with a small ups & down animation:)

    Planning to challenge more advanced projects with Nextjs & TypeScript. Any feedback & suggestion for improvement would be very much appreciated ☺️🙏!!

    QR Code Component using Nextjs & TypeScript with a small animation

    3
    Alex Li•400
    @awexliPosted almost 3 years ago

    Something to think about... When trying to scan something with a phone, a moving QR Code might not be the best user experience.

    But I understand that you were practicing and having some fun with animations, and it doesn't move fast enough to make a difference anyway :-)

    0
  • murilo•110
    @mlzziSubmitted almost 3 years ago

    First time using Sass. If you have some tips, please, be my guest.

    I have one question. When I load the page I need to click two time to the share button to it pop up. Then, in the sequence clicks it work propely. Not sure why this is hapening, any guess?

    Please, don't be shy and give me feedback :)

    Thanks in advance!

    Fisrt time using Sass

    2
    Alex Li•400
    @awexliPosted almost 3 years ago

    Hi Murilo,

    Looking at your openShareIcons function. The reason why it doesn't open the first time is because by default share.style.display does not equal to "none", and so it will execute the else block.

    Marked as helpful
    1
  • Alex Li•400
    @awexliPosted almost 3 years ago

    Hey Logan, great question.

    A good starting place is to improve your component by mapping (looping) <DesktopNavBarPlanets /> instead manually of creating one for each planet. This way, you are not repeating code.

    For example:

    {planets.map((planet) => {
    return (
        <DesktopNavBarPlanets
            ...
            planet={planet.name}
        />
    );
})}

    For state management, you can use one state that takes in the name of the planet, so a string instead of a boolean.

    For example:

    const [selectedPlanet, setSelectedPlanet] = useState(planets[0].name)

    In the <DesktopNavBarPlanets /> component you can then check if the selectedPlanet matches with props.planet. If it matches style the border, otherwise leave it transparent.

    For example:

    style={
    props.selectedPlanet === props.planet
        ? { borderTopColor: `var(--${props.planet}-theme)` }
        : { borderBottomColor: 'transparent' }
}

    As for changing state onClick, you’ll have to update the selectedPlanet state. I’ll leave that to you to figure out :-)

    Marked as helpful
    1
  • John•10
    @jcoder1911Submitted almost 3 years ago

    I struggled most with alignment. For the header in large screen sizes, I did position: relative and left: -6rem. I'm sure there could have been much better ways to do this so any input would be appreciated. Any suggestions on how I could have organized it better would be good. thanks!

    css grid, css flexbox, css variables, javascript to check form

    1
    Alex Li•400
    @awexliPosted almost 3 years ago

    Try using text-align: left for the header instead. Let me know how that goes! :-)

    0