<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="cont">
<div class="request">
<select id="city">
<option value="Kharkiv">Kharkiv</option>
<option value="Kiev">Kiev</option>
<option value="Lviv">Lviv</option>
<option value="Odesa">Odesa</option>
</select>
</div>
<pre id="weather"></pre>
</div>
<script>
const apiKey = "6cc3148bb3b32c3700a98d81defdd8a7";
const container = document.querySelector('#weather');
document.querySelector('#city').addEventListener('change', function () {
const selectedCity = this.value;
const requestGetParams = `q=${encodeURIComponent(selectedCity)}&appid=${apiKey}`;
const requestUrl = `https://api.openweathermap.org/data/2.5/weather?${requestGetParams}`;
fetch(requestUrl).then(
res => res.json()
).then(response => {
container.innerHTML = JSON.stringify(response, null, 4);
});
});
document.querySelector('#city').dispatchEvent(new Event('change'));
</script>
</body>
</html>