edit ui

pages/index.js

@@ -19,11 +19,13 @@ export default function Home() {
 
   return (
     <div className={styles.wrapper}>
-      <h1>My weather app {input}</h1>
-      <input type="text" onChange={(e) => setInput(e.target.value)} />
-      <button onClick={clickHandler}>Send</button>
+      {/* <h1>My weather app {input}</h1> */}
+
       {weatherData && (
         <>
+          <h1>
+            {weatherData.name}, {weatherData.sys.country}
+          </h1>
           <p>{weatherData.weather[0].description}</p>
           <Image
             alt="weatherIcon"
@@ -32,13 +34,17 @@ export default function Home() {
             width="300px"
           />
 
-          <p>
-            {weatherData.name}, {weatherData.sys.country}
-          </p>
           <h1 className={styles.mainTemp}>
             {Math.round(weatherData.main.temp)}°
           </h1>
           <p>Feels like {weatherData.main.feels_like}°</p>
+          <input
+            className={styles.search}
+            defaultValue="Search city"
+            type="text"
+            onChange={(e) => setInput(e.target.value)}
+          />
+          <button onClick={clickHandler}>Send</button>
         </>
       )}
     </div>

styles/Home.module.css

@@ -3,8 +3,19 @@
   margin: 0 auto;
   /* border: 1px solid grey; */
   text-align: center;
+  padding: 30px;
 }
 
 .mainTemp {
   font-size: 84px;
 }
+
+.search {
+  margin-top: 300px;
+  height: 30px;
+  width: 200px;
+  border-radius: 10px;
+  border: none;
+  color: rgb(224, 237, 241);
+  padding: 0 10px;
+}