Todolist в vanillaJS

Я изучаю фронтенд-разработку 2,5 месяца, решил перейти на практику и написал список дел за 8 часов.

1. Напишите, пожалуйста, свое мнение о коде и о том, как его можно улучшить (желательно в html, тоже css, но JS в приоритете)
2. Я хочу начать изучать React, это уже возможно или лучше попрактиковаться в JS?

Ссылка на код: https://codepen.io/domarchuk77/pen/xxRoMBY

class Task {
    constructor(){
        counter++
        this.taskText = document.querySelector(".todo__settings__input").value
        this.task = pattern.cloneNode(true)
        this.taskList = document.querySelector(".todo__list")
        this.taskList.prepend(this.task)
        this.taskName = document.querySelector(".todo__list__item__text")
        this.itemProgress = document.querySelector(".todo__list__item")
        this.taskName.innerHTML = this.taskText
        this.itemProgress.classList.add("in-progress")
        this.taskDelete()
        this.taskComplete()
        this.taskFilter()
        input.value = ""
    }
    taskDelete(){
        this.buttonDelete = document.querySelector(".todo__list__item__buttons__finish")
        this.buttonDelete.addEventListener("click",() => {
            this.task.remove()
            counter--
            console.log(counter)
            if(counter == 0){
                this.filter.disabled = true
                this.filter.value = "all"
            }
        })
    }
    taskComplete(){
        this.buttonComplete = document.querySelector(".todo__list__item__buttons__complete")
        this.buttonComplete.addEventListener("click",() => {
           this.buttonComplete.remove()
           this.itemProgress.classList.add('task-complete')
           this.filterCheckActive()
           if(this.itemProgress.classList.contains('in-progress')){
               this.itemProgress.classList.remove('in-progress')
           }
        })
    }
    taskFilter(){
        this.filter = document.querySelector(".todo__settings__filter")
        this.filter.disabled = false
        this.filter.addEventListener("change",() => {
            if(this.filter.value == "all"){
                this.itemProgress.classList.add('show')
            }else{
                this.itemProgress.classList.remove('hide')
            }
            this.filterCheckActive()
            if(this.filter.value == "complete"){
                this.itemProgress.classList.remove('show')
                this.itemProgress.classList.remove('hide')
                if(this.itemProgress.classList.contains('in-progress')){
                    this.itemProgress.classList.add('hide')
                }else{
                    this.itemProgress.classList.remove('show')
                }
            }
        })
    }
    filterCheckActive(){
        if(this.filter.value == "active"){
            this.itemProgress.classList.remove('show')
            this.itemProgress.classList.remove('hide')
            if(this.itemProgress.classList.contains('task-complete')){
                this.itemProgress.classList.add('hide')
            }else{
                this.itemProgress.classList.remove('show')
            }
        }
    }
    checkText(){

    }
}
let counter = 0
let pattern = document.querySelector(".todo__list__item")
pattern.remove()
let input = document.querySelector(".todo__settings__input")
document.querySelector(".todo__settings__button").addEventListener("click", function(){
    if(!(input.value.length == 0)){
        new Task
    }
})