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.
- 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: