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

Fully responsive Todo app made with React.js and SASS

Nika 180

@nikavolk

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


Hi!

This was my first somewhat more advanced React project.

Made with HTML5, SASS, React.js.

Most of the time, by far, was spent on working through all the states, filtering through them and still keeping the original state intact. Took a very long time to get to the point where I finally figured out I had to use the switch statement to get the filter working.

Another (very basic) issue that took me way too long to solve was with keeping the checkboxes in the checked state when filtering through the items. All I had to do was to add the "checked=" attribute to the checkbox element.

Implementing different colour themes wasn't much of a challenge, CSS was a breeze this time around.

I've not implemented the Drag and Drop feature at this time, I've been fiddling with the ReactDnD utility but it currently seems a bit too difficult for me to grasp and implement. Will get back to it once I get some more knowledge and experience.

Please let me know if there are any bugs that you've encountered, feel free to leave feedback. Thank you!

Community feedback

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