Skip to content
Submitted almost 2 years ago

Responsive Todo WebApp using REACT + TAILWIND and localStorage

Emmanuel Ayeniko•330
@NIKO-DEV06
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Todo app
  • HTML
  • CSS
  • JS
3intermediate

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

  • Md Kowsir Ahmed•250
    @kowsirahmedPosted almost 2 years ago

    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

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