2
\$\begingroup\$

I have been studying front-end development for 2 .5 months, I decided to switch to practice and wrote a todo list in 8 hours

  1. Please write your opinion about the code and how it can be improved (preferably in html, css too, but JS is a priority)
  2. I want to start learning React, is it already possible to start or is it better to practice some more JS?

Link to code: 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
    }
})
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.