Submitted over 1 year ago

Todo app using Sass and ReactJS

Muhammad Al-Ameen Abdullahi• 260

@al-ameen36

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

Learnt

ReactJS basics.
Hosting react apps on git pages. Learn here
Drag & Drop.
Local & Session storage.

Challenges

Deciding where to drop the todo item when reordering the list. event.clientY and event.offsetTop event properties came to the rescue :)

Addition

Persistent data using Local storage.
Added an active state to the item being dragged.
An indication to where the item is going to go when reordering.
Added an empty state (when there are no items).

Please, let me know ways to improve my solution. Any advice or critique is welcome, Thanks :)

Community feedback

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