A Drag and drop To-do App

This app features

• Mobile responsive.
• Drag and drop.
• Toggle light and dark mode.
• Add/Delete/Mark todos to the list.
• Filter by All/Active/Complete todos.
• Adding a new todo with ticked checkbox will route you to Completed.
• Adding a new todo with unticked checkbox will route you to Active.
• Uses localstorage
• Doesn't require page reload to display data.

---

• What I find difficult while building this project and most proud of

There's a particular part of my css that applies a border gradient color as you hover on an unticked checkbox, and I'm trying to work it exactly as the design, It's a bit tricky as I'm not yet familiar with linear and radial gradients but I somehow achieved it. If you're reading this and not able to achieve it, Check the code snippet below:

.round-checkbox input[type="checkbox"]:not(:checked) + label:hover {
  border: 1px solid transparent;
  background-image: linear-gradient(var(--foreground), var(--foreground)), radial-gradient(circle at top left,hsl(192, 100%, 67%), hsl(280, 87%, 65%));
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: inline-block;
}

• Which areas of my code I'm unsure of.

Probably where I didn't include drag and drop to Active and Completed page. Do I have to? I guess so. but for now I'll leave it as it is.

If someone would like to check my code and give me feedback, feel free to. I tried my best to put best practices.