Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Todo WebApp using REACT + TAILWIND and localStorage

@NIKO-DEV06

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a fun challenge. I used react + tailwind for the first time. It was also my first time doing drag and drop ever it was challenging at first but I was able to scale through;) Todos and theme are also saved to localStorage

I wasn't able to add border hovering on the checkboxes

Feedback is highly appreciated 🤓

Community feedback

@kowsirahmed

Posted

Congratulations. You did great.

As linear gradient border color is not supported, the border hovering effect cannot be solved without trick. This article demonstrate this solution. In short,

  • position(absolutely) an element/pseudo element behind the check icon button.
  • increase its size from the original button(negative values of inset will do that in this case)
  • give this element a desired background when needed.
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord