Javascript-форум - Фильтрация товаров из файла JSON по по трем различным фильтрам на чистом JS?

Здраствуйте, в JS я новичок, поэтому хотел бы попросить помощи в более опытных программистов. Что на данный момент у меня есть:
1) я сверстал фильтры :
а) фильтр по списку
б) фильтр по чекбоксам
в) фильтр по цене с ползунком и инпутами

2) есть файл json где хранятся четыре товары(объекты)
3) есть JS файл который выводит эти товары на страницу

Вот как сейчас это выглядит:
http://i.piccy.info/i9/d00c8e6e5d116...reenshot_4.jpg

Мне нужно чтобы в начале отображались все товары а уже когда я буду ставить галочки, прописывать цену или выбирать из списка категорию, отображались только выбранные товары.
Знаю в интернете полно готовых решений на jquery но в моем маленьком проекте должен быть чистый js.

А вот код того что есть:
HTML:

<div id="filters">
     <div class="country"><h2>Country</h2>
       <select id="country">
       <option value="hide">-- Country --</option>
       <option value="turkey">Turkey</option>
       <option value="china">China</option>
       <option value="france">France</option>
       <option value="italy">Italy</option>   
       </select>     
     </div>
    
      <div class="size"><h2>Size</h2>
      <div id="myDropdown">
        <input type="checkbox" class="btn" value="S">S<br>
        <input type="checkbox" class="btn" value="M"> M<br>
        <input type="checkbox" class="btn" value="L"> L<br>
        <input type="checkbox" class="btn" value="XL"> XL<br>
      </div>
      </div>
      
     <div class="price"><h2>Price</h2>
       <div class="price-input"><input class="input-text" type="text"  value="">&nbsp;-&nbsp;</div>
       <div class="price-input"><input class="input-text" type="text"  value="">&nbsp;usd&nbsp;</div>
       <button id="submitprice" type="submit">OK</button>
          <input type="range" min="1" max="100" value="50">
    </div>
</div>
           
<div id="goods"></div>

<script>var sex = 'male'</script>

JS:

document.addEventListener('DOMContentLoaded', function (e) {               
  loadGoods();
});

function loadGoods() {
    $.getJSON('goods.json', function (data) {
        var out = '';
        for (var key in data){
            if (data[key]['sex'] != sex) { continue; } 
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<img src="'+data[key].image+'">';
            out+='<p>Цена: '+data[key]['cost']+'</p>';
            out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
            out+='</div>';
        }
         document.getElementById('goods').innerHTML = out; 
    });
}

JSON:

{
  "Рубашка №1" : {
      "sex" : "male",
    "name" : "Рубашка №1",
    "cost" : 1000,
    "country" : "argentina",
    "image" : "http://i.piccy.info/i9/9921ed03bf45751d45447b15e78be751/1566814909/19890/1334636/1.jpg",
    "size": "S"
  },
  "Рубашка №2" : {
      "sex" : "male",
    "name" : "Рубашка №2",
    "cost" : 1200,
    "country" : "argentina",
    "image" : "http://i.piccy.info/i9/acc4df9b14e48a42d7cd353e923673e7/1566814962/22015/1334636/2.jpg",
    "size": "M"
  },
  "Рубашка №3" : {
      "sex" : "male",
    "name" : "Рубашка №3",
    "cost" : 1700,
    "country" : "argentina",
    "image" : "http://i.piccy.info/i9/174610be67bfea39f99c956885ae3786/1566815027/25896/1334636/3.jpg",
    "size": "L"
  },
"Рубашка №4" : {
    "sex" : "male",
    "name" : "Рубашка №4",
    "cost" : 2000,
    "country" : "argentina",
    "image" : "http://i.piccy.info/i9/e2e5c6cb274121b9898b7d45a085130f/1566815049/29582/1334636/4.jpg",
     "size": "XL"
  }
}

СSS:

#filters{
    width: 200px;
    height: 800px;
    border: 1px solid black;
    float:left;
    margin: 0;
}
.price-input{
    float:left;
}
.input-text{
    width: 50px;
   
}
.single-goods {
    width: 280px;
    height: 530px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
}