{"id":23208059,"url":"https://github.com/joyapisi/to-do-list","last_synced_at":"2025-08-19T03:30:46.052Z","repository":{"id":148740024,"uuid":"620005732","full_name":"joyapisi/To-Do-List","owner":"joyapisi","description":"To Do List is a simple a simple web page that displays a list of To Do tasks. It is built using webpack and served by a webpack dev server.","archived":false,"fork":false,"pushed_at":"2023-04-11T20:19:17.000Z","size":537,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T16:48:53.123Z","etag":null,"topics":["css","eslint","javascript","stylelint","webpack"],"latest_commit_sha":null,"homepage":"https://joyapisi.github.io/To-Do-List/dist","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/joyapisi.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-03-27T21:00:24.000Z","updated_at":"2024-01-22T09:01:43.000Z","dependencies_parsed_at":"2023-05-28T21:00:15.930Z","dependency_job_id":null,"html_url":"https://github.com/joyapisi/To-Do-List","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joyapisi/To-Do-List","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2FTo-Do-List","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2FTo-Do-List/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2FTo-Do-List/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2FTo-Do-List/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joyapisi","download_url":"https://codeload.github.com/joyapisi/To-Do-List/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyapisi%2FTo-Do-List/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271096025,"owners_count":24698563,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["css","eslint","javascript","stylelint","webpack"],"created_at":"2024-12-18T17:27:06.388Z","updated_at":"2025-08-19T03:30:46.044Z","avatar_url":"https://github.com/joyapisi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# To Do List\n\nHTML, CSS and JavaScript To Do List Project\n\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  - [🎥 Video Explanation](#video-explanation)\n  - [🚀 Live Demo](#live-demo)\n- [💻 Getting Started](#getting-started)\n  - [Setup](#set-up)\n  - [Prerequisites](#prerequisites)\n  - [Install](#install)\n    - - [Install webpack](#webhint-installation)\n    - - [Install linters](#linter-installation)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [❓ FAQ](#faq)\n- [📝 License](#license)\n\n# 📖 [To_Do_List] \u003ca name=\"To DO List\"\u003e\u003c/a\u003e\n\n**[To_Do_List]** is a simple a simple web page that displays a list of To Do tasks inserted by a user. It is built using webpack and served by a webpack dev server.\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  \u003csummary\u003eJavascript runtime environment\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://nodejs.org/en/\"\u003eNode JS\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003csummary\u003eJS Packages\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://webpack.js.org/guides/getting-started/#basic-setup\"\u003ewebpack\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003csummary\u003eVersion control\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"github.com\"\u003eGit Hub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- **[Webpack]**\n- **[Desktop-Version]**\n- **[Dynamic-Design]**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🎥 Video Explanation \u003ca name=\"video-explanation\"\u003eComing soon!\u003c/a\u003e\n\n## 🚀 Live Demo \u003ca href=\"https://joyapisi.github.io/To-Do-List/dist\" name=\"live-demo\"\u003eLive Demo\u003c/a\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nCreating your first \"To DO List\" project\n\nTo get a local copy up and running, follow these steps.\n\n### Prerequisites\n\nIn order to run this project you need:\n\n-A Git hub account\n-Git bash\n-Node JS\n-Webpack\n-Visual Studio Code as your code editor\n\n# Setup \u003ca name=\"set-up\"\u003e\u003c/a\u003e\n\nClone this repository to your desired folder:\n\n```sh\n  cd my-folder\n  git clone[(https://github.com/joyapisi/To-Do-List.git)]\n```\n## Understand Set Up Requirements\nSince this code is using webpack, run `npm start` in your terminal to run it instead of using the live server. \n\n## Understand Set Up Requirements\n\n### Define webpack\n\n\u003ca href=\"https://webpack.js.org/concepts/\"\u003ewebpack\u003c/a\u003eis a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.\n\n### Define Linters\n\nA linter is a tool to help you improve your code. You can learn more about Linters here: (source: (\u003chttps://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/\u003e)).\n\n#### Advantages of Linting:\n\n1. Fewer errors in production- The use of linters helps to diagnose and fix technical issues such as code smells. As a result, fewer defects make their way to production.\n2. Achieving a more readable and consistent style, through the enforcement of its rules.\n3. Having more secure and performant code.\n4. Having an objective and measurable assessment of code quality.\n5. Having fewer discussions about code style and aesthetic choices during code reviews.\n\n# Install webpack and linters \u003ca name=\"install\"\u003e\u003c/a\u003e\n\n## Install webpack \u003ca name=\"webpack-installation\"\u003e\u003c/a\u003e\n\n- Follow the instructions \u003ca href=\"https://webpack.js.org/guides/getting-started/#basic-setup\"\u003ehere\u003c/a\u003e to set up webpack.\n\n### Steps to Install webpack\n\n- In the link above, go through these topics in order:\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://webpack.js.org/guides/getting-started/#basic-setup\"\u003eGetting Started\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://webpack.js.org/guides/asset-management/#loading-css\"\u003eAsset Management\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://webpack.js.org/guides/output-management/#setting-up-htmlwebpackplugin\"\u003eOutput Management\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://webpack.js.org/guides/development/#adjusting-your-text-editor\"\u003eDevelopment\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n## Install Linters \u003ca name=\"linter-installation\"\u003e\u003c/a\u003e\n\nLinters for various programming languages are available for use, e.g. Rubocop for Ruby or ESLint for JavaScript.\n\nThere are many ways you can integrate a linter in your workflow:\n\n-text editor plugin\n-GitHub Actions\n-GitHub apps\n\n### Steps to Install Linters\n\n**Note:** The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:\n\n# .gitignore\n\nnode_modules/\n\n## ESLint\n\nRun\n\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\n## Web Hint \u003ca name=\"webhint-installation\"\u003e\u003c/a\u003e\n\nThis is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.\n\n**NOTE:** If you are using Windows, make sure you initialize npm to create `package.json` file.\n\n```\nnpm init -y\n```\n\n1. Run\n   ```\n   npm install --save-dev hint@7.x\n   ```\n   _how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)._\n2. Copy [.hintrc](.hintrc) to the root directory of your project.\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n   - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it.\n4. Run\n   ```\n   npx hint .\n   ```\n   [Copy contents of .eslintrc.json to the root directory of your project](https://github.com/microverseinc/linters-config/blob/master/html-css-js/.eslintrc.json)\n5. Fix validation errors.\n\n### [Stylelint](https://stylelint.io/) \u003ca name=\"stylelint-installation\"\u003e\u003c/a\u003e\n\nA mighty, modern linter that helps you avoid errors and enforce conventions in your styles.\n\n1. Run\n\nnpm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x\nnot sure how to use npm? Read this.\n\n2. Copy .stylelintrc.json to the root directory of your project.\n\n3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.**\n\nIf you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it. 4. Run npx stylelint \"\\*_/_.{css,scss}\" on the root of your directory of your project.\n\n5. Fix linter errors.\n\n6. **IMPORTANT NOTE:** feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!\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👤 **Joy Phoebe**\n\n- GitHub: (https://github.com/joyapisi)\n- Twitter: (https://twitter.com/joyapisi)\n- LinkedIn: (https://http://www.linkedin.com/in/joy-phoebe-00b80a13a)\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\n# **[Feature-1]**\n\n- Add more styling (aesthetics)\n\n# **[Feature-2]**\n\n- Add mobile version\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/joyapisi/To-Do-List/issues).\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nIf you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going!\n\n## 🙏 Acknowledgments \u003ca name=\"Microverse Inc.\"\u003e\u003c/a\u003e\n\nI'm thankful to Microverse for providing a study platform which guided me through this project.\n\n## ❓ FAQ \u003ca name=\"faq\"\u003e\u003c/a\u003e\n\n- **[Question_1]**\n  An easier and quicker way to understand webpack?\n\n  - This YouTube\u003ca href=\"https://www.youtube.com/watch?v=MpGLUVbqoYQ\"\u003evideo\u003c/a\u003e will help you understand webpack better and in details\n\n- **[Question_2]**\n  Where can I download node JS for installation?\n\n  - Node Js can be downloaded here- \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://nodejs.org/en/download/\"\u003e Node JS \u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](https://choosealicense.com/licenses/mit/) 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%2Fjoyapisi%2Fto-do-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoyapisi%2Fto-do-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoyapisi%2Fto-do-list/lists"}