Todo app

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Amazing work on this app, Sami! 🎉

  Great to see you've updated it and the DnD is now working well. If you want the gradient border colour for the active state, the way I'd do it would be to add another div element to wrap the .circle element and make it slightly bigger. Then I'd add a background-color on that element for the default state and a linear-gradient for the hovered state.

  Also, I'd have a go at changing the cursor when you hover over the checkbox and the delete icon. At the moment, it stays as the grabbing hand for the DnD, but it would be great if it changed to the pointer when hovered over those elements as they're clickable.

  Keep up the amazing work! 😍

  2

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Just to follow up on this as well, a great example of this hover gradient technique can be seen on the Next.js Conf Jobs page. Hover over the cards to see the gradients.

  0

  

  Sami ur Rahman•370

  @qsrahmanPosted almost 4 years ago

  Thanks @mattstuddert your helpful comments solved the gradient border problem✌️. I think the app is now complete 🎖🎉. It was a wonderful learning experience.

  Thanks all.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @qsrahman awesome, glad to hear it! You’ve done an amazing job!

  0
• 

  P

  mi souto•105

  @mileinePosted almost 4 years ago

  Great work! =)

  Your solution does look great and your attention to details made me look to my solution in a different way so I could improve it too.

  I think it's impressive you implemented the drag and drop yourself, but maybe using a library would be a way to solve the issue with mobile devices. I used React Beautiful Dnd by Atlassian - with support for mobile devices - and I'll probably use it again on other projects because I really like the result.

  React Beautiful DnD https://github.com/atlassian/react-beautiful-dnd

  How to Add Drag and Drop in React with React Beautiful DnD https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/

  2

  ---

  

  Sami ur Rahman•370

  @qsrahmanPosted almost 4 years ago

  Thanks @mileine for checking the code and commenting. After implementing the DnD with HTML API, I tried to install react-beautiful-dnd but the installation failed because the library is not compatible with react 17.0.1 😱. However thanks a lot for the helpful links and words of encouragement ✌️

  1
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hey I really like this solution, it looks great.

  Shame the drag n drop doesn't work on mobile. I'm not good at React so hard for me to suggest changes, but could it be that drag and drop needs touch events as well as clicks or something? Really not sure what could cause it tbh, just guessing 🤷‍♀️

  Only a very minor suggestion would be to vertically align the crosses in their todo - they look a bit high.

  Maybe wrap the tick circles and the crosses in buttons for better semantics? But not sure about that, I'd have to test with a screen reader to see if that helps or hinders .. 🤔 As the whole card is clickable, its hard to know what the best semantics would be... Maybe it's all fine as it is! 😂

  Really good job overall, this is a hard challenge and you've done well

  2

  ---

  

  Sami ur Rahman•370

  @qsrahmanPosted almost 4 years ago

  Thanks @grace-snow for the suggestions. Actually I forgot to put align-items: center; in the list 😁 putting it there fixed it.

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Sweet work, Sami ur Rahman! 👏

  Your solution looks and works great! 👍

  I noticed that the state of the to-do list is saved even after I close and reopen the page, so good work on that! 🙌

  Happy coding! 😁

  1

  ---

  

  Sami ur Rahman•370

  @qsrahmanPosted almost 4 years ago

  Thanks @ApplePieGiraffe

  1
• 

  Sami ur Rahman•370

  @qsrahmanPosted almost 4 years ago

  Added DnD support using react-beautiful-dnd. The DnD is now working fine on desktop as well as mobile. ✌️

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @qsrahman looks really nice and all works better now, well done ☺

  0

  

  Sami ur Rahman•370

  @qsrahmanPosted almost 4 years ago

  Thanks @grace-snow 🙏

  0
• 

  P

  mi souto•105

  @mileinePosted almost 4 years ago

  Awesome!

  About changing the circle border color on hover, you can try changing it on its parent element <li> hover. =)

  0

  ---

  

  Sami ur Rahman•370

  @qsrahmanPosted almost 4 years ago

  Yes thats what I did, but it is still not working. If you check the css file I used ::before pseudo element to change the background-image which some one mentioned on stack overflow. Actually I know where the problem is ... but alas CSS is a one big hack.

  0