{"id":19398465,"url":"https://github.com/sidp919/todolist-angularapp","last_synced_at":"2026-04-15T19:39:27.961Z","repository":{"id":44345152,"uuid":"443351256","full_name":"SidP919/ToDoList-AngularApp","owner":"SidP919","description":"A TODO List web application for keeping track of tasks. Use it here- sidp919.github.io/todolist-angularapp/ Used Technologies: HTML, CSS, Bootstrap, JavaScript, TypeScript, Angular","archived":false,"fork":false,"pushed_at":"2022-01-02T11:00:35.000Z","size":399,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T23:33:36.462Z","etag":null,"topics":["angular","bootstrap","bootstrap-validation","css3","html5","javascript","to-do-list-app","typescript"],"latest_commit_sha":null,"homepage":"https://sidp919.github.io/ToDoList-AngularApp/","language":"TypeScript","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/SidP919.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}},"created_at":"2021-12-31T13:26:23.000Z","updated_at":"2022-07-10T11:08:18.000Z","dependencies_parsed_at":"2022-08-29T17:52:07.442Z","dependency_job_id":null,"html_url":"https://github.com/SidP919/ToDoList-AngularApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SidP919/ToDoList-AngularApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SidP919%2FToDoList-AngularApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SidP919%2FToDoList-AngularApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SidP919%2FToDoList-AngularApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SidP919%2FToDoList-AngularApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SidP919","download_url":"https://codeload.github.com/SidP919/ToDoList-AngularApp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SidP919%2FToDoList-AngularApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31857616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: 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":["angular","bootstrap","bootstrap-validation","css3","html5","javascript","to-do-list-app","typescript"],"created_at":"2024-11-10T11:06:10.115Z","updated_at":"2026-04-15T19:39:27.931Z","avatar_url":"https://github.com/SidP919.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ToDoList\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.1.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Production server\n\nAccess this web application in action at https://sidp919.github.io/ToDoList-AngularApp/\n\n#\n\n# Application Development notes:\n\nFollow below steps to create this application on your own:\n\n## PRE-REQUISITES:-\n\nEnsure node.js and npm is already install and available in current directory.\n\nconfirm it using: \n\nFor Node.js : \n    \n    node --version\n\nFor npm : \n    \n    npm --version\n\n\nBelow NPM Packages are also required to be downloaded and setup prior to start making further changes on this application:\n\n\n1\u003e Download and install Angular with below command:\n    \n    npm install -g @angular/cli\n\n\n1\u003e Bootstrap :\n    \n    a\u003e run command: npm install bootstrap\n    \n    b\u003e Now, go to angular.json file inside application's root folder( ex. to_do_list folder)\n\n    c\u003e In angular.json file, find object \"architect\" then traverse inside it and find \"styles\" and \"scripts\" array.\n\n    d\u003e In styles array add this string: \"./node_modules/bootstrap/dist/css/bootstrap.min.css\"\n\n    e\u003e And in scripts array add this string: \"./node_modules/bootstrap/dist/js/bootstrap.js\"\n\n    f\u003e for reference, check https://github.com/SidP919/Web-Development/tree/master/Angular/to_do_list/angular.json file \n\n\n2\u003e jQuery :\n    \n    a\u003e run command: npm install jquery\n\n    b\u003e Now, go to angular.json file inside application's root folder( ex. to_do_list folder)\n\n    c\u003e In angular.json file, find object \"architect\" then traverse inside it and find \"scripts\" array.\n\n    d\u003e In scripts array, add this string: \"./node_modules/jquery/dist/jquery.js\"\n\n    e\u003e for reference, check https://github.com/SidP919/Web-Development/tree/master/Angular/to_do_list/angular.json file\n\n\n3\u003e Now, go to a folder in File Explorer where you want to create Angular project and press Shift + mouseRightClick, then click on \"Open Powershell window here\"\n\n\n4\u003e In powershell window, run below commands in sequence:\n\n    ng new to_do_list\n\n    cd to_do_list\n\n    ng serve\n\n\n5\u003e Open browser and go to: http://localhost:4200/\n\n\n#\n\n## Steps to create this application:\n\n1\u003e Now, we can make some changes in our app component. \n\nGo to app.component.html file and make starting changes similar to what we done here in this commit: https://github.com/SidP919/Web-Development/commit/49823d1b65aa791e2dc8f8676a1cc56162c42f4f\n\nSo, Now we have got a Header, Footer and a Main section for our to-do-list app. \n\nNow, we will work on our Main section and add all the to-do-list functionality in this main section. \n\nFor this we will create new components under subComponents folder using below command:\n\n    ng generate component subComponents/{component-name}\n\nor \n\n    ng g c subComponents/{component-name}\n\nFor ex: ng g c subcomponents/to-do-list         //This to-do-list component will contain our list of todos.\n\nAfter creating to-do-list component with above command, see the files that got created and changes happened in this commit: https://github.com/SidP919/Web-Development/commit/082a7f5d44d660531c5f8d37d15fde4ea45599a2\n\n\n#\n\n\n2\u003e Now, we will work on to-do-list component and make below changes:\n    \n    1\u003e Create models/Todo.ts\n    \n    2\u003e Make changes in to-do-list.component.ts\n    \n    3\u003e Then make changes in to-do-list.component.html\n    \n    4\u003e Now, run app at localhost:4200 to test your changes\n\nYou can get the detailed changes by checking this commit: https://github.com/SidP919/Web-Development/commit/d0a445756ad87e330bd946ead2d503a5fc28af66\n\nAfter this commit, app looks like below:\n\n![at_4th_commit](https://github.com/SidP919/Web-Development/blob/master/Angular/to_do_list/src/assets/images/app_screenshots/at_4th_commit.png)\n\n\n#\n\n\n3\u003e Now, we will create new component to-do-item to display individual item from to-do-list, and to create it we will use below command:\n\n    ng g c subComponents/to-do-item\n\nNow, make below changes in to-do-item component and other components:\n\n    1\u003e Go to app.component.html and make the app icon and title showup at the center of the navbar\n\n    2\u003e make changes in to-do-list.component.ts to make value of desc in array larger in length.\n\n    3\u003e make changes in to-do-list.component.html to use bootstrap Grid classes and send each todo to to-do-item.component.ts\n\n    4\u003e make changes in to-do-item.component.ts file to recieve todo from to-do-list.component.html\n\n    5\u003e make changes in to-do-item.component.html to render each toDoItem\n\nYou can get the detailed changes by checking this commit: https://github.com/SidP919/Web-Development/commit/1e21899b776c5037453533c19646d03a0ea5c024\n\n\nAfter this commit, app looks like below:\n\n![at_5th_commit](https://github.com/SidP919/Web-Development/blob/master/Angular/to_do_list/src/assets/images/app_screenshots/at_5th_commit.png)\n\n\n#\n\n\n4\u003e Now, we will add functionality to our delete button and make below changes:\n\n    1\u003e First, make our UI even better than before by making changes same as in this commit: https://github.com/SidP919/Web-Development/commit/46d9b93dd651775038a5b4860c8bf186c8cce615\n\n    2\u003e Now, make changes in to-do-item.component.html and make delete button image trigger event and send clicked toDoItem to onDelete() function in to-do-item.component.ts\n\n    3\u003e Now, make changes in to-do-item.component.ts, and make onDelete() funciton emit the clicked toDoItem to to-do-list component\n\n    4\u003e Now, make changes in to-do-list.component.html to receive toDoItem and send it to deleteTodo() function in to-do-list.component.ts filel.\n\n    5\u003e Now, make changes in to-do-list.component.ts file and make deleteTodo() function delete the passed todo from todosArr array.\n\nYou can get the detailed changes by checking this commit: https://github.com/SidP919/Web-Development/commit/426f00dee6b3f32a2915de9e62710daf60858d61\n\n\nAfter this 6th commit, app looks almost same as before but now we are able to delete the TODOs from our list of TODOs.\n\n\n#\n\n\n5\u003e Now, we create new component to add a TODO item to the list and make below changes:\n\n    1\u003e Create new component add-to-do-item component using command:\n\n        ng g c subComponents/add-to-do-item\n    \n    2\u003e Now, first make changes in add-to-do-item.component.html \n        \n        so that it takes new task details from user and sends it to add-to-do-item.component.ts\n\n    3\u003e Now, make changes in add-to-do-item.component.ts and emit the new todo to to-do-list.component.html\n    \n    4\u003e Now, make changes in to-do-list.component.html \n        \n        so that add-to-do-item component shows up on it \n    \n        and it also send the received todo to to-do-list.component.ts file.\n\n    5\u003e Now, in to-do-list.component.ts file, make changes to add the new todo to todosArr array.\n\nYou can get the detailed changes by checking this 7th major commit: https://github.com/SidP919/Web-Development/commit/d562f576e0293c79562bb767ec438f2057cb8ac4\n\n\nAfter this commit, app looks like below:\n\n![at_7th_commit](https://github.com/SidP919/Web-Development/blob/master/Angular/to_do_list/src/assets/images/app_screenshots/at_7th_commit.png)\n\n\n#\n\n\n6\u003e Now, we will also add Form validation to our Add-To-Do form in add-to-do-item component:\n\nFor this, we will make changes in add-to-do-item.component.html and add-to-do-item.component.ts file,\n\nYou can get the detailed changes by checking this 8th major commit: https://github.com/SidP919/Web-Development/commit/10bdb380812e2434f691ec4c3ab5cccf7a5d9934\n\nAfter this commit, app looks like below:\n\n![at_8th_commit](https://github.com/SidP919/Web-Development/blob/master/Angular/to_do_list/src/assets/images/app_screenshots/at_8th_commit.png)\n\n\n#\n\n\n7\u003e Now, we will make changes in to-do-list.component.html and to-do-list.component.ts,\n\n    1\u003e Make changes in to-do-list.component.html, use ngIf to render UI Elements based on conditions.\n\n    2\u003e Make changes in to-do-list.component.ts, use localStorage to persist data during a session.\n\nYou can get the detailed changes by checking this commit: https://github.com/SidP919/Web-Development/commit/7d92f6cfea3eedc0d241607f147f348509251309\n\nAfter this 9th commit, app looks almost same as before but now we don't have any dummy TODOs,\nour todosArr list is empty at start, now when we add new TODOs, even if we refresh the page,\nthose TODOs don't vanish as now we are able to save the TODO List in localStorage.\n\n\n#\n\n8\u003e Now, we will add functionality to mark a TODO as completed, for this make changes in below files:\n\n    1\u003e to-do-item.component.html\n\n    2\u003e to-do-item.component.ts\n\n    3\u003e to-do-list.component.html\n\n    4\u003e to-do-list.component.ts\n\nYou can get the detailed changes by checking this 10th major commit: https://github.com/SidP919/Web-Development/commit/bc55d60ca734f7aa519f418a5a52a29374084b3b#diff-c9fe3e5e31dfa7babdc364b9ae6ce5da0b19488421d4676e2527afa622e4341f\n\nAfter this commit, app looks like below:\n\n![at_10th_commit](https://github.com/SidP919/Web-Development/blob/master/Angular/to_do_list/src/assets/images/app_screenshots/at_10th_commit.png)\n\n\n#\n\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n#\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidp919%2Ftodolist-angularapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsidp919%2Ftodolist-angularapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidp919%2Ftodolist-angularapp/lists"}