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}
+
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);
}