// makes it so the nav bar follows you as you scroll
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}


// for card allignment - allows filtering of results
function showAllCards() {
    const cards = document.querySelectorAll(`.card`);
    
    cards.forEach((item) => {
        item.style.display = null;
    });

    document.getElementById("all").setAttribute('data-selected', true);
    document.querySelectorAll(`.pill:not([id="all"])`).forEach((pill) => pill.removeAttribute("data-selected"));
}

function showCategory(category) {
    const CategoryItems = document.querySelectorAll(`.card[data-${category}]`);
    const AllElse = document.querySelectorAll(`.card:not([data-${category}])`);
    document.getElementById(category).setAttribute('data-selected', true);
    document.querySelectorAll(`.pill:not([id="${category}"])`).forEach((pill) => pill.removeAttribute("data-selected"));

    CategoryItems.forEach((item) => {
        item.style.display = null;
    });

    AllElse.forEach((item) => {
        item.style.display = 'none';
    });

    document.getElementById("all").removeAttribute('data-selected');
}