I was trying to do easy forecast app using javascript and API from https://openweathermap.org.
(
I was watching ytb tutorial and doesn't work for me
https://www.youtube.com/watch?v=GXrDEA3SIOQ&t=1s
)
But everytime when I enter the city all that happens is the alert pops up saying “Wrong city name!”.
Do you have any idea how to fix it?
Thank you
correct output is on the screen below
var button= document.querySelector('.button');
var inputValue = document.querySelector('.inputValue');
var name = document.querySelector('.name');
var temp = document.querySelector('.temp');
var desc = document.querySelector('.desc');
button.addEventListener('click', function(name){
fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue.value+'&appid=497df9aa02775d8c6cdec3c6d0cd159c')
.then(response => response.json())
.then(data => {
var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];
main.innerHTML = nameValue;
desc.innerHTML = "Desc - "+descValue;
temp.innerHTML = "Temp - "+tempValue;
input.value ="";
})
.catch(err => alert("Wrong city name!"));
})
<!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">
<title>OpenWeatherMap Api</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="input">
<input type="text" placeholder="Enter the city" class="inputValue">
<input type="submit" value="Submit" class="button">
</div>
<div class="display">
<h1 class="name" id="name"></h1>
<p class="temp"></p>
<p class="desc"></p>
</div>
<script src="app.js"></script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
