FreeCodeCamp/CodeReview

  function handleRevealerAnim({...args}, cb){
      return setTimeout(function() {
          args.target.classList.add(args.anim)
          cb && cb();
      }, args.ms);
  }


  function createLi(pages){
      const paginationContainer = document.querySelector('.pagination');
      for(var i=0; i < pages.length; i++){
        const targetText = pages[i].childNodes[3].childNodes[1].innerText;
        const LI = document.createElement('LI');
        const NUM = document.createElement('SPAN');
        const TEXTCONTAINER = document.createElement('SPAN');
        const textNode = document.createTextNode(targetText);
        const textNodeIndex = document.createTextNode(i);

        LI.appendChild(NUM);
        i === 0 ? LI.classList.add('pagination-li', 'active-pagination') : LI.classList.add('pagination-li');
        i === 0 ? TEXTCONTAINER.classList.add('pagination-title', 'active-text') : TEXTCONTAINER.classList.add('pagination-title', 'none')
        LI.appendChild(TEXTCONTAINER);
        TEXTCONTAINER.appendChild(textNode)
        NUM.appendChild(textNodeIndex)
        paginationContainer.appendChild(LI);
      }

  }


  (function() {
      const section = document.querySelector('.section')
      const tab = document.querySelector('body')
      const li = document.getElementsByClassName('pagination-li');      
      let pages = document.getElementsByClassName('work'),
      currentPage = 0,
      prev;       
      createLi(pages)
      handleRevealerAnim({
            target: section.childNodes[3].children[0], 
            ms: 300, 
            anim: 'scale-out-hor-right'
      });
      handleRevealerAnim({
            target: section.childNodes[5].children[0], 
            ms: 400, 
            anim: 'scale-out-ver-top'
      });
      handleRevealerAnim({
            target: section.childNodes[1], 
            ms: 400, 
            anim: 'slide-out-left'
      });
      handleRevealerAnim({
            target: section, 
            ms: 2000, 
            anim: 'slide-out-left'
      }, () => pages[currentPage].style.display = 'block');

      window.addEventListener('wheel', function(e) {
        console.log(e.deltaY)
        handleSections(e.deltaY)
      });

      const links = document.querySelectorAll('a');
      for(let a = 0; a < links.length; a++){
        links[a].addEventListener('click', function(e) {
          console.log(10)
        });
      }

    function handleSections(delta){
      var direction = (delta < 0) ? 'up' : 'down';
      if(direction == 'down' && currentPage <= pages.length - 2){
          prev = currentPage;
          currentPage = currentPage + 1;
          scrollIntoSection({
            prev,
            currentPage,
            pages
          })

      } else if(direction == 'up' && currentPage > 0) {
          prev = currentPage;
          currentPage--;
          scrollIntoSection({
            prev,
            currentPage,
            pages
          })
      }
    }

    function scrollIntoSection({...opts}){
      opts.pages[opts.prev].childNodes[1].classList.add('scale-out-hor-right');

      setTimeout(function(){
            opts.pages[opts.prev].childNodes[1].classList.remove('scale-out-hor-right');
            li[opts.prev].classList.remove('active-pagination'); 
            li[opts.prev].childNodes[1].classList.remove('active-text')


            opts.pages[opts.prev].style.display = 'none';
            opts.pages[opts.currentPage].style.display = 'block';
            li[opts.currentPage].classList.add('active-pagination');
            li[opts.currentPage].childNodes[1].classList.add('active-text'); 

      }, 500)
      opts.pages[opts.currentPage].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
    }  

  })();