Skip to content
OverviewSolutions
12
Comments
4
Ahmed Huzain
@ElHuzain

All comments

  • Sahil Kumar•190
    @Vi-r-usSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Hi everyone! I wanted to share my React implementation of the todo app challenge. I've incorporated drag and drop functionality using onPointerDown, onPointerMove, and onPointerUp events. I would like to use onDrag pointer events instead of that.

    What specific areas of your project would you like help with?

    However, I would appreciate any feedback or advice on a few points.

    • I feel like using Pointer Events for the drag and drop functionality made my code a bit complicated and messy. I did my best to keep it clean by adding lots of comments, but any advice on keeping my code cleaner would be much appreciated.
    • Additionally, I would like to implement a locked axis drag like the one from the DnD Kit Library. If someone could help me with that, it would be great.
    • Lastly, there is a question mark sign on the webpage that I haven't been able to figure out where it's coming from. If anyone has any ideas, I would be grateful for your input.

    Thank you all in advance! 😊

    DoMore (TODO) App | React.js

    2
    Ahmed Huzain•380
    @ElHuzainPosted 8 months ago

    Regarding the question mark problem. Check in the AppProvider component. Right after rendering out children in a {children}, there's a question mark right next to it.

    Marked as helpful
    0
  • Sahil Kumar•190
    @Vi-r-usSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Hi everyone! I wanted to share my React implementation of the todo app challenge. I've incorporated drag and drop functionality using onPointerDown, onPointerMove, and onPointerUp events. I would like to use onDrag pointer events instead of that.

    What specific areas of your project would you like help with?

    However, I would appreciate any feedback or advice on a few points.

    • I feel like using Pointer Events for the drag and drop functionality made my code a bit complicated and messy. I did my best to keep it clean by adding lots of comments, but any advice on keeping my code cleaner would be much appreciated.
    • Additionally, I would like to implement a locked axis drag like the one from the DnD Kit Library. If someone could help me with that, it would be great.
    • Lastly, there is a question mark sign on the webpage that I haven't been able to figure out where it's coming from. If anyone has any ideas, I would be grateful for your input.

    Thank you all in advance! 😊

    DoMore (TODO) App | React.js

    2
    Ahmed Huzain•380
    @ElHuzainPosted 8 months ago

    Well done 👏🏻👏🏻

    0
  • Ahmed Huzain•380
    @ElHuzainPosted 11 months ago

    Hey, great work :) But I suggest trying as much as you can to duplicate the given Figma design, as that's the point of the website.

    Front End Mentor provides you challenges similar to ones given in real world projects, so it's a really good practice to try duplicating them.

    0
  • Alexander Hergert•710
    @alexander-hergertSubmitted about 1 year ago

    Loved that project. I preferred using the rest api instead the static file. I have used Redux for state management and RTK Query for fetching and caching also made use of the loader from react-router. I also decided to make the theme switching by using daisy-ui and tailwind-css. For styling I used tailwind-css. Tried to cover the 404 response in an Error page. Polished a bit with framer for some minimal animations.

    Rest countries api with theme switcher

    2
    Ahmed Huzain•380
    @ElHuzainPosted about 1 year ago

    Hey, I have a suggestion, I think it'd be nicer to make the "Dark Mode" text clickable, not just the icon. Even better, make it say "light mode" when it's dark. And "dark mode" when it's light.

    Good luck!

    1