[Nastya251985]

<form class="block">

<div id="size">
<h4>Size</h4>
<p><input type="radio" id='size1' name='size' value="S">S</p>
<p><input type="radio" id='size2' name='size' value="M">M</p>
<p><input type="radio" id='size3' name='size' value="L">L</p>
</div>


<div id="color">
<h4>Color</h4>
<p><input type="checkbox" id='color1' name='color' value="1">1</p>
<p><input type="checkbox" id='color2' name='color' value="2">2</p>
<p><input type="checkbox" id='color3' name='color' value="3">3</p>
<p><input type="checkbox" id='color4' name='color' value="4">4</p>
<p><input type="checkbox" id='color5' name='color' value="5">5</p>
</div>


<h4>Manufactura</h4>
<p><select multiple="multiple" name="manufactura" id="manufactura">
<option>aaa</option>
<option>b&c</option>
<option>ddd</option>
<option>eee</option>
</select></p>

<!-- Checkbox sale -->
<div class="sale">
<p><input type="checkbox" name="sale" value="распродажа">Распродажа</p>
</div>
</form>

<script>

// === part 1


const checkboxes = document.querySelectorAll('[name="color"]');
const radios = document.querySelectorAll('[name="size"]');
const options = document.querySelectorAll('[name="manufactura"] option');


let url = new URL('http://somesite.com/filter?size=S&color=1,2&manufacturer=aaa,eee');

console.log(`First Url: ${url}`);


let search = new URLSearchParams(url.search);

let size = search.get('size');

let colors = search.get('color').split(',');

let manufacturers = search.get('manufacturer').split(',');


let len1 = checkboxes.length;

let len2 = colors.length;

let len3 = radios.length;

let len4 = manufacturers.length;

let len5 = options.length;

for (let i = 0; i < len1, i < len3; i++) {

if (radios[i].value == size) radios[i].checked = true;

for (let j = 0; j < len2; j++) {

if (checkboxes[i].value == colors[j]) checkboxes[i].checked = true;

};

};

options.forEach(el => {

if (manufacturers.includes(el.value)) el.selected = true;

});


// ===== part 2


document.getElementById("color").addEventListener( 'input', createNewUrl);
document.getElementById('size').addEventListener(' input', createNewUrl);
document.getElementById('manufactura').addEventLis tener('input', createNewUrl);

const urlObj = {};
urlObj.first_part_url = `http://Somesite.com/filter?`;
urlObj.size_part_url = 'size=';
urlObj.color_part_url = '&color=';
urlObj.manufacturer_part_url = '&manufacturer=';


function createNewUrl() {

// КАКОЙ ЦИКЛ ЗДЕСЬ СОЗДАТЬ?????

urlObj.size_part_url = `size=${let_size}`;
urlObj.color_part_url = `&color=${let_color}`;
urlObj.manufacturer_part_url = `&manufacturer=${let_manuf}`;
urlObj.full_url = urlObj.first_part_url + urlObj.size_part_url + urlObj.color_part_url + urlObj.manufacturer_part_url;
consoleLog(urlObj.full_url);
}

function consoleLog(url) {
console.log(`Second Url: ${url}`);
}


</script>