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

FrontendMentor Todo App using ReactJs, CSS, React hooks

Dhananjay 50

@dhananjaysahu79

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


It wasn't easy to customize that check box with an image. I am not sure how I will set the visibility of close icons by hovering over a todo. So I left it. Also the draggable todo, I haven't implemented. I hope I will learn the remainings from others' submissions.

Community feedback

@syedalimansoor

Posted

Hello,

Your solution looks great! A few points I would add:

  • Try adding transitions and animations to your sites, to give a more professional feel
  • It would be nice if the app had the style min-height: 100vh. This ensures that there is no whitespace at the bottom for taller screens
  • You can display the close icon on hover by adding onMouseEnter and onMouseLeave events to the todo-input-wrapper and then styling the close-icon based on those events
  • Also break your app into smaller components and write each component in a separate file. There is no benefit to using React if you are gonna write your entire app inside App.js

You may have a look at my solution to get an idea of what I mean. Cheers!

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