https://github.com/adnanolarmmi/to-do-list-app
In this project, I built a simple HTML list of To Do tasks. The list was styled according to the specifications listed in this lesson. This simple web page was built using webpack and served by a webpack dev server. and also I implemented the CRUD (create, read, update, delete) methods. Using local storage to store user information.
https://github.com/adnanolarmmi/to-do-list-app
css html javascript
Last synced: 5 months ago
JSON representation
In this project, I built a simple HTML list of To Do tasks. The list was styled according to the specifications listed in this lesson. This simple web page was built using webpack and served by a webpack dev server. and also I implemented the CRUD (create, read, update, delete) methods. Using local storage to store user information.
- Host: GitHub
- URL: https://github.com/adnanolarmmi/to-do-list-app
- Owner: AdnanOlarmmi
- License: other
- Created: 2022-09-27T21:02:40.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-17T14:37:51.000Z (over 3 years ago)
- Last Synced: 2025-10-10T09:15:44.922Z (9 months ago)
- Topics: css, html, javascript
- Language: JavaScript
- Homepage:
- Size: 12.1 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👤 Author](#author)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ](#faq)
- [📝 License](#license)
**To-Do-List-App** is a simple HTML list of To-Do tasks. The list was styled according to specifications. This simple web page was built using HTML, CSS, JavaScript and bundled with webpack. And also implemented the CRUD (create, read, update, delete) methods. All the elements of the user interface is fully functional and my application is complete.
I also added some functionality to my application to make it interactive. The user will be able to mark task completion by selecting corresponding checkboxes (or undo it by unchecking the checkbox). The updated tasks list is stored in the local storage.
Client
- **Responsive Design.**
- **Pixel Perfect design.**
- **Local Storage**
- [Here is the link to the live experience](https://adnanolarmmi.github.io/To-Do-List-App/).
> | | Mobile version | Desktop version | |
> | --- | ----------------------------------- | ------------------------------------ | --- |
> | |  |  |
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
- A web browser to view output e.g [Google Chrome](https://www.google.com/chrome/).
- An IDE e.g [Visual studio code](https://code.visualstudio.com/).
- [A terminal](https://code.visualstudio.com/docs/terminal/basics).
### Setup
Clone this repository to your desired folder or download the Zip folder:
```
git clone https://github.com/AdnanOlarmmi/To-Do-List-App.git
```
- Navigate to the location of the folder in your machine:
**``you@your-Pc-name:~$ cd To-Do-List-App``**
### Install
Install all dependencies:
```
npm install
```
### Usage
To run the project, follow these instructions:
- After Cloning this repo to your local machine.
- To get it running on your default browser and local host, run:
```
npm start
```
### Run tests
To run tests, run the following command:
- Track HTML linter errors run:
```
npx hint .
```
- Track CSS linter errors run:
```
npx stylelint "**/*.{css,scss}"
```
- Track JavaScript linter errors run:
```
npx eslint .
```
- For unit testing, run:
```
npm test
```
You can deploy this project using: GitHub Pages,
- I used GitHub Pages to deploy my website.
- For more information about publishing sources, see "[About GitHub pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#publishing-sources-for-github-pages-sites)".
👤 **Is-haq, Adnan Olamilekan**
- GitHub: [@AdnanOlarmmi](https://github.com/adnanolarmmi)
- Twitter: [@AdnanIshaqOla](https://twitter.com/AdnanIshaqOla)
- LinkedIn: [Adnan (Olamilekan) Is-haq](https://linkedin.com/in/adnan-is-haq-olamilekan)
- [ ] **Implement button to switch sort type (ascending or descending).**
- [ ] **Implement completed and not-completed routes for completed and non-completed tasks, respectively.**
- [ ] **Add backend to store tasks.**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
Give a ⭐️ if you like this project and how I managed to build it!
- The original design ideal from Microverse💕.
- Project from [Microverse](https://bit.ly/MicroverseTN) JavaScript module.
- Thanks to the Microverse team for the great curriculum.
- Thanks to the Code Reviewer(s) for the insightful feedbacks.
- A great thanks to My coding partner(s), morning session team, and standup team for their contributions.
- Hat tip to anyone whose code was used.
- **Can I fork and reuse the repository**
- Yes please, feel free.
- **Can I improve the repository, and my changes will be accepted if they are good?**
- Yes please, nice ideas are welcome, please.
This project is [MIT](./LICENSE) licensed.