diff --git a/pages/index.js b/pages/index.js index 37f275c..c81db0b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -13,6 +13,7 @@ export default function Home() { body: JSON.stringify({ input }), }); const data = await res.json(); + console.log(data); setWeatherData({ ...data }); setInput(""); }; @@ -25,14 +26,14 @@ export default function Home() { return (
- {/*

My weather app {input}

*/} - {weatherData && ( <> -

+

{weatherData.name}, {weatherData.sys.country}

-

{weatherData.weather[0].description}

+

+ {weatherData.weather[0].description} +

weatherIcon

Feels like {Math.round(weatherData.main.feels_like)}°

+

Humidity: {weatherData.main.humidity}

+

Wind: {weatherData.wind.speed}

)} (e.target.value = "")} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => something(e)} /> -
); } diff --git a/styles/Home.module.css b/styles/Home.module.css index 1f3d0af..026a542 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,7 +1,6 @@ .wrapper { - max-width: 800px; + max-width: 600px; margin: 30px auto; - /* border: 1px solid grey; */ text-align: center; padding: 30px; background: rgba(255, 255, 255, 0.25); @@ -12,28 +11,27 @@ border: 1px solid rgba(255, 255, 255, 0.18); } +.locationTitle { + font-size: 38px; + margin-bottom: 20px; +} + +.weatherDescription { + font-size: 24px; + margin-bottom: 30px; +} + .mainTemp { font-size: 84px; } .searchInput { - margin-top: 300px; + margin-top: 200px; height: 40px; width: 300px; - border-radius: 5px; - border: 2px solid rgb(80, 80, 80); - - background-color: #d3ddea; + border: none; padding: 0 10px; color: #242424; font-size: 20px; -} - -.searchBtn { - background-color: limegreen; - width: 100px; - height: 40px; - border-radius: 5px; - font-size: 20px; - padding: 0 10px; + background: rgba(255, 255, 255, 0.25); }