React Interview Challenge #2: Create a ToDo Component

This example challenge is something you could expect if you are applying for frontend engineer positions.

You are tasked with creating a todo component and given a list of functional requirements. Give this a go on your own and if you get stuck reference my example demo and code. Links at bottom of post. To simulate an actual interview situation, set yourself a timer for 45 minutes and practice explaining your thought process out loud as you go.

Instructions

• Create a todo component
• Component should accept an initial list of todos
• Add an input and button to add new todos to the list
• When a todo is clicked it should update its status (complete/incomplete)
  • Completed todos should have a strike through text style and should display a checkmark icon
  • Uncompleted todos should display a hollow circle icon
• Todos should have a delete button that allows the user to remove the todo
• Extra credit:
  • Add tabs to the top of the todo list to allow users to toggle between all todos, completed todos and incomplete todos
  • Add a section to display the number of completed todos out of the total number of todos
  • When all todos are completed update the section to display a success message
  • Support both light and dark mode styles

Here are icons to use for the component:

Checkmark Icon:

Unchecked Icon:

Trashcan Icon:

Live Demo
Code