Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nitbravoa92/project-to-do-list
This project consists of creating a To Do List web application with html, css, javascript (ES6) using the webpack tool as a packager for all the application files.
https://github.com/nitbravoa92/project-to-do-list
css3 ecmascript6 html5 javascript webpack
Last synced: 6 days ago
JSON representation
This project consists of creating a To Do List web application with html, css, javascript (ES6) using the webpack tool as a packager for all the application files.
- Host: GitHub
- URL: https://github.com/nitbravoa92/project-to-do-list
- Owner: NitBravoA92
- License: mit
- Created: 2023-06-06T20:47:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-06-15T19:09:52.000Z (over 1 year ago)
- Last Synced: 2025-01-13T14:51:57.218Z (11 days ago)
- Topics: css3, ecmascript6, html5, javascript, webpack
- Language: JavaScript
- Homepage: https://nitbravoa92.github.io/project-to-do-list/
- Size: 415 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
To Do List App
# 📗 Table of Contents
- [📗 Table of Contents](#-table-of-contents)
- [To Do List App ](#to-do-list-app-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [Video Demo ](#video-demo-)
- [🚀 Live Demo ](#-live-demo-)
- [💻 Getting Started ](#-getting-started-)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [👥 Authors ](#-authors-)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [📝 License ](#-license-)
**To Do List App** This project consists of creating a To Do List web application with html, css, javascript (ES6) using the webpack tool as a packager for all the application files.
Client
- **Minimalist Design**
- **Drag & drop functionality**
- **Responsive design**
- **Use of semantic HTML**
- **source code packaged with Webpack**
- **Unit test with jest**
This is a video demonstration of the functionality of the application in different browsers:
- [To Do List App - Video Demo](https://www.loom.com/share/8eb665b894604b07be848f050a14bbd3)
To see the application working live, you can click on the following link that contains the demo version:
- [To Do List App - Live Demo](https://nitbravoa92.github.io/project-to-do-list/)
To get a local copy up and running, follow these steps.
### Setup
Clone this repository to your desired folder:
```sh
cd my-folder-name
git clone [email protected]:NitBravoA92/project-to-do-list.git
```
### Prerequisites
In order to install, modify and run this project, it is necessary to have the following applications installed:
- **Git:** to manage the project versions of source code. [You can Download Git here](https://git-scm.com/)
- **Nodejs and NPM:** to install and manage the project dependencies. [Nodejs and NPM installation guide](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- **A code editor** like Visual Studio Code (Recommended) or any other of your preference. It is necessary to open the project and add or modify the source code. [You can Download Visual Studio Code here](https://code.visualstudio.com/)
It is also important to have at least basic knowledge about webpack tool, HTML, CSS and Javascript languages so you will be able to understand and work with the html and css code of the project.
- [Learn the basics of HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [Learn the basics of CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [JavaScript basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
- [Javascript Arrays](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
- [Javascript Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
- [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
- [Webpack - Getting Started](https://webpack.js.org/guides/getting-started/)
### Install
Install this project by running the next command into your project folder:
```sh
npm install
```
All the packages and libraries necessary for the project to work will be installed in a folder called /node_module
### Usage
Run the following command to start the application on a development server:
```sh
npm start
```
You only need to run this command once. If you keep making changes to the files, the installed webpack server will reload the page so you can see the changes immediately.
Open the HTML, CSS or Javascript files and modify the internal code, then run the following command to check if your code has any syntax, indentation or spacing errors:
HTML Linter
```sh
npm start
```
CSS Linter
```sh
npx stylelint "**/*.{css,scss}"
```
Javascript Linter
```sh
npx eslint .
```
Run test
```
npm run test
```
This will show you a log with details about errors (if any) and changes that would be necessary to solve those errors and improve the code.
**Note**: Please only modify the HTML, CSS and Javascript files. Do not modify the configuration files of the project.
When all the code changes are ready, run the following command to have webpack generate the bundle files in your ./dist folder. Those files are optimized for use in production.
```sh
npm run build
```
👤 **Nitcelis Bravo**
- GitHub: [Nitcelis Bravo](https://github.com/NitBravoA92)
- Twitter: [@softwareDevOne](https://twitter.com/softwareDevOne)
- LinkedIn: [Nitcelis Bravo Alcala](https://www.linkedin.com/in/nitcelis-bravo-alcala-b65340158)
👤 **Andrea Manuel**
- GitHub: [@AndreaM2429](https://github.com/AndreaM2429)
- Twitter: [@twitter](https://twitter.com/AndreaManuelOr1)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/andrea-manuel-2b075026a/)
- [x] **Create a section to list the tasks of the To Do List**
- [x] **Create functionality to add and remove tasks from the To Do List**
- [x] **Add interactivity to the task list: Mark tasks as complete, reordering a task using drag-and-drop**
Contributions, issues, suggestions and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
To do Contributions, please fork this repository, create a new branch and then create a Pull Request from your branch. You can find detailed description of this process in: [A Step by Step Guide to Making Your First GitHub Contribution by Brandon Morelli](https://codeburst.io/a-step-by-step-guide-to-making-your-first-github-contribution-5302260a2940)
If you liked this project, give me a "Star" (clicking the star button at the beginning of this page), share this repo with your developer community or make your contributions.
I would like to thank my Microverse teammates for their support. They have supported me a lot in carrying out this project, giving me suggestions, good advice and solving my code doubts.
This project is [MIT](./LICENSE) licensed.