Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Todo main app using Reactjs, react-icons, framer-motion and tailwind

Raul 290

@Raul-code1

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


can't do the drag and drop part with framer-motion, if someone can help me on that part it will be awesome.

Community feedback

Nathan Zed 120

@TKSHII

Posted

Hey 🙂 For framer motion you have to import { Reorder } from "framer-motion"

Then you create a <Reorder.Group> (its a ul html tag) This Reorder.Group want 3 required params with the value, the axis, and the onReorder one where you put your setState function of your array of data.

Then inside the Reorder.Group you need to put the Reorder.Item (it's an li) with 3 required params I dont remember what it is.

Then it should work :) I did it on mine, go check it out if you need to.

Marked as helpful

0

Raul 290

@Raul-code1

Posted

@TKSHII Hey :D , i try that but in my case I used redux toolkit and I didn't know what type of function I had to create and put in the third parameter (order ={ setSate }), I tried in different ways and I didn't get it :(

0
Nathan Zed 120

@TKSHII

Posted

@Raul-code1 I dont know how to use Redux. Can you explain me your problem with more precision ? I used hook for this, did u used class based components ?

0

Please log in to post a comment

Log in with GitHub
Discord logo

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