Javascript - todo list- 1

 Hi, today I started " to-do list " project. 

I learned some new tricks in javascript. 

1. difference between element.innerText and element.innerHTML:

                innerText- can only set the text

                innerHTML- can set code - can set tags too

2. region select -

    you can add event listener to whole div and then check for the child by using event.target. for eg-

 function deleteCheck(e){

  const item=e.target;

  //Delete item

  if(item.classList[0]==='trash-btn'){

    const todo=item.parentElement;

    //Animation

    todo.classList.add('fall');

    todo.addEventListener('transitionend',function(){

      todo.remove();

    });

  }

  else if(item.classList[0]==='check-btn'){

    const todo=item.parentElement;

    todo.classList.toggle('completed');

  }

}

3. first time done animation. It is easy. still need to search for translateY() and rotateZ().

.fall{

  transform: translateY(8rem) rotateZ(20deg);

  opacity: 0;

}

4. event.preventDefault();

this command is used to prevent default event listeners.

5.todo.addEventListener('transitionend',function(){

      todo.remove();

    }); ------ 'transitionend' was a new to me.

6. Used google font and font Awsome icons.

... gonna post whole code once completed.