add weather icons

This commit is contained in:
madarsbiss 2021-07-16 23:29:48 +03:00
parent 4593c3cabd
commit 76c99cd18e
3 changed files with 15 additions and 3 deletions

1
.env.example Normal file
View File

@ -0,0 +1 @@
OPENWEATHER_API_KEY=lngstr20

View File

@ -1,3 +1,6 @@
module.exports = { module.exports = {
reactStrictMode: true, reactStrictMode: true,
} images: {
domains: ["openweathermap.org"],
},
};

View File

@ -16,6 +16,7 @@ export default function Home() {
setWeatherData({ ...data }); setWeatherData({ ...data });
console.log(data); console.log(data);
}; };
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<h1>My weather app {input}</h1> <h1>My weather app {input}</h1>
@ -23,9 +24,16 @@ export default function Home() {
<button onClick={clickHandler}>Send</button> <button onClick={clickHandler}>Send</button>
{weatherData && ( {weatherData && (
<> <>
<h1> <Image
alt="weatherIcon"
src={`http://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`}
height="300px"
width="300px"
/>
<p>
{weatherData.name}, {weatherData.sys.country} {weatherData.name}, {weatherData.sys.country}
</h1> </p>
<h1 className={styles.mainTemp}> <h1 className={styles.mainTemp}>
{Math.round(weatherData.main.temp)}° {Math.round(weatherData.main.temp)}°
</h1> </h1>