Help me solve the problem.
-
I don't understand why the code doesn't work... everything seems to have done the right thing, but there's a mistake in the console when and API the key to the normal code of the city, too: 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) + '&deg;'; 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>
-
And you check the city codes, the codes you' identified are not found, but here's the code.
2172797and on requesthttps://api.openweathermap.org/data/2.5/weather?id=2172797&units=metric&APPID=2cdb83734e4ed8fc7926b97946f03da4and it does.
{"coord":{"lon":145.7667,"lat":-16.9167},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"base":"stations","main":{"temp":25.52,"feels_like":26.32,"temp_min":25.04,"temp_max":25.97,"pressure":1009,"humidity":84},"visibility":10000,"wind":{"speed":0.51,"deg":210},"clouds":{"all":40},"dt":1636287104,"sys":{"type":1,"id":9490,"country":"AU","sunrise":1636227401,"sunset":1636273472},"timezone":36000,"id":2172797,"name":"Cairns","cod":200}The js code itself is fine
