Submitted 10 months ago

ToDo Application: TypeScript, React, Redux, Bootstrap, HTML, CSS

StasMelamed• 40

@StasMelamed

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everybody! I am new here, so please comment, all your suggestions are very helpful to me! As for the task, probably it could be done in a more simple and straightforward way, but I decided to make it with Redux/ Typescript. The most difficult part for me was the drag-and-drop section, because I used it for the first time here. All the code is written by myself, except for that drag-and-drop part, which I found somewhere else, but I learned how it works for now. I know that there is plenty of space for improvements, so please do not hesitate to give me an advice! Thanks a lot!

Community feedback

StasMelamed• 40

@StasMelamed

Posted 10 months ago

Thanks a lot! Very useful! As for "In the challenge the drag and drop functionality was used to sort the tasks and not to insert them into the task field" I initially made a button "add task", but then deleted it. Probably it was not the right move)) The same goes to "X". Next time I will pay more attention to the task details. Thanks again!

Pablo da Silva Bezerra• 150

@PabloBezerra

Posted 10 months ago

Hello! How are you! Great work! I still don't really understand how react works, so I can't give my opinion on the code itself. However, there are some features that I have to highlight.

In the challenge the drag and drop functionality was used to sort the tasks and not to insert them into the task field. I thought it was a great idea, but it's not very intuitive. You can keep this feature, but you need to come up with another way of adding tasks.
The drag and drop functionality in the task field doesn't work very well, some tasks duplicate instead of moving the task. Possibly this is because of the add tasks when moving functionality you've implemented.
And finally, I can't delete a specific task by clicking on the X, instead of deleting it, the task is marked as completed. You can solve this by adding the functionality to mark the task only on clicking on the circle and not on the whole task.

These are some performance irregularities I've found. I hope I've helped you improve your project! See you!

Please log in to post a comment

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