Description

Task: https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/tests_2.md

This PR makes the following changes:

• Adds tests for the TasksList.setTaskDescription() method (responsible for editing the task description)
• Adds tests for the TasksList.removeCompletedTasks() method (responsible for removing all completed tasks)
• Adds tests for the TasksList.toggleTaskIsCompleted() method (responsible for updating a task isCompleted status)
• Adds tests for the TasksList.updateTasksIndexes() method (responsible for updating the tasks indexes)
• Removes unused functions (from the id.utils.js file) and methods (from the Task.js file)

Plus, it adopts the following methodologies and conventions:

• For the CSS/Sass:
  • BEM methodology for naming the CSS classes
  • A modified version of the Scalable and Modular Architecture for CSS (SMACSS) methodology for organizing the CSS code into categorized folders/files (base, components, layout, and utilities)
  • Atomic Design methodology for breaking down the CSS components into atoms, molecules, and organisms
• For the JavaScript:
  • MVP architecture (a variation of the MVC pattern) to separate the application business logic from the presentation logic (DOM manipulation tasks)

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] Tests (changes related to testing)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [X] My code follows the style guidelines of this project (no linters errors)
• [X] I have checked my code and corrected any misspellings
• [X] I have commented my code
• [X] I have deleted any unused code as comments in my codebase

Screenshots

Description

Task: https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/tests_1.md

This PR makes the following changes:

• Adds tests for the TasksList.createAndAddTask() and View.render() methods (add item feature)
• Adds tests for the TasksList.removeTaskById() and View.remove() methods (remove item feature)
• Adds tests for the StorageService class

Plus, it adopts the following methodologies and conventions:

• For the CSS/Sass:
  • BEM methodology for naming the CSS classes
  • A modified version of the Scalable and Modular Architecture for CSS (SMACSS) methodology for organizing the CSS code into categorized folders/files (base, components, layout, and utilities)
  • Atomic Design methodology for breaking down the CSS components into atoms, molecules, and organisms
• For the JavaScript:
  • MVP architecture (a variation of the MVC pattern) to separate the application business logic from the presentation logic (DOM manipulation tasks)

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] Tests (changes related to testing)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [X] My code follows the style guidelines of this project (no linters errors)
• [X] I have checked my code and corrected any misspellings
• [X] I have commented my code
• [X] I have deleted any unused code as comments in my codebase

Screenshots

Description

Task: https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/m3_add_remove.md

This PR makes the following changes:

• Adds the add task and remove task features
• Adds the set task to completed and edit task description features
• Stores all the changes made in the tasks list into the browser's local storage

Plus, it adopts the following methodologies and conventions:

• For the CSS/Sass:
  • BEM methodology for naming the CSS classes
  • A modified version of the Scalable and Modular Architecture for CSS (SMACSS) methodology for organizing the CSS code into categorized folders/files (base, components, layout, and utilities)
  • Atomic Design methodology for breaking down the CSS components into atoms, molecules, and organisms
• For the JavaScript:
  • MVC architecture to separate the application business logic from the presentation logic (DOM manipulation tasks)

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [X] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [X] My code follows the style guidelines of this project (no linters errors)
• [X] I have checked my code and corrected any misspellings
• [X] I have commented my code
• [X] I have deleted any unused code as comments in my codebase

Screenshots

Description

This PR makes the following changes:

• Adds the functionality for editing the todo list's title
• Changes the styles for the task is completed state
• Increases the size of the task item icons (from 1.5 rem to 1.8 rem)

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [X] My code follows the style guidelines of this project (no linters errors)
• [X] I have checked my code and corrected any misspellings
• [X] I have commented my code
• [X] I have deleted any unused code as comments in my codebase

Description

This PR makes the following changes:

• Renames the controllers folder and the classes inside of it to reflect the nomenclature used by the MVP pattern instead of the MVC.
• Creates 3 types of abstractions responsible to deal with the DOM manipulation tasks (presentation logic):
  • the View component: is responsible for dynamically creating, rendering, and managing a specific HTML component on the screen. These components are located inside the folder views/view-components.
  • the ViewManager component: is responsible for managing a specific HTML component that was already rendered statically on the screen through the HTML document (index.html file). These components are located inside the folder views/view-managers.
  • the view decorators: are a special type of abstraction which are responsible for extending the functionality of some specific instance of the View or ViewManager components. They are located inside the folder views/decorators.
• Changes the way a View component dynamically updates itself on the screen.

Plus, it adopts the following methodologies and conventions:

• For the CSS/Sass:
  • BEM methodology for naming the CSS classes
  • A modified version of the Scalable and Modular Architecture for CSS (SMACSS) methodology for organizing the CSS code into categorized folders/files (base, components, layout, and utilities)
  • Atomic Design methodology for breaking down the CSS components into atoms, molecules, and organisms
• For the JavaScript:
  • MVP architecture (a variation of the MVC pattern) to separate the application business logic from the presentation logic (DOM manipulation tasks)

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [X] Refactor (a code change that neither fixes a bug nor adds a feature)
• [X] Breaking change (fix, feature or some code refactor that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [X] My code follows the style guidelines of this project (no linters errors)
• [X] I have checked my code and corrected any misspellings
• [X] I have commented my code
• [X] I have deleted any unused code as comments in my codebase

Description

Task: https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/m2_interactive_list.md

This PR makes the following changes:

• Adds the clear all completed tasks feature

Plus, it adopts the following methodologies and conventions:

• For the CSS/Sass:
  • BEM methodology for naming the CSS classes
  • A modified version of the Scalable and Modular Architecture for CSS (SMACSS) methodology for organizing the CSS code into categorized folders/files (base, components, layout, and utilities)
  • Atomic Design methodology for breaking down the CSS components into atoms, molecules, and organisms
• For the JavaScript:
  • MVC architecture to separate the application business logic from the presentation logic (DOM manipulation tasks)

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [X] My code follows the style guidelines of this project (no linters errors)
• [X] I have checked my code and corrected any misspellings
• [X] I have commented my code
• [X] I have deleted any unused code as comments in my codebase

Screenshots

Description

Task: https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/m1_list_structure.md

This PR makes the following changes:

• Sets up the GitHub Actions and the Webhint, Stylelint, and ESLint linters
• Sets up the Webpack configuration files and build scripts
• Creates the To-Do List initial structure
• Generates the tasks list dynamically

Plus, it adopts the following methodologies and conventions:

• For the CSS/Sass:
  • BEM methodology for naming the CSS classes
  • A modified version of the Scalable and Modular Architecture for CSS (SMACSS) methodology for organizing the CSS code into categorized folders/files (base, components, layout, and utilities)
  • Atomic Design methodology for breaking down the CSS components into atoms, molecules, and organisms
• For the JavaScript:
  • MVC architecture to separate the application business logic from the presentation logic (DOM manipulation tasks)

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [X] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

Checklist:

• [X] My code follows the style guidelines of this project (no linters errors)
• [X] I have checked my code and corrected any misspellings
• [X] I have commented my code
• [X] I have deleted any unused code as comments in my codebase

Screenshots

Hi Gabriel,

First of all, you've done a great job with your project. I'm impressed with how you implemented the MVP patterns in your code and how you can separate your business logic from the rendering logic. As we told you on the peer-to-peer code review the thing we found is that you are repeating yourself in the file TasksListsViews.js.

https://github.com/gvgesanto2/microverse-todo-list/blob/8903f6fba18e943faa8760f85182e3838d9197ba/src/scripts/views/view-components/tasks-list/TasksListView.js#L19-L32

As you can see you're using the exact same code to render your initial elements since you already coded a function to render your new elements. Consider using that function to follow DRY directives. Also, you should consider reviewing your modules just to make sure you don't repeat blocks of code you're already using.

Great job with your project!

Hello @gvgesanto2 👋

Highlights

Your To-Do List works very well, good job!

✔️ Very clean and organized code ✔️ Nice use of ID in your objects ✔️ No linter errors XD

Issue

When you try to click on the trash icon for deleting an item, the focus of the event listener toggles before the trash icon can be actually clicked. I saw that you added some delay for preventing this behavior, but I'm sure there is a better way of making it work properly.

Keep it going, man! 💯