connecting a dropdown menu to filter a dynamic gallery

Hi, I’ve spent hours going through several similar threads and watching videos on this topic but I cant figure out how to connect a dropdown menu to a filter a gallery. I’ve added a dynamic gallery and on the same page have create a dropdown menu but I dont know what code / steps are required to link the drop down menu choices to actually filter the gallery below it. Attached is a screenshot of the page setup, any advice would appreciated, obviously i’m not a coder which is I went with Wix but this seemingly simple function is beyond my skills

Just a simple quick maden example for you.
It is surely not completed or perfekt, but it should you show the first step how to code with gallary…

import wixData from 'wix-data';

$w.onReady(function() {
    wixData.query('Materials')
        .find()
        .then(result => {
            console.log(result)
            console.log(result.items)
            console.log(result.items.length)
            console.log(result.items[0].image)

 for (var i = 0; i < result.items.length; i++) { 
 let items = $w("#gallery1").items;
                items.push({
 "src":          result.items[i].image,
 "description":  "Description"+i,
 "title":        "Title"+i
                });
                $w('#gallery1').items = items;
            }
    });
});

Here an example…
https://www.media-junkie.com/galary-filter