https://github.com/ometman/to-do-list
"To-Do List" is a simple tool that helps to organize the tasks of a day, with CURD functionality. It therefore collects and lists tasks to be done, allows marking a task as complete, organizing them by index, update, remove and delete tasks. It is build on ES6 and Webpack!
https://github.com/ometman/to-do-list
bootstrap css javascript minimalist-design nodejs to-do-list webpack
Last synced: 18 days ago
JSON representation
"To-Do List" is a simple tool that helps to organize the tasks of a day, with CURD functionality. It therefore collects and lists tasks to be done, allows marking a task as complete, organizing them by index, update, remove and delete tasks. It is build on ES6 and Webpack!
- Host: GitHub
- URL: https://github.com/ometman/to-do-list
- Owner: ometman
- License: mit
- Created: 2023-05-11T00:37:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-20T19:19:41.000Z (almost 2 years ago)
- Last Synced: 2024-12-08T21:13:49.815Z (2 months ago)
- Topics: bootstrap, css, javascript, minimalist-design, nodejs, to-do-list, webpack
- Language: JavaScript
- Homepage:
- Size: 1.89 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
To Do Lists: Ometman
**"To-Do List"** is a minimalist website project that helps to organize the tasks of a day, with CURD functionality. It therefore collects and lists tasks to be done, allows marking a task as complete, organizing them by index, update, remove and delete tasks. The site was developed using ES6 and webpack.
# 📗 Table of Contents
- [To-Do List Ometman](#to-do=list-ometman)
- [📗 Table of Contents](#-table-of-contents)
- [📖 To Do List: Ometman ](#-to-do-list-ometman-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [🚀 Live Demo ](#-live-demo-)
- [💻 Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👥 Author ](#-author-)
- [Author](#author)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [❓ FAQ ](#-faq-)
- [📝 License ](#-license-)
This project **To Do List** demonstrates the development of the minimalist design of a website using Javascript structured in modules, with Webpack and other dependencies, ES6 syntax, HTML and CSS. It employs the use of an array of objects to dynamically populate and manipualte content in the DOM, incorporating best practices.
>The project includes designs for two different screen sizes.
- Mobile: up to 768px wide.
- Desktop: 768px or wider.
>Brief :
- There are no logo and navigation links.
- There are only 3 rows to begin with, title row, task input row and task marking row.
- It has only one page where CURD is done.
Client
- HTML
- CSS
- JS
- Minimalist design
Server
- Optionally: Deployable Using GitHub Pages
Database
- N/A
- **Conversion of a Minimalist web app to HTML/CSS using webpack**
- **List or Show tasks**
- **Add or Remove a task**
- **Mark all completed tasks to indicate completed**
- **Responsive Web Design: Desktop & Mobile**
- **Interactivity Using JS**
> You can access a live demo here
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
- Git.
- An IDE (e.g. VS Code)
- Browser to run.
### Setup
Clone this repository to your desired folder:
- Using Git Bash or any integrated terminal of you choice.
- Open with code editor (e.g. VS Code).
- Make sure all dependencies( eg: webpack, webpack dev server, css-loader, sass-loader, bootstrap)
### Usage
To run the project locally, execute the following command:
- Run the following command;
- npm run server (You should see a success result)
- Now access the app on port 3000 by entering the following in your browser:
- http://localhost:3000
### Run tests
To run tests, run the following command:
**************
Initial Step:
**************
- mkdir .github/workflows
- copy the **linters.yml** file to the directory created above.
- touch .gitignore if not created already and add **node_modules/** to it.
- initialize npm to create package.json file by running the command:
> npm i -y
(here i for install & -y for saying yes to all)
************************
For Webhint (optional):
************************
- Run
> npm install --save-dev [email protected]
- To fix validation errors run:
> npx hint .
**************
For Stylelint
**************
- Run
> npm install --save-dev [email protected] [email protected] [email protected] [email protected]
- Copy **.stylelintrc.json** to the root directory of your project.
- Run
> npx stylelint "**/*.{css,scss}"
on the root of your directory of your project.
- Fix linter errors.
*******
ESLint
*******
- Run
> npm install --save-dev [email protected] [email protected] [email protected] [email protected]
- Copy **.eslintrc.json** to the root directory of your project.
- Run
> npx eslint .
on the root of your directory of your project.
- Fix linter errors.
### Deployment
You can deploy this project using:
- GitHub Pages from a specific branch (e.g. main).
- You can also used any cloud service like gcloud or Azure.
- A deployed version can be found here:
https://ometman.github.io/to-do-list/dist
> Developed by: Omet Omeni (Ometman)
### Author
- GitHub: [@ometman](https://github.com/ometman)
- Twitter: [@twitterhandle](https://twitter.com/ometman)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/ometman/)
- **Popup alert on deleting or adding a task**
- **Changing look and feel of buttons**
- **Improved Aesthetics & Design**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/ometman/to-do-list/issues).
As a tech enthusiast, your support is always appreciated. If you like this project please do let me know with your support in any way you see fit.
I would like to thank especially [Microverse](https://www.microverse.org/) for inspiring this project & project guidelines.
## ❓ FAQ
- **Can I fork this project?**
- Yes, feel free to fork and knock yourself out :) .
- **Can I share this project with others?**
- Yes, you can share this project for any educational purposes.