Todo App React

Hi tbrownlee, you did a nice job!

About your questions:

How can I make the checkboxes like the ones in the design file?

• To do that, you need to "hide" the standard html checkbox input and wrap the input inside a container, then style the container as you want. The checkbox component that you will create can be either a controlled or uncontrolled component, you choose. To set the gradient inside the checkbox, you need to use the property background-image, not the background-color, take a look at my solution. Also, check out this article: Custom checkbox component in React or this one (but this one is in Portuguese) Checkbox component in react

How do I save info in React on refresh?

• To save the todo info without implement any API, you can use the browser local storage. You can save the todos in the localStorage everytime the user create or update (checking/unchecking) a todo, in resume, implement this logic using the useEffect hook. In addition, you can create a custom hook (that implement the logic of saving/getting from localStorage) and also use the ContextAPI to manage the todo states. To read more about how to use the localStorage, see this article: Todo app using localStorage and react hooks

How do I implement drag and drop?

• To do that you can implement your own drag and drop functionality, but this will be kinda hard, or you can use some drag and drop library. I recommend dnd kit or react beautiful dnd - i'm not a big fan of this last one because the bundle size is huge XD but i've used it in my solution. In this two libs, you will need to implement a function to handle the onDragEnd event. In this function, you will set your new states reordering the element in the array using the index returned by the onDragEnd event of the dragged element. To reorder the array, you can use the splice method, check the docs here.

IMPORTANT NOTE: splice is a destructive method, which means it modifies the array on which it is called, don't use it in directly on your react state, instead create a new const that store the current todo states and then use the splice method on it, then set your todos state with the new elements by using the setter of your useState.

One more observation: about your mobile design, reduce the breakpoint to 375px, in your solution the background-image is switching to the mobile image too soon, this way, the image is getting the sides "cut off".

Good luck if you implement these improvements, but your solution turned out pretty cool.

Hope you understand, english is not my native language, but i'm trying.

Keep up the hard work! 🚀