To do List using ReactJs and Tailwind

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout looks good in general, the functionality works though the alert popping up could be removed or just be replaced by an aria-live element, stating what the user had added.

  Some other suggestions would be:

  • Using local storage for the todo items would be really great, if you want to add of course:>
  • Always have an main element that will wrap the whole main content of the webpage. For this one, the app selector could have used main instead of div.
  • The img that you use for the top part background could have only been used in css you don't really need to create an img for them, but since you made it this way, use alt="" and aria-hidden="true" on them, since those images are just for decoration.
  • Do not use the word T O D O. If you encounter like this, do not explicitly type that in the html, what will happen is that, screen reader will read it by letter and not word, just use todo and use text-transform: uppercase to make capital.
  • The colormode toggler should have been using input type="radio", since it is a selection of color mode right, radio buttons are intended for those. Along with fieldset and legend to describe what the group of radio button does.
  • The input lacks label on it to describe what it does, or you could make use of aria-label on it.
  • The circle image on the left side of the input needs to have alt="" and aria-hidden="true" since it is just decoration. Also the img used on the todo item toggle.
  • Avoid using height: 100vh on an element, because this will only use the remaining viewport's height. Inspect your layout in dev tools at the bottom, you will notice that if you hover on the body tag, it does not capture the whole layout. Instead, use min-height: 100vh on it, this takes full viewports height and will expand if it needs to.
  • Each todo item should have been using li element since those are "list" of todo items.
  • The toggle on the left side of the todo item should have been using input type="checkbox" since that is a checkbox if a user have completed it. The text on the right side of it should have been using label, which is connected to the input on the left side. Using button alone will not give any extra information to the user about what will happen if they toggle it.
  • The button for the remove todo item should have aria-label="remove todo item {name of the todo item}", this way user would know what this button does, the img inside as well should have been using alt="".
  • Those selection below should have been inside a ul element ,since those are "list " of selections or you could have used input type="radio" on those since like I said, they are selections. Using p tag alone is not really accessible, if an component is interactive, use interactive element on them.
  • The clear completed button should have an extra aria-live element, to which will say that the completed todo items have been removed. Also, use button on it, not p tag.

  Aside from those, great job on this still.

  Marked as helpful

  0
• 

  nageeb0•5

  @nageeb0Posted about 3 years ago

  Good

  0
• 

  nageeb0•5

  @nageeb0Posted about 3 years ago

  Good Work

  0