{"id":23407614,"url":"https://github.com/mujeebdev3/To-do-list","last_synced_at":"2025-08-24T21:32:32.852Z","repository":{"id":169514768,"uuid":"592913488","full_name":"Innocent6303/To-do-list","owner":"Innocent6303","description":"🚀 To-Do List App - A simple yet stylish To-Do List built with HTML, CSS, and JavaScript. Perfect for beginners to practice essential web development skills such as DOM manipulation, localStorage, and building responsive UIs.","archived":false,"fork":false,"pushed_at":"2024-12-01T00:43:56.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-01T01:23:18.244Z","etag":null,"topics":["codingforbeginners","css","dom-manipulation","frontenddevelopment","html","html5","javascript","javascriptforbeginners","localstorage","responsive-web-design","todolist","webdevelopment"],"latest_commit_sha":null,"homepage":"","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/Innocent6303.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}},"created_at":"2023-01-24T20:00:50.000Z","updated_at":"2024-12-01T00:43:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"bebd2383-9007-4b9c-b890-64ee8424f44c","html_url":"https://github.com/Innocent6303/To-do-list","commit_stats":null,"previous_names":["innocent6303/to-do-list"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innocent6303%2FTo-do-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innocent6303%2FTo-do-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innocent6303%2FTo-do-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innocent6303%2FTo-do-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Innocent6303","download_url":"https://codeload.github.com/Innocent6303/To-do-list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230841411,"owners_count":18288478,"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":["codingforbeginners","css","dom-manipulation","frontenddevelopment","html","html5","javascript","javascriptforbeginners","localstorage","responsive-web-design","todolist","webdevelopment"],"created_at":"2024-12-22T14:29:05.381Z","updated_at":"2025-08-24T21:32:32.543Z","avatar_url":"https://github.com/Innocent6303.png","language":"CSS","readme":"# 📝 To-Do List Application  \n\nWelcome to the **To-Do List Application** repository! This project is a simple yet stylish to-do list created using **HTML**, **CSS**, and **JavaScript**. It’s perfect for beginners to learn about web development concepts like **DOM manipulation**, **localStorage**, and responsive design.  \n\n---\n\n## 🌟 Features  \n- **Add New Tasks:** Easily add tasks to your to-do list using the input field.  \n- **Mark as Done:** Complete tasks by clicking the \"done\" button, which removes them from the list.  \n- **Persistent Storage:** Your tasks are saved in your browser's `localStorage`, so you won’t lose them after refreshing the page.  \n- **Responsive Design:** Works seamlessly on different devices and screen sizes.  \n\n---\n\n## 🚀 Getting Started  \n\nFollow these steps to run the project:  \n\n### 1️⃣ Clone the Repository  \n```bash\ngit clone https://github.com/Innocent6303/To-do-list.git\n```\n#\n\n2️⃣ Open the Project\n  \n  *  Navigate to the project folder.\n    \n  *  Open the `index.html` file in your favorite browser OR:\n    \n  *  Install the Live Server extension in Visual Studio Code.\n    \n  *  Right-click on the `index.html` file and select `Open with Live Server`.\n    \n---\n\n## 📋 User Interface\n\nWhen you open the project, you’ll see:\n\n1. **Header:**  \n   A title, *\"To-Do List\"* .  \n\n2. **Input Field:**  \n   - A blank input box with the placeholder `New Task`.  \n   - An **Add** button to add tasks.  \n\n3. **Task List:**  \n   - Newly added tasks appear at the top of the list.  \n   - Each task has a **done** button to remove it once completed.  \n  \n          \n        \n## 🎮 How It Works\nAdding a Task:\n\n  1. Type a task into the input field.\n  2. Click the Add button or press `Enter`.\n  3. The task is displayed in the list at the top.\n\nCompleting a Task:\n\n  1. Click the done button next to a task.\n  2. The task is removed from the list\n--\n## 🔍 Key Concepts Demonstrated\n\nThis project is an excellent way to learn the following:\n\n1.DOM Manipulation:\n\n  * Dynamically adding, removing, and updating elements on the page using JavaScript.\n    \n    Example:\n\n    ```js\n    var todoElement = document.createElement(\"li\");\n    var todoText = document.createTextNode(todo);\n    todoElement.appendChild(todoText);\n    listElement.appendChild(todoElement);\n    ```\n2. Event Handling:  \n  * Adding event listeners to buttons for user interactions.  \n  Example:\n  ```js\n  buttonElement.onclick = addTodo;\n  ```\n\n\n3. Local Storage:\n  * Saving tasks in the browser’s `localStorage` to maintain data persistence.  \n  Example:\n  ```js\n  localStorage.setItem(\"list_todos\", JSON.stringify(todos));\n  ```\n  \n4. Responsive and Functional Design:\n  * Designing a UI that works across devices with minimal styling and optimal functionality\n\n## 📂 Folder Structure\n\n```js\nTo-do-list/\n│\n├── index.html      # Main HTML file\n├── styles.css      # Styling for the application\n├── script.js       # JavaScript for functionality\n└── README.md       # Documentation\n```\n---\n\n## 🎨 Screenshots  \n### 1️⃣ Initial Interface\n\n![Screenshot 2024-12-01 054726](https://github.com/user-attachments/assets/33a3eb9b-7b05-46fc-8805-c654d38a41d6)\n\n\n\n### 2️⃣ Task Added\n\n ![Screenshot 2024-12-01 054705](https://github.com/user-attachments/assets/8886cf8e-fa8a-41d1-9e3c-757cf624973d)\n\n  \n### 3️⃣ Task Marked as Done\n\n##  📈 Future Enhancements\n\n* Add categories for tasks.\n* Allow users to edit tasks.\n* Implement a dark mode toggle.\n* Add animations for adding and removing tasks.\n\n## 🤝 Contributions\n\nContributions are welcome! Feel free to:\n\n  * Fork this repository.\n  * Add new features or fix bugs.\n  * Submit a pull request.\n\n## ⭐ Acknowledgments\n\nThis project is created as a fun and educational tool for beginners to:\n\n * Learn and practice web development basics.  \n * Understand JavaScript concepts like `localStorage` and event handling.\n## 🏆 Show Your Support  \n⭐ Star this repository if you found it fun and helpful!\n\n# Happy Coding! 💻\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmujeebdev3%2FTo-do-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmujeebdev3%2FTo-do-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmujeebdev3%2FTo-do-list/lists"}