// COUNTER ANIMATION
const counters = document.querySelectorAll('.counter');

counters.forEach(counter => {

  counter.innerText = '0';

  const updateCounter = () => {

    const target = +counter.getAttribute('data-count');
    const current = +counter.innerText;

    const increment = target / 100;

    if(current < target){

      counter.innerText = `${Math.ceil(current + increment)}`;

      setTimeout(updateCounter, 20);

    }else{

      counter.innerText = target;
    }
  };

  updateCounter();
});


// FILTER PROJECTS

const filterButtons = document.querySelectorAll('.filter-btn');
const projectItems = document.querySelectorAll('.project-item');

filterButtons.forEach(button => {

  button.addEventListener('click', () => {

    // ACTIVE BUTTON
    filterButtons.forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');

    const filter = button.getAttribute('data-filter');

    projectItems.forEach(item => {

      if(filter === 'all'){

        item.style.display = 'block';

      }else{

        if(item.classList.contains(filter)){

          item.style.display = 'block';

        }else{

          item.style.display = 'none';
        }
      }
    });
  });
});