in ,

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:


    

Enter fullscreen mode

Exit fullscreen mode

Unchecked Icon:


    

Enter fullscreen mode

Exit fullscreen mode

Trashcan Icon:


    

Enter fullscreen mode

Exit fullscreen mode

Live Demo
Code

What do you think?

Silver 1

Written by yulica

Leave a Reply

Your email address will not be published.

      Open Source Adventures: Episode 59: What Opal Ruby is not

      Learn GIT – degit_628ab9eec7ce1.jpeg

      Learn GIT – degit