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.
