Day 5 of JavaScript30

Again, Wes Bos solution to this exercise includes setting event listeners on every item instead of the parent node!
My first solution ignored the fact that the text was flying in after the flex grow

    const panelsContainer = document.querySelector('.panels');
    panelsContainer.addEventListener("click", function(event){
      event.preventDefault();
      var clickedChildNode = event.target.nodeName == "DIV" ? event.target : event.target.parentNode;
      clickedChildNode.classList.toggle('open');
    });

I then watched the video and added the transtionend addventlistener

    const panelsContainer = document.querySelector('.panels');
    function toggleOpen(){
      event.preventDefault();
      var clickedChildNode = event.target.nodeName == "DIV" ? event.target : event.target.parentNode;
      clickedChildNode.classList.toggle('open');

    }
    function toggleActive(){
      event.preventDefault();
      var clickedChildNode = event.target.nodeName == "DIV" ? event.target : event.target.parentNode;
      if(event.propertyName.includes('flex')){
        clickedChildNode.classList.toggle('open-active');
      }
    }

    panelsContainer.addEventListener("click", toggleOpen);
    panelsContainer.addEventListener("transitionend", toggleActive);

However, I didn’t really like that we have a eventlistener just to delay the text flying in a bit when I know it will always fire after the click event…

So I choose to go with a timeout of 600ms on the toggle for open-active instead for my final solution:

    const panelsContainer = document.querySelector('.panels');
    function toggleOpen(){
      event.preventDefault();
      var clickedChildNode = event.target.nodeName == "DIV" ? event.target : event.target.parentNode;
      clickedChildNode.classList.toggle('open');
      setTimeout(function(){
        clickedChildNode.classList.toggle('open-active');
      }, 600);
    }
    panelsContainer.addEventListener("click", toggleOpen);

Add your comment