Skip to content
Submitted over 2 years ago

FrontendMentor Todo App using ReactJs, CSS, React hooks

Dhananjay•50
@dhananjaysahu79
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

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

  • Syed Ali Mansoor•460
    @syedalimansoorPosted over 2 years ago

    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

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