{"id":24462363,"url":"https://github.com/tsohledev/to-do-planner","last_synced_at":"2026-01-02T05:26:09.086Z","repository":{"id":67884092,"uuid":"575601833","full_name":"tsohleDev/To-do-planner","owner":"tsohleDev","description":"A to do list on the browser using Webpack bundler","archived":false,"fork":false,"pushed_at":"2022-12-17T14:51:48.000Z","size":1259,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T04:32:19.866Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsohleDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-12-07T22:07:34.000Z","updated_at":"2023-06-21T08:09:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"9385d45c-3fed-4ecd-84ec-99fd1dba1597","html_url":"https://github.com/tsohleDev/To-do-planner","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/tsohleDev%2FTo-do-planner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsohleDev%2FTo-do-planner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsohleDev%2FTo-do-planner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsohleDev%2FTo-do-planner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsohleDev","download_url":"https://codeload.github.com/tsohleDev/To-do-planner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243559955,"owners_count":20310827,"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":[],"created_at":"2025-01-21T04:32:16.679Z","updated_at":"2026-01-02T05:26:09.028Z","avatar_url":"https://github.com/tsohleDev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# To Do list\u003c!---Title of Project--\u003e\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"/images/murple_logo.png\" alt=\"logo\" width=\"140\"  height=\"auto\" /\u003e\n  \u003cbr/\u003e\n\n  \u003ch3\u003e\u003cb\u003eMicroverse\u003c/b\u003e\u003c/h3\u003e\n\n\u003c/div\u003e\n\n## To Do list: Final Product \u003c!---Title of Project--\u003e\n\n\"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 and Webpack!\n\nProject 1:In this project, I will build a simple HTML list of To Do tasks. The list will be styled according to the specifications listed later in this lesson. This simple web page will be built using webpack and served by a webpack dev server.\n\nProject 2: In this project, I will implement the CRUD (create, read, update, delete) methods. All the elements of the user interface will be fully functional and your application will be completed.\n\nProject 3:In this project, I will add some functionality to your application to make it interactive. The user will also be able to mark task completion by selecting the corresponding checkbox (or undo it by unchecking the checkbox). The updated tasks list will be stored in local storage.\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n  - [🚀 Live Demo](#live-demo)\n- [💻 Getting Started](#getting-started)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [📝 License](#license)\n\n\u003c!-- PROJECT DESCRIPTION --\u003e\n\n# 📖 Project name\u003ca name=\"about-project\"\u003e\u003c/a\u003e \u003c!---Project title--\u003e\n\u003ctable style=\"border: 2px solid black;\"\u003e\n  \u003ctr\u003e\n    \u003cth style=\"border: 1px solid black;\"\u003eEmpty List\u003c/th\u003e\n    \u003cth style=\"border: 1px solid black;\"\u003eFilled List\u003c/th\u003e\n     \u003cth style=\"border: 1px solid black;\"\u003eChecked List\u003c/th\u003e\n     \u003cth style=\"border: 1px solid black;\"\u003eDelete List\u003c/th\u003e\n\n  \u003c/tr\u003e\n  \u003ctr style=\"border: 2px solid black;\"\u003e\n  \u003ctd style=\"border: 1px solid black;\"\u003e\u003cimg src=\"/images/DesktopVersionADD.jpg\" alt=\"Desktop Version\" width=\"250\"  height=\"200\" /\u003e\u003c/td\u003e\n  \u003ctd style=\"border: 1px solid black;\"\u003e\u003cimg src=\"/images/DesktopVersionLIST.jpg\" alt=\"Desktop Version\" width=\"250\"  height=\"200\" /\u003e\u003c/td\u003e\n  \u003ctd style=\"border: 1px solid black;\"\u003e\u003cimg src=\"/images/DesctopVersionChecked.jpg\" alt=\"Desktop Version\" width=\"250\"  height=\"200\" /\u003e\u003c/td\u003e\n  \u003ctd style=\"border: 1px solid black;\"\u003e\u003cimg src=\"/images/DesctopVersionDelete.jpg\" alt=\"Desktop Version\" width=\"250\"  height=\"200\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n**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 and Webpack! \n\nHere are some features of the page:\n\n\u003cul\u003e\n  \u003cli\u003eType content to be added\u003c/li\u003e\n  \u003cli\u003eSelect items on the list\u003c/li\u003e\n   \u003cli\u003eAdd items to listt\u003c/li\u003e\n   \u003cli\u003eEdit items in list\u003c/li\u003e\n  \u003cli\u003eDelete items from list\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n    HTML\n    CSS\n    Javascript\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LIVE DEMO --\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n\n\n\n[To Do list live demo]( https://tsohleDev.github.io/To-do-planner/dist/)\n\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- GETTING STARTED --\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\n- Create a local directory that you want to clone the repository.\n\n- Open the command prompt in the created directory.\n\n- On the terminal run this command -\n\n```sh\n git clone [https://github.com/tsohleDev/To-do-planner.git]\n```\n\n- Go to the repository folder using command prompt\n```sh\n cd To-do-planner\n```\n\n- Install the dev dependencies for linters run\n```sh\n npm install.\n```\n- To start run\n```sh\n npm start\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Prerequisites\n\nIn order to run this project you need:\n\n-A working browser application (Google chrome, Mozilla Fire fox, Microsoft edge ...)\n\n-VSCode or any other equivalent code editor\n\n-Node Package Manager (For running, debuging, or installing dependancies to be used)\n\nnode and npm:\n\n-Linux\n```sh\n  sudo apt install nodejs npm\n```\n-windows \n\n[download and install](https://nodejs.org/en/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Setup\n\nClone this repository to your desired folder:\n\n- Open the command prompt in the created directory.\n\n- On the terminal run this command \n```sh\ngit clone https://github.com/tsohleDev/To-do-planner.git\n```\n\n- Go to the repository folder using command prompt\n```sh\n cd To-do-planner\n```\n\n- Install the dev dependencies for linters \n```sh\n run npm install.\n```\n\n- To start run \n```sh\nnpm start\n```\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- Author --\u003e\n\n## 👤**Authors** \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\u003ch4\u003eTsohle Mokhemisi \u003c/h4\u003e\n\n\u003cimg src=\"/images/github.svg\" alt=\"logo\" width=\"18\"  height=\"18\" /\u003e[githubhandle](https://github.com/tsohleDev2)\n\u003cbr\u003e\n\u003cimg src=\"/images/twitter.svg\" alt=\"logo\" width=\"18\"  height=\"18\" /\u003e [twitterhandle](https://twitter.com/RealTsohle)\n\u003cbr\u003e\n\u003cimg src=\"/images/linkedin.svg\" alt=\"logo\" width=\"18\"  height=\"18\" /\u003e[linkedIn](https://www.linkedin.com/in/tsohle-mokhemisi-3687401b2/)\n\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- FUTURE FEATURES --\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\n\n- Implement additional pages, which will allow the user to Register\n\n- Implement additional pages, which will allow the user to Login\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\n\u003e Credits to everyone who inspired the codebase.\n\nI would like to thank [Microverse](https://www.microverse.org/)\n\nFeel free to check the [issues page](https://github.com/tsohleDev/To-do-planner/issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- SUPPORT --\u003e\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nGive a ⭐️ 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\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\nLucas Erkana\n\u003cbr\u003e\n\u003cimg src=\"/images/github.svg\" alt=\"logo\" width=\"18\"  height=\"18\" /\u003e[githubhandle](https://github.com/Lucash2022)\n\u003cbr\u003e\n\u003cimg src=\"/images/twitter.svg\" alt=\"logo\" width=\"18\"  height=\"18\" /\u003e [twitterhandle](https://twitter.com/@Lucas_David_22)\n\u003cbr\u003e\n\u003cimg src=\"/images/linkedin.svg\" alt=\"logo\" width=\"18\"  height=\"18\" /\u003e[linkedIn](https://www.linkedin.com/in/lucas-erkana-b30a0b3b/)\n  \u003cbr\u003e\n\u003cimg src=\"/images/facebook.svg\" alt=\"logo\" width=\"18\"  height=\"18\" /\u003e[facebook](https://www.facebook.com/lucash.toni)\n\n\n[Font Awesome](https://fontawesome.com/search?q=book\u0026o=r)\n\n[Icons8](https://icons8.com/icons/set/books)\n\n[Google Fonts](https://developers.google.com/fonts)\n\n[Bootsrtap](https://getbootstrap.com/docs/5.1/getting-started/introduction/)\n\n[Luxon](https://imdac.github.io/modules/js/luxon/)\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- LICENSE --\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](./LICENSE) licensed.\n\n_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._\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%2Ftsohledev%2Fto-do-planner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsohledev%2Fto-do-planner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsohledev%2Fto-do-planner/lists"}