Wsrtjtyk

I'm pretty new to coding with JS, so I can't seem to find out how to create a dropdown filtermenu that can filter the content to show only certain events on my page.

Ask away if you need more information, this is also my 1st Stackoverflow post, so I don't know how much to include.

Thank you in advance!

HTML

<section id="events">

        <main>

            <section class="container" data-container></section>

            <template data-template>

            <article class="postListview">

                <div class="card middle">

                     <div class="front">

                <img src="" alt="">

                    </div>

                 <div class="back">

                     <div class="back-content middle">

             <h2 data-title></h2>

             <div data-text></div>

                <div data-pris></div>

                <div data-tid></div>

                <div data-sted></div>

                </div>

                     </div>

                    </div>

             </article>

         </template>

        </main>

JS

<script>

document.addEventListener("DOMContentLoaded", getJSON);



    let posts;

    let postTemplate = document.querySelector("[data-template]");

    let postContainer = document.querySelector("[data-container]");



    async function getJSON() {

        let jsonData = await fetch("http://www.rigmordesign.com/kea/huset/wordpress/wp-json/wp/v2/events");

        posts = await jsonData.json();

        visPosts();

    }



    function visPosts() {

        console.log(posts);

        posts.forEach(post => {

            let klon = postTemplate.cloneNode(true).content;

            klon.querySelector("[data-title]").textContent = post.title.rendered;

            klon.querySelector("[data-text]").innerHTML = post.content.rendered;



            klon.querySelector("[data-pris]").innerHTML = post.acf.pris;

            klon.querySelector("[data-tid]").innerHTML = post.acf.tid;

            klon.querySelector("[data-sted]").innerHTML = post.acf.sted;

            klon.querySelector("img").src = post.acf.billede;

            postContainer.appendChild(klon);

        })

    }

</script>