{"id":23630896,"url":"https://github.com/baltasargd/to-do-list","last_synced_at":"2026-04-06T09:32:20.065Z","repository":{"id":268938545,"uuid":"905918662","full_name":"BALTASARGD/To-Do-List","owner":"BALTASARGD","description":"Este código implementa una lista de tareas interactivas en un navegador web usando JavaScript.","archived":false,"fork":false,"pushed_at":"2025-04-15T15:19:06.000Z","size":108,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-20T04:35:50.433Z","etag":null,"topics":["bun","css3","html","javascript","typescript"],"latest_commit_sha":null,"homepage":"https://to-do-list-mauve-eta.vercel.app","language":"CSS","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/BALTASARGD.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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-19T19:36:36.000Z","updated_at":"2025-04-15T15:19:10.000Z","dependencies_parsed_at":"2025-04-01T08:22:21.221Z","dependency_job_id":"e2bcf04e-ddb1-4b82-a1ca-30121f17d74d","html_url":"https://github.com/BALTASARGD/To-Do-List","commit_stats":null,"previous_names":["baltasargd/to-do-list"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BALTASARGD/To-Do-List","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BALTASARGD%2FTo-Do-List","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BALTASARGD%2FTo-Do-List/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BALTASARGD%2FTo-Do-List/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BALTASARGD%2FTo-Do-List/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BALTASARGD","download_url":"https://codeload.github.com/BALTASARGD/To-Do-List/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BALTASARGD%2FTo-Do-List/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31466612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T08:36:52.050Z","status":"ssl_error","status_checked_at":"2026-04-06T08:36:51.267Z","response_time":112,"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":["bun","css3","html","javascript","typescript"],"created_at":"2024-12-28T02:47:35.619Z","updated_at":"2026-04-06T09:32:20.039Z","avatar_url":"https://github.com/BALTASARGD.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Task List with JavaScript\n\nThis code implements an interactive task list in a web browser using JavaScript. Below is a step-by-step breakdown:\n\n## General Structure\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n```\nThis code runs when the HTML document has finished loading (the `DOMContentLoaded` event). Within this event, it is guaranteed that the DOM elements are available for manipulation.\n\n## Initial Variables\n\n```javascript\nconst inputBox = document.getElementById(\"input-box\") as HTMLInputElement | null;\nconst listContainer = document.getElementById(\"list-container\") as HTMLUListElement | null;\n```\n- **`inputBox`**: Refers to the HTML input element where the user writes the task. If it does not exist, it will be `null`.\n- **`listContainer`**: Refers to the container where tasks will be added as `\u003cli\u003e` elements.\n\nBoth elements are typed with `as` to define their types (`HTMLInputElement` and `HTMLUListElement`), ensuring type safety.\n\n## Event to Detect \"Enter\"\n\n```javascript\ninputBox.addEventListener(\"keypress\", function (e: KeyboardEvent): void {\n    if (e.key === \"Enter\") {\n        addTask();\n    }\n});\n```\n- `inputBox.addEventListener`: Listens for the `keypress` event on the text box.\n- `e.key === \"Enter\"`: If the user presses the \"Enter\" key, the `addTask()` function is called to add a task.\n\n## `addTask` Function\n\nThis function is responsible for adding a new task to the list.\n\n### Initial Checks\n\n```javascript\nif (!inputBox || !listContainer) return;\n```\nIf the elements are not available (`null`), the function terminates to avoid errors.\n\n### Input Validation\n\n```javascript\nif (inputBox.value.trim() === \"\") {\n    alert(\"You must write something!\");\n}\n```\nIf the input value is empty (or only contains spaces), an alert message is displayed.\n\n### Task Creation\n\n```javascript\nconst li = document.createElement(\"li\");\nli.textContent = inputBox.value;\nlistContainer.appendChild(li);\n```\n- A `\u003cli\u003e` element is created to contain the task text.\n- It is added to the `listContainer`.\n\n### Delete Button\n\n```javascript\nconst span = document.createElement(\"span\");\nspan.textContent = \"\\u00d7\"; // Unicode for \"×\"\nli.appendChild(span);\n```\n- A `\u003cspan\u003e` element is created to act as a delete button.\n- It is added to the `\u003cli\u003e` element.\n\n### Input Cleanup and Saving\n\n```javascript\ninputBox.value = \"\";\nsaveData();\n```\n- The input is cleared to allow the user to write another task.\n- `saveData()` is called to save the list in `localStorage`.\n\n## Event to Complete or Delete Tasks\n\n```javascript\nlistContainer.addEventListener(\"click\", function (e: MouseEvent): void {\n    const target = e.target as HTMLElement;\n\n    if (target.tagName === \"LI\") {\n        target.classList.toggle(\"checked\");\n        saveData();\n    } else if (target.tagName === \"SPAN\") {\n        target.parentElement?.remove();\n        saveData();\n    }\n});\n```\n\n### Detect Clicked Element\n\n```javascript\nconst target = e.target as HTMLElement;\n```\nThe `click` event detects which element was clicked (`target`).\n\n### Mark as Completed\n\n```javascript\nif (target.tagName === \"LI\") {\n    target.classList.toggle(\"checked\");\n    saveData();\n}\n```\n- If the user clicks on a task (`LI`), it toggles the `checked` class to mark it as completed or uncompleted.\n- Then saves the changes in `localStorage`.\n\n### Delete Task\n\n```javascript\nelse if (target.tagName === \"SPAN\") {\n    target.parentElement?.remove();\n    saveData();\n}\n```\n- If the click was on the delete button (`SPAN`), it removes the parent element (`LI`).\n- Saves the changes in `localStorage`.\n\n## `saveData` Function\n\n```javascript\nfunction saveData(): void {\n    if (!listContainer) return;\n    localStorage.setItem(\"data\", listContainer.innerHTML);\n}\n```\n- **Objective**: Save the content of `listContainer` (the tasks) in the browser's local storage (`localStorage`).\n- `localStorage.setItem`: Stores the `innerHTML` property of the container under the key \"data\", which includes both the tasks and their buttons.\n\n## `showTask` Function\n\n```javascript\nfunction showTask(): void {\n    if (!listContainer) return;\n    listContainer.innerHTML = localStorage.getItem(\"data\") || \"\";\n}\n```\n- **Objective**: Restore the tasks from `localStorage` when reloading the page.\n- `localStorage.getItem`: Retrieves the data stored under the key \"data\". If there is no data, it uses an empty string as the default value.\n\n### Invocation of `showTask`\n\n```javascript\nshowTask();\n```\nWhen the page loads, `showTask()` is called to display the previously saved tasks.\n\n## Complete Flow Summary\n\n1. When the page loads, `showTask()` retrieves and displays the saved tasks.\n2. The user can add tasks by pressing \"Enter\", which creates a new `\u003cli\u003e` element with a delete button.\n3. The user can:\n     - Click on a task to mark it as completed (toggle `checked` class).\n     - Click on the delete button to remove the task.\n4. Each change (add, complete, delete) is saved in `localStorage` via `saveData()`.\n\nThis ensures that the task list is persistent even when the page is reloaded.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaltasargd%2Fto-do-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaltasargd%2Fto-do-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaltasargd%2Fto-do-list/lists"}