app.js

let Nav = document.querySelector("ol");
let prev = null;
let input = document.querySelector("#Search")

function filteringCard(evt){
    document.querySelector(".active").classList.remove("active");
    evt.target.classList.add("active")
let Cards = [...document.querySelectorAll(".Card")]

Cards.forEach((el)=>{
     el.classList.add("hide")
    if (el.dataset.name === evt.target.dataset.name || evt.target.dataset.name === "All") {
       el.classList.remove("hide")
    }
})
}



function inputFilter(){

    let card = [...document.querySelectorAll(".filteringCard")]
  let value = input.value.toLowerCase();

  card.forEach(el => {
    let match = el.dataset.name.toLowerCase().includes(value);
    el.style.display = match ? "" : "none";
  });
 }



Nav.addEventListener('click',filteringCard)

input.addEventListener("input",inputFilter)