ui update

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 (
     <div className={styles.wrapper}>
-      {/* <h1>My weather app {input}</h1> */}
-
       {weatherData && (
         <>
-          <h1>
+          <h1 className={styles.locationTitle}>
             {weatherData.name}, {weatherData.sys.country}
           </h1>
-          <p>{weatherData.weather[0].description}</p>
+          <p className={styles.weatherDescription}>
+            {weatherData.weather[0].description}
+          </p>
           <Image
             alt="weatherIcon"
             src={`/icons/${weatherData.weather[0].icon}.svg`}
@@ -44,20 +45,19 @@ export default function Home() {
             {Math.round(weatherData.main.temp)}°
           </h1>
           <p>Feels like {Math.round(weatherData.main.feels_like)}°</p>
+          <p>Humidity: {weatherData.main.humidity}</p>
+          <p>Wind: {weatherData.wind.speed}</p>
         </>
       )}
       <input
         type="text"
         className={styles.searchInput}
-        defaultValue="Search a city"
+        defaultValue="Search a cities..."
         value={input}
         onFocus={(e) => (e.target.value = "")}
         onChange={(e) => setInput(e.target.value)}
         onKeyDown={(e) => something(e)}
       />
-      <button className={styles.searchBtn} onClick={clickHandler}>
-        Search
-      </button>
     </div>
   );
 }

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