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

ReactJS/Tailwindcss

#react#tailwind-css

@trander123

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


I dont know how to make those filter buttons ["all", "active", "completed"] append or inline with clear items on the breakpoint.

Community feedback

Ahmad_Mana 320

@UserAhmad2001

Posted

Hello pal👋👋👋👋

It's easy actually, Assuming you have stored your app's data in an Array of objects like this one {content: "Lorim", checked: true"}.

You have to create two states,

  1. One for storing all the data.
  2. The other for storing the data that you want to view to the user.

Whenever you want to view all the data the data in the two states should be the same, If you want to only view the completed TODOS then filter the data in the first state and set the second state to the filtered data, and you can do the opposite with the filter method and view only the active TODOs. here is my solution for this challenge.

Hope I delivered the idea

Good luck with the project and Happy Coding

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