Не понимаю почему код не работает...все вроде сделал правильно но выходит ошибка в консоли когда и API ключ нормальный код города тоже: https://codepen.io/serghei7/pen/mdMxajK
const param = {
"url": "https://api.openweathermap.org/data/2.5/",
"appid": "2cdb83734e4ed8fc7926b97946f03da4"
}
function getWeather() {
const cityId = document.querySelector('.city_1').value;
fetch(`${param.url}weather?id=${cityId}&units=metric&APPID=${param.appid}`)
.then(function (resp) { return resp.json() })
.then(function (data) {
console.log(data);
document.querySelector('.package-name').textContent = data.name;
document.querySelector('.price').innerHTML = Math.round(data.main.temp - 273) + '°';
document.querySelector('.disclaimer').textContent = data.weather[0]['description'];
document.querySelector('.disc').innerHTML = (data.main.humidity) + '%';
document.querySelector('.features li').innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0]['icon']}@2x.png">`;
});
}
document.querySelector('#city').onchange = getWeather;
function createSelect() {
let divElem = document.getElementById("city");
let selectList = document.createElement("select");
selectList.setAttribute("class", "city_1");
divElem.appendChild(selectList);
const cities = {
0: "Select City",
23232: "London",
33456: "Minsk",
703446: "Kyiv",
3084826: "Gdansk"
}
let myArray = [];
for (let key in cities) {
var optionList = document.createElement("option");
optionList.setAttribute("value", key);
myArray = cities[key];
optionList.textContent = myArray;
selectList.appendChild(optionList);
}
}
document.querySelector('.g-button').onclick = createSelect;
.text-center {
text-align: center;
}
.g-button {
margin-left: 15px;
border: solid 2px #4caf50;
width: 200px;
margin-bottom: 30px;
}
.city_1 {
margin-left: 15px;
border: solid 2px #4caf50;
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div id="city">
<button class="g-button">Generate City</button>
</div>
<div class="pricing-table row">
<div class="package featured">
<p class="package-name">City</p>
<hr>
<p class="price">Degrees </p>
<p class="disclaimer">Clouds</p>
<hr>
<p>Humidity</p>
<p class="disc"></p>
<hr>
<ul class="features">
<li>SKY</li>
</ul>
<button class="button-primary">Go</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>