add search fx

pages/index.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import styles from "../styles/Home.module.css";
 import Image from "next/image";
 
@@ -14,7 +14,13 @@ export default function Home() {
     });
     const data = await res.json();
     setWeatherData({ ...data });
-    console.log(data);
+    setInput("");
+  };
+
+  const something = (event) => {
+    if (event.keyCode === 13) {
+      clickHandler();
+    }
   };
 
   return (
@@ -41,13 +47,17 @@ export default function Home() {
         </>
       )}
       <input
-        className={styles.search}
-        defaultValue="Search city"
         type="text"
+        className={styles.searchInput}
+        defaultValue="Search a city"
+        value={input}
         onFocus={(e) => (e.target.value = "")}
         onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => something(e)}
       />
-      <button onClick={clickHandler}>Search</button>
+      <button className={styles.searchBtn} onClick={clickHandler}>
+        Search
+      </button>
     </div>
   );
 }

styles/Home.module.css

@@ -16,14 +16,24 @@
   font-size: 84px;
 }
 
-.search {
+.searchInput {
   margin-top: 300px;
   height: 40px;
   width: 300px;
-  border-radius: 25px;
-  border: 1px solid rgb(209, 209, 252);
+  border-radius: 5px;
+  border: 2px solid rgb(80, 80, 80);
 
-  color: rgb(224, 237, 241);
+  background-color: #d3ddea;
+  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;
-  color: grey;
 }