{"id":21307422,"url":"https://github.com/jdegand/todo-challenge","last_synced_at":"2026-04-16T12:02:40.955Z","repository":{"id":110668894,"uuid":"490413883","full_name":"jdegand/todo-challenge","owner":"jdegand","description":"Devchallenges - Legacy - Frontend-Developer - Todo Challenge","archived":false,"fork":false,"pushed_at":"2024-10-06T03:00:28.000Z","size":363,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T19:49:11.035Z","etag":null,"topics":["devchallenges","devchallenges-legacy","react"],"latest_commit_sha":null,"homepage":"https://jdegand.github.io/todo-challenge/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-05-09T19:14:19.000Z","updated_at":"2024-10-06T03:00:32.000Z","dependencies_parsed_at":"2023-07-17T05:48:47.033Z","dependency_job_id":null,"html_url":"https://github.com/jdegand/todo-challenge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/todo-challenge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftodo-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftodo-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftodo-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftodo-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/todo-challenge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Ftodo-challenge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31884929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T11:36:10.202Z","status":"ssl_error","status_checked_at":"2026-04-16T11:36:09.652Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["devchallenges","devchallenges-legacy","react"],"created_at":"2024-11-21T16:31:55.454Z","updated_at":"2026-04-16T12:02:40.938Z","avatar_url":"https://github.com/jdegand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eTodo Challenge\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution for a challenge from  \u003ca href=\"http://devchallenges.io\" target=\"_blank\"\u003eDevchallenges.io\u003c/a\u003e.\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://jdegand.github.io/todo-challenge\"\u003e\n      Live Link\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://web.archive.org/web/20240417035011/https://legacy.devchallenges.io/challenges/hH6PbOHBdPm6otzw2De5\"\u003e\n      Challenge\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Overview](#overview)\n  - [Built With](#built-with)\n- [Features](#features)\n- [Thoughts](#thoughts)\n- [Useful Resources](#useful-resources)\n\n## Overview\n\n![Initial](screenshots/todo-challenge-desktop-initial-load.png) \n\n***\n\n![Added Todos](screenshots/todo-challenge-desktop-added-todos.png) \n\n***\n\n![Deleted Todos](screenshots/todo-challenge-desktop-delete.png) \n\n***\n\n### Built With\n\n- [React](https://reactjs.org/)\n- [Material Design Icons](https://materialdesignicons.com/)\n\n## Features\n\nThis application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://web.archive.org/web/20240417035011/https://legacy.devchallenges.io/challenges/hH6PbOHBdPm6otzw2De5) 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.\n\n## Thoughts \n\n- `useId` cannot be used inside a callback.  \n- Using `innerText` to get the value of the filter is not preferable to using a name property on each button  \n- Checkbox functionality \u0026 filtering causes many headaches. Simple solution is to limit checking only when on 'all' filter. \n- Don't want to remove checkboxes or disable them. \n- Working around blocked local storage is not easy.\n- focusing the all filter prevents focusing of the input field. \n- 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](https://stackoverflow.com/questions/66110028/how-to-test-button-that-call-submit-form-using-jest-and-react-testing-library)) so you have to test the result of the submit event (is it in the document, etc).\n- Testing when something is conditionally rendered is something I need to look into.\n- Testing is made easier by setting initial todos to be two todos (one completed and one active) versus having both active like DevChallenges screenshot.\n- Writing tests would be easier if the app was segmented into smaller components.  \n- Could convert checkboxes into accessible style buttons like I have done before.\n\n## Useful Resources\n\n- [Steps to replicate a design with only HTML and CSS](https://devchallenges-blogs.web.app/how-to-replicate-design/)\n- [Css Reset](https://piccalil.li/blog/a-modern-css-reset/) - use this css reset as starting point almost every project\n- [Stack Overflow](https://stackoverflow.com/questions/59269676/change-the-value-of-object-in-an-array-on-click-event) - change value of object in array onClick\n- [Stack Overflow](https://stackoverflow.com/questions/66836514/how-to-change-values-in-array-of-objects-with-an-onclick) - change value of object in array onClick\n- [Stack Overflow](https://stackoverflow.com/questions/35206125/how-can-i-find-and-update-values-in-an-array-of-objects/61304412#61304412) - update objects inside arrays\n- [Blog](https://bobbyhadz.com/blog/javascript-update-property-of-object-in-array) - update properties of objects in arrays\n- [React Docs](https://beta.reactjs.org/learn/updating-arrays-in-state) - updating arrays in state\n- [Blog](https://felixgerschau.com/react-localstorage/) - local storage\n- [Blog](https://felixgerschau.com/unit-testing-react-introduction/) - unit testing react\n- [Stack Overflow](https://stackoverflow.com/questions/4689856/how-to-change-value-of-object-which-is-inside-an-array-using-javascript-or-jquer) - is map really the best way to update an object in an array?\n- [Stack Overflow](https://stackoverflow.com/questions/59653951/how-do-i-output-the-filtered-todo-list-in-react-typescript) - filtered todolist\n- [YouTube](https://www.youtube.com/watch?v=f39VThCJJZ8) - filtering todos\n- [Stack Overflow](https://stackoverflow.com/questions/4649423/should-switch-statements-always-contain-a-default-clause) - switch always need a default case\n- [Blog](https://blog.maisie.ink/react-ref-autofocus/) - autoFocus\n- [Stack Overflow](https://stackoverflow.com/questions/60688411/assign-local-storage-to-react-state-react-hooks) - local storage \u0026 hooks\n- [Go Make Things](https://gomakethings.com/how-to-update-localstorage-with-vanilla-javascript/) - update local storage vanilla js\n- [Github](https://github.com/thapatechnical/reacttodo) - todo I looked at that gave me some ideas to fix my local storage problems\n- [Blog](https://amourycodes.com/guides/a-simple-guide-to-getting-started-with-testing-your-react-components/71d7043798df4b9187730676ca6c4103) - testing react components\n- [React Testing Library](https://testing-library.com/docs/queries/about/#queries) - queries\n- [Stack Overflow](https://stackoverflow.com/questions/66110028/how-to-test-button-that-call-submit-form-using-jest-and-react-testing-library) - test submit with jest and rtl\n- [Stack Overflow](https://stackoverflow.com/questions/55177928/how-do-you-check-a-checkbox-in-react-testing-library) - checkbox testing rtl\n- [YouTube](https://www.youtube.com/watch?v=J5kGK2hn7Hw) - checkbox test scenarios\n- [Clue Mediator](https://www.cluemediator.com/check-a-checkbox-using-react-testing-library#watc) - testing a checkbox\n- [Stack Overflow](https://stackoverflow.com/questions/58623666/how-to-test-if-a-component-is-rendered-with-the-right-props-when-using-react-tes) - testing props\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Ftodo-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Ftodo-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Ftodo-challenge/lists"}