const API_KEY =
"be97c59d086b45bc695da756bae3e968"
;
const weatherInfo =
document.getElementById(
'weatherInfo'
);
document.getElementById(
'getWeatherBtn'
)
.addEventListener(
'click'
,
function
() {
const cityInput = document.getElementById(
'cityInput'
).value;
if
(cityInput.trim() ===
''
) {
alert(
'Please enter a city name'
);
return
;
}
const units =
'metric'
;
const URL =
`https:
axios.get(URL)
.then(response => {
const data = response.data;
displayWeatherInfo(data);
})
.
catch
(error => {
console.error(
'Error fetching weather data:'
, error);
weatherInfo.innerHTML =
'<p class="text-red-600">
Error fetching weather data. Please try again.
</p>'
;
});
});
function
displayWeatherInfo(data) {
const card = document.createElement(
'div'
);
card.classList
.add(
'bg-gray-800'
,
'text-white'
,
'p-6'
,
'rounded-md'
,
'shadow-md'
);
let backgroundImage =
''
;
if
(data.main.temp < 8) {
backgroundImage =
'url("2.jpg")'
;
}
else
if
(data.main.temp > 20) {
backgroundImage =
'url("1.jpg")'
;
}
card.style.backgroundImage = backgroundImage;
card.innerHTML = `
<h2 class=
"text-2xl font-semibold mb-2"
>
Location: ${data.name}, ${data.sys.country}
</h2>
<div class=
"grid grid-cols-1 md:grid-cols-2 gap-6"
>
<div>
<p class=
"text-lg"
>Temperature: ${data.main.temp}°C</p>
<p class=
"text-lg"
>
Weather: ${data.weather[0].description}
</p>
</div>
<div>
<p class=
"text-lg"
>
Humidity: ${data.main.humidity}%
</p>
<p class=
"text-lg"
>
Wind Speed: ${data.wind.speed} m/s
</p>
<p class=
"text-lg"
>
Visibility: ${data.visibility / 1000} km
</p>
</div>
</div>
`;
weatherInfo.innerHTML =
''
;
weatherInfo.appendChild(card);
}