Extensible Plain JS gallery with Jquery example

This is one of my old projects that i have decided to release to the public
The JavaScript loads files from a directory, tags them and displays them to the website allowing easy extensibility for large amount of files
There is a plain js example or jquery example if thats your cup of tea

How does this work?

First it gets all the loaded elements from the baseDir directory

var elements = xhr.response.getElementsByTagName("a");

Then it matches file extensions of your choice and creates html elements to contain all of them

if (x.href.match(/\.(jpg)$/)) {
    ...
}

The JS script searches for strings in the file names of those images and matches them to the datatypes list

var datatypes = ["landscape", "flower", "pet", "cat", "dog"]

if a match is found, it adds the coresponding class to div containing the image

for (var i of datatypes)
    if (x.href.indexOf(i) > -1) {
        imagebox.classList.toggle(i, true)
        console.log(imagebox.classList); // Log DOMTolenList
}

note: all of those have an imagebox class to allow viewing all of them
Finally it displays those elements containing the value in the datatypes list after selecting a category in the navbar

document.querySelectorAll('.list').forEach(list => {
    list.addEventListener('click', e => {
        const value = e.target.dataset.filter; // Target
        document.querySelectorAll('.imagebox').forEach(imagebox => {
            // If All is selected, just display all of those elements
            if (value == 'All') {
            imagebox.style.display = 'block'
            } else {
            imagebox.style.display = imagebox.classList.contains(value) ? 'block' : 'none';
            }
        });
        ...
    });
});

Finally Adds/Removes the .active class on selected category

...
        e.target.classList.add('active');
        Array.from(e.target.parentNode.children).forEach(sibling => {
            if (sibling != e.target) {
            sibling.classList.remove('active');
            }
        });

---