'How to use radio and range inputs as a filter

I am trying to make a "store", and I have made the design, and I wanted to make filters for it, but I am not sure how to code them. The in-store items are made using an array, and pushing the image, age and price info in that array. I made 4 radio buttons and named them to filter the age, and a range input to filter the price, any tips?

    <head>
        <title>Store</title>
        
        <style>
        
            #top {
                background-color: hotpink;
                height: 80px;
                display: flex;
                align-items: center;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                font-size: 20px;
            }
            
            img{
                height: auto;
                max-width: 100%;
            }
            
            #filter{
                position: fixed;
                width: 300px;
                height: 900px;
                border-right: solid;
                border-color: #9f2b68;
                border-right-width: 2px;
                padding-left: 15px;
                padding-top: 30px;
                margin: 10px;
            }
            
            #container{
                position: relative;
                display: grid;
                float: right;
                overflow:scroll;
                width:1560px; 
                height: 850px;
                margin: 10px;
                grid-template-columns: 1fr 1fr 1fr;
                grid-gap: 1vh;
            }
            
            .item{
                border-style: solid;
                border-color: #9f2b68;
                margin: 10px;
                border-width: 2px;
            }
            
            ::-webkit-scrollbar {
                display: none;
            }
            
            body{
                background-color: #e2e3e3;
            }
            
            #strtitle{
                padding-left: 30px;
            }
        
        </style>
        
    </head>

    <body>
        <div id="all">
        <div id="top">
            <span class="storetitle" id="strtitle">
            <a style="text-decoration:none"><span style="color:white;font-weight:bold">Store</span></a></span>
        </div>
        
        <div id="filter">
        <div id="age">
            <h2>Age:</h2>
            <p><input type="radio" id="radio1" name="godinebtn">0+</p>
            <p><input type="radio" id="radio2" name="godinebtn">3+</p>
            <p><input type="radio" id="radio3" name="godinebtn">6+</p>
            <p><input type="radio" id="radio4" name="godinebtn">10+</p>
        </div>
        
        <div id="price">
            <h2>Price:</h2>
            <p>0<input type="range">10.000</p>
        </div>
        </div>
        
        <div id="container"></div>
        </div>
        <script>
        //--------------------------
            
            let container = document.querySelector("#container");
            let toys = [];
            let i = 0;
            
            function toysinfo(image, years, price) {
                this.image = image;
                this.years = years;
                this.price = price;
            };
            toys.push(new toysinfo("https://yekupi.blob.core.windows.net/ekupirs/1200Wx1200H/EK000359292_1.image", "0+", "2000"));
            toys.push(new toysinfo("https://poklonizabebu.rs/wp-content/uploads/2022/02/Muzicka-igracka-kuca-Brown-2.jpg", "0+", "1500"));
            toys.push(new toysinfo("https://pertinitoys.com/fajlovi/product/master-wheels-trotinet-p-0282-master-wheels-web-s_5f3fb5d70b71e.jpg", "3+", "1500"));
            toys.push(new toysinfo("https://www.lego.com/cdn/cs/set/assets/blt70237dec0eef084a/10696.jpg?fit=bounds&format=jpg&quality=80&width=1600&height=1600&dpr=1", "3+", "5000"));
            toys.push(new toysinfo("https://img.goglasi.com/img/225234594", "3+", "3000"));
            toys.push(new toysinfo("https://www.kockarium.rs/wp-content/uploads/2019/12/10915_Box5_v29-830x830.jpg", "3+", "2000 RSD"));
            toys.push(new toysinfo("https://www.decjisajt.rs/files/watermark/files/thumbs/files/images/product/2018/01/29/thumbs_1200/thumbs_w/drvena-muzicka-igracka-velika-gitara-91701_1200_1200px_w.jpg", "3+", "9000"));
            
             toys.forEach(t => {
                container.innerHTML += "<div class = 'item'><img src = " + t.image + ">" +
                                       "<p>" + t.years + " " + t.price + " " + "EUR" + "</p>"
                                       "</div>"
                })

            /*
            radio1.forEach((elem,i) =>{
                elem.addEventListener("input", ()=>{
                    
                })
            })*/
            
            
            
            
        </script>
        
    </body>

</html>```

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to use radio and range inputs as a filter

Sources

Related Questions