Nathan Zed• 120
@TKSHII
Submitted
Nathan Zed
@TKSHII
All comments
- Nathan Zed• 120
@TKSHII
Posted
Done in 15 minutes.
0 - Zaynab Odusote• 130
@ifedapo4
Submitted
Nathan Zed• 120@TKSHII
Posted
You should not use "var" anymore, but "let".
For light and dark mode you have to put an eventListener click on the switch dark/light button. Then you create dark and white class with background: dark for the dark and light for the light.
You select all darkmode changing elements with your JS and put each one in variable. let todoList = document.querySelector('.todolist') etc.. for each.
Then on click on the dark/light button on top it will call a function that will put the dark class to each elements if the theme is dark or light for the light theme.
Thats it :)
Marked as helpful
0 - Lester• 60
@lesterdlb
Submitted
I'm not really satisfied with how I handle the update of the Todos after every drag and drop. Basically, every item has an index property, and depending on where the user drops it, I proceed to update every index, by either adding 1 (User moved the item up) or subtracting 1 (User moved the item down), between the original position and the new one. Perhaps a data structure like a linked list could be a better solution?
I'm more of a backend developer, so any feedback regarding how I structured the React application would be appreciated.
Nathan Zed• 120@TKSHII
Posted
For the drag and drop i recommend you to check react-dnd or framer-motion :)
0 - Raul• 290
@Raul-code1
Submitted
can't do the drag and drop part with framer-motion, if someone can help me on that part it will be awesome.
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 - Victor Mendez• 290
@im-victor-mendez
Submitted
I had some problems:
- I need to click/submit 2 times the url to push to the list.
- When the url is submitted, the input doesn't clear.
I need to:
- Add the "hamburger menu" to mobile sizes.
- Add the svg background to some elements.
- Add some visual elements.
- Add directions to some buttons.
Nathan Zed• 120@TKSHII
Posted
For a better data flow you should use the context API. Go check my profile, you will see how i did.
0
