projects page with search and sort function in javascript

Question

I recently started to create a website to show some of my projects. This is my first website, so I’m quite new to it. Now I’m trying to create a search function with a category tab and a sort function. That looks like this:

searchbar

Category’s

sort options

I found a code for the search bar already,

**

how do I implement the category and sort function into my javascript?

**

I have created a database with json, that looks like this:

[
    {
        "name": "",
        "discription": "",
        "image": "",
        "link": "",
        "date": "",
        "category": "",
        "tag": ""
      }
     ]

The current javascript:

const projectsList = document.getElementById('projectsList');
const searchBar = document.getElementById('searchBar'); 
let hpprojects = [];

searchBar.addEventListener, searchBar.addEventListener('keyup', (e) => {
    const searchString = e.target.value.toLowerCase();

    const filteredprojects = hpprojects.filter((project) => {
        return (
            project.name.toLowerCase().includes(searchString) ||
            project.discription.toLowerCase().includes(searchString) ||
            project.tag.toLowerCase().includes(searchString) ||
            project.type.toLowerCase().includes(searchString)
        );
    });
    displayprojects(filteredprojects);
});

const loadprojects = async () => {
    try {
        const res = await fetch('data/projects.json');
        hpprojects = await res.json();
        displayprojects(hpprojects);
    } catch (err) {
        console.error(err);
    }
};

const displayprojects = (projects) => {
    const htmlString = projects
        .map((project) => {
            return `
            <div class="card" style="background-image: url('${project.image}');background-position: center">
                <div class="card-body">
                    <h2 class="card-title">${project.name}</h2>
                    <p>${project.discription}</p>
                    <a href="${project.link}" class="button">Learn more</a>
                </div>
            </div>
        `;
        })
        .join('');
    projectsList.innerHTML = htmlString;
};

loadprojects();