Todo Challenge

Solution for a challenge from Devchallenges.io.

Live Link | Challenge

Table of Contents

• Overview
  • Built With
• Features
• Thoughts
• Useful Resources

Overview

---

---

---

Built With

• React
• Material Design Icons

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories. Note: The previous design document may be incomplete, as you need to find an archived version of the challenge as all legacy challenges have had their documentation removed from DevChallenges.

Thoughts

• useId cannot be used inside a callback.
• Using innerText to get the value of the filter is not preferable to using a name property on each button
• Checkbox functionality & filtering causes many headaches. Simple solution is to limit checking only when on 'all' filter.
• Don't want to remove checkboxes or disable them.
• Working around blocked local storage is not easy.
• focusing the all filter prevents focusing of the input field.
• I am working on improving my testing skills. I had a few issues with testing the submit event. It can't be directly mocked (Stack Overflow) so you have to test the result of the submit event (is it in the document, etc).
• Testing when something is conditionally rendered is something I need to look into.
• Testing is made easier by setting initial todos to be two todos (one completed and one active) versus having both active like DevChallenges screenshot.
• Writing tests would be easier if the app was segmented into smaller components.
• Could convert checkboxes into accessible style buttons like I have done before.

Useful Resources

• Steps to replicate a design with only HTML and CSS
• Css Reset - use this css reset as starting point almost every project
• Stack Overflow - change value of object in array onClick
• Stack Overflow - change value of object in array onClick
• Stack Overflow - update objects inside arrays
• Blog - update properties of objects in arrays
• React Docs - updating arrays in state
• Blog - local storage
• Blog - unit testing react
• Stack Overflow - is map really the best way to update an object in an array?
• Stack Overflow - filtered todolist
• YouTube - filtering todos
• Stack Overflow - switch always need a default case
• Blog - autoFocus
• Stack Overflow - local storage & hooks
• Go Make Things - update local storage vanilla js
• Github - todo I looked at that gave me some ideas to fix my local storage problems
• Blog - testing react components
• React Testing Library - queries
• Stack Overflow - test submit with jest and rtl
• Stack Overflow - checkbox testing rtl
• YouTube - checkbox test scenarios
• Clue Mediator - testing a checkbox
• Stack Overflow - testing props