All solutions

Any feedbacks are greatly appreciated.

Even though it's my first time to use SCSS, I kind of like it already, can someone kindly check my code and give me a feedback, I want to know SCSS best practice.

Any feedback is very much appreciated

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.

Difficult part of this project is:

1. The background part where two(2) oblong shapes should change position when the browser is resize to small.
2. The footer part where "manage" logo and copyright text should line up when the website is resize to mobile device