{"id":19598548,"url":"https://github.com/kaplanh/to-do-app","last_synced_at":"2025-10-08T12:29:12.502Z","repository":{"id":153794067,"uuid":"501249095","full_name":"kaplanh/To-Do-App","owner":"kaplanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-02T18:27:59.000Z","size":45,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-09T07:47:52.181Z","etag":null,"topics":["before-after","dom-manipulation","html-css-javascript","traversal-methods"],"latest_commit_sha":null,"homepage":"https://kaplanh.github.io/To-Do-App/","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/kaplanh.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,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-06-08T12:51:11.000Z","updated_at":"2024-02-02T18:31:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"b809c076-fc19-4369-9686-4b9832ac2744","html_url":"https://github.com/kaplanh/To-Do-App","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTo-Do-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTo-Do-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTo-Do-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTo-Do-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaplanh","download_url":"https://codeload.github.com/kaplanh/To-Do-App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240876855,"owners_count":19871903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["before-after","dom-manipulation","html-css-javascript","traversal-methods"],"created_at":"2024-11-11T09:06:37.869Z","updated_at":"2025-10-08T12:29:07.460Z","avatar_url":"https://github.com/kaplanh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# To-Do-App\n\n![todo app](https://github.com/kaplanh/To-Do-App/assets/101884444/79ab9c46-9e64-437f-a3b8-89ed31afab80)\n\n[Live link](https://kaplanh.github.io/To-Do-App/)\n## Description\n\nThe project aims to create a Todo App using JS and Css.\n\n## Problem Statement\n\n- Your company has recently started on a project that aims to create a Todo App. So you and your colleagues have started to work on the project.\n\n## Project Skeleton \n\n```\nTodo App (folder)\n|\n|----readme.md                        \n|----index.html\n|----style.css\n|----app.js\n|----withCreateElement.js \n``` \n\n\n### At the end of the project, the following topics are to be covered;\n\n- HTML\n  - font-awesome\n    ~~~css\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css\"\n      integrity=\"sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\"\n    /\u003e\n    ~~~\n  - [html entities](https://www.w3schools.com/charsets/ref_html_entities_4.asp)\n    ~~~css\n    \u0026plus;\n    \u0026copy;\n    \n    ~~~ \n  \n- CSS\n  - [google fonts](\"https://fonts.googleapis.com/css2?family=Rajdhani:wght@500\u0026display=swap\")\n   ~~~\n   @import url(\"https://fonts.googleapis.com/css2?family=Rajdhani:wght@500\u0026display=swap\");\n   ~~~ \n  - @media query\n\n  \n\n  \n- JS\n  - DOM Manipulations\n    - innerHTML\n    - innerText\n    - textContent\n     \n  - DOM Selectors\n  - querySelector\n  - querySelectorAll\n  - const productList = document.querySelector(\"div.main__product-painel\"); //?basina div yazarak belirtirsek performans acisindan daha hizli olur\n  -  Date() object [^1]\n    [^1]: id: new Date().getTime(), //Date.now() anlik zamani alip unique id yapmak icin\n    \n  - Events\n    - click\n    - load\n    - keydown\n  \n    ```\n        todoInput.addEventListener(\"keydown\", (e) =\u003e {\n    if (e.key === \"Enter\") {\n        btn.click();\n    }\n    })\n    ```\n  - Capturing \u0026 Bubbling\n  - DOM Traversing\n    - nextElementSibling\n    - nextElementSibling\n    - e.target.closest(\".main__product-info\")\n    - if (e.target.classList.contains(\"fa-plus\"))\n    - e.target.previousElementSibling.innerText++;\n    - firstElementChild\n    - children\n    - prepend [^2]\n      [^2]:li.prepend(iCheck);\n    - appendChild [^3]\n      [^3]:span.appendChild(content);\n   \n  - localStorage \n    ```\n     - localStorage.setItem(\"tasks\", JSON.stringify(tasks));\n \n     - tasks = JSON.parse(localStorage.getItem(\"tasks\")) || [];\n     \n    ```\n \n \n \n  \n  - Array Methods\n  - filter()\n     ```\n\n    tasks = tasks.filter((task) =\u003e task.id != id);\n    }\n  \n    ```\n  \n\n  \n  - if else - if - else  conditions\n\n\n### At the end of the project, developers will be able to;\n\n- improve coding skills within HTML, CSS and JS \n\n- use git commands (push, pull, commit, add etc.) and Github as a Version Control System.\n\n\n## Notes\n\n- You can use HTML, CSS and JS to complete this project.\n\n\n\n\u003cp align=\"center\"\u003e ⌛\u003cstrong\u003e Happy Coding \u003c/strong\u003e ✍ \u003c/p\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Fto-do-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaplanh%2Fto-do-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Fto-do-app/lists"}