4
\$\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\$
1
  • \$\begingroup\$ Much of the code is in the pen but not in the question itself. \$\endgroup\$
    – ggorlen
    Apr 16 at 17:30

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.