angeluray/angel-todo-list

"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.

To Do list

• "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.

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• Internet service.
• Basic knowledge of Git/Terminal.
• Visual Studio Code.

Setup

• Open the terminal on your computer
• Navigate through directories using change directory (cd) command to where you want to clone the repository.
• Type the following command then press ENTER:

  git clone [email protected]:angeluray/to-do-list.git

• the terminal will send to you information about your download.
• Type the following lists of commands and press ENTER after each command:
  • Basic Setup
    • npm init -y
    • npm install webpack webpack-cli --save-dev
    • npm install --save lodash
    • npx webpack
    • npx webpack --config webpack.config.js
    • npm run build
  • Setting up HtmlWebpackPlugin
    • npm install --save-dev html-webpack-plugin
    • npm run build
  • Add CSS
    • npm install --save-dev style-loader css-loader
    • npm run build
  • Setup local dev server
    • npm install --save-dev webpack-dev-server
  • Setup linters
    • npm install --save-dev [email protected]
    • npx hint .
    • npm install --save-dev [email protected] [email protected] [email protected] [email protected]
    • npx stylelint "**/*.{css,scss}"
    • npm install --save-dev [email protected] [email protected] [email protected] [email protected]
    • npx eslint .
  • Open folder in VSC
    • code .

Built With

• HTML
• CSS
• JAVASCRIPT
• GitHub flow
• Linters Check
• Webpack

🌎 Live Demo:

• To-Do List Tool

The link is currently not available, right after got the project approved it will be here.

Authors

👤 Angel Uray

• GitHub: @angeluray
• Twitter: @atangeluray
• LinkedIn: Angel Uray

Show your support

• Give a ⭐️ if you like this project!

📝 License

• This project is MIT licensed.

angel-todo-list's Issues

Javascript Best Practices Auto-review

Hi, consider store this line of code into a constant to reduce de amount of characters to add eventListeners or styles dynamically.
For example:
const myConstant = document.querySelector(#task-${index} input[type="text"]);

angel-todo-list/src/modules/Add&Remove.js

Line 41 in 79c333f

document.querySelector(`#task-${index} input[type="text"]`).readOnly = items.completed;

angel-todo-list/src/modules/Add&Remove.js

Line 42 in 79c333f

document.querySelector(`#task-${index} input[type="text"]`).style.border = 'none';

angel-todo-list/src/modules/Add&Remove.js

Line 43 in 79c333f

document.querySelector(`#task-${index} input[type="text"]`).style.width = '340px';

angel-todo-list/src/modules/Add&Remove.js

Line 44 in 79c333f

document.querySelector(`#task-${index} input[type="text"]`).addEventListener('input', (e) => {

Also, kinda consider removing all the comments, although it says it's for future improvements maybe a console.logo would be something easy to use or remember when you need it in the future.

angel-todo-list/src/modules/Add&Remove.js

Line 48 in 79c333f

// For future imporvements and testing only console.log(items.listInfo);

Checking the 'print' function

Please check the 'remove' function in the testing by getting how many items are deleted.