{"id":24273463,"url":"https://github.com/benawi/microverse-to-do-list","last_synced_at":"2025-09-24T15:31:06.569Z","repository":{"id":163124072,"uuid":"638545008","full_name":"Benawi/Microverse-To-Do-list","owner":"Benawi","description":"\"To-do list\" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 .","archived":false,"fork":false,"pushed_at":"2024-03-06T17:33:57.000Z","size":967,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-23T19:22:15.137Z","etag":null,"topics":["css-loader","dev-server","javascript","linter-eslint","webpack"],"latest_commit_sha":null,"homepage":"","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/Benawi.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":"2023-05-09T15:21:28.000Z","updated_at":"2023-11-25T12:17:07.000Z","dependencies_parsed_at":"2024-03-06T19:12:37.160Z","dependency_job_id":"eb3e72c2-c26d-438b-b28f-ee14540783fa","html_url":"https://github.com/Benawi/Microverse-To-Do-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"microverseinc/readme-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benawi%2FMicroverse-To-Do-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benawi%2FMicroverse-To-Do-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benawi%2FMicroverse-To-Do-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benawi%2FMicroverse-To-Do-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Benawi","download_url":"https://codeload.github.com/Benawi/Microverse-To-Do-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234093353,"owners_count":18778804,"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":["css-loader","dev-server","javascript","linter-eslint","webpack"],"created_at":"2025-01-15T19:57:56.944Z","updated_at":"2025-09-24T15:31:01.244Z","avatar_url":"https://github.com/Benawi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n    - [Key Features](#key-features)\n  - [🚀 Live Demo](#live-demo)\n- [💻 Getting Started](#getting-started)\n  - [Setup](#setup)\n  - [Prerequisites](#prerequisites)\n  - [Install](#install)\n  - [Usage](#usage)\n  - [Run tests](#run-tests)\n  - [Deployment](#triangular_flag_on_post-deployment)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n\n- [📝 License](#license)\n\n\n# 📖 To-do list Microverse! Project \u003ca name=\"about-project\"\u003e\u003c/a\u003e\n\nTo-do list Microverse! project is a repository consisting of the following files:\n- HTML file \n- CSS file \n- JS files\n- HTML, CSS, and JS linters file\n\n\nThe repository also contains files for setting up linters and validators.\n\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://microverse.notion.site/HTML-CSS-Get-a-head-start-275eb85fd34b4416aa06ec635d69cdaf\"\u003eHTML\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://microverse.notion.site/HTML-CSS-Get-a-head-start-275eb85fd34b4416aa06ec635d69cdaf\"\u003eCSS\u003c/a\u003e\u003c/li\u003e\n       \u003cli\u003e\u003ca href=\"https://microverse.notion.site/HTML-CSS-Get-a-head-start-275eb85fd34b4416aa06ec635d69cdaf\"\u003eJS\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n## To Do list: [add \u0026 remove](https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/m3_add_remove.md)\n### Features Added:\n- Set up a new project with Webpack \n- Create an index.html file and \n- To-Do List placeholder (div or ul element).\n- The index.html file must be set as a template using the HTML Webpack Plugin.\n- Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object  contains three keys:\n   - description [string].\n   - completed [bool].\n   - index: [number].\n- A function to iterate over the tasks array and populate an HTML list item element for each task.\n- On page load render the dynamically created list of tasks in the dedicated placeholder. The list  appear in order of the index values for each task.\n- Create a style.css and set rules for the To-Do List. CSS must be loaded by Webpack Style/CSS Loader. \n-All hardcoded items deleted from the tasks array. List structure #1.\n- A new JavaScript file for the new functionality created.\n- A function for adding a new task is implemented\n- A function for deleting a task is implemented\n- A function for editing task descriptions. implemented\n- By default new tasks wil have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task will be equal to 5).\n- Deleting a task will update all remaining items' indexes, so they represent the current list order and are unique(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) will set to 1)..\n- A new JavaScript file is added and imported as a module:\n     - It contain methods related to the status updates (completed: true / false).\n - Add event listener to the checkbox (change).\n - Items object's value for completed key will updated upon user actions.\n- A function for the \"Clear all completed\" is implemented - button (filter() method used).\n- The updated array of items will be stored in local storage, so the user gets the correct list of values after the page reloads (which means that any changes made to the list will be preserved).\n- The output of the app\n![image](https://github.com/Benawi/Microverse-To-Do-list/assets/21217148/41aff895-051a-4b9b-bddd-623c1a107dbf)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n- [Live Demo](https://benawi.github.io/Microverse-To-Do-list/dist/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nTo get a local copy up and running, follow these steps.\n\n### Setup\n\nClone this repository to your desired folder:\n\n\u003e cd my-folder\n\u003e git clone git@github.com:myaccount/my-project.git\n\n### Prerequisites\n\nIn order to run this project you need:\n\n- gitHub account;\n- git installed on your OS.\n\n### Install\n\u003e https://github.com/microverseinc/linters-config/tree/master/html-css-js\n- Installations required to run this project:\n### Install the webpack-cli. \n- Run the following command:\n```\nnpm install webpack webpack-cli --save-dev\n```\n### Install the plugin and adjust the webpack.config.js file\n- Run the following command:\n```\nnpm install --save-dev html-webpack-plugin\n```\n### To import a CSS file  add the style-loader and css-loader to your module configuration\n- Run the following command:\n```\nnpm install --save-dev style-loader css-loader\n```\n### webpack-dev-server\n- Run the following command:\n```\nnpm install --save-dev webpack-dev-server\n```\n### Webhint installation. \n- Run the following command:\n```\nnpm install --save-dev hint@7.x\n```\n### Stylelint installation.\n- Run the following command:\n```\nnpm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x\n```\n### ESLint\n- Run\n```\nnpm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x\n```\n### Usage\n\nYou can use this project by cloning it to your folder and changing index.html and styles.css files.\n\n### Run tests\n\nTo run tests, run the following commands:\n\nTo track linter errors locally follow these steps:  \n\nDownload all the dependencies run:\n```\nnpm install\n```\nTrack HTML linter errors run:\n```\nnpx hint .\n```\nTrack CSS linter errors run\n```\nnpx stylelint \"**/*.{css,scss}\"\n```\nTrack JavaScript linter errors run:\n```\nnpx eslint .\n```\n\n### Deployment\n\nYou can redeploy this project by adding new lines of code to source files.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n### 👤 Habtamu Alemayehu \n- GitHub: [Benawi](https://github.com/Benawi)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\nTo Do list: interactive list [this](https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/m2_interactive_list.md) will be added.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nContributions, issues, and feature requests are welcome!\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nGive me ⭐️ If you like this project!\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n\n- I would like to thank Microverse program for providing me this great chance.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](./MIT.md) licensed.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenawi%2Fmicroverse-to-do-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenawi%2Fmicroverse-to-do-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenawi%2Fmicroverse-to-do-list/lists"}