add flex center

pages/index.js

@@ -14,7 +14,7 @@ export default function Home() {
       body: JSON.stringify({ input, systemUsed }),
     });
     const data = await res.json();
-    console.log(data);
+
     setWeatherData({ ...data });
     setInput("");
   };
@@ -39,7 +39,7 @@ export default function Home() {
       "E",
       "ESE",
       "SE",
-      "SSE",
+      "S/SE",
       "S",
       "SSW",
       "SW",
@@ -61,11 +61,28 @@ export default function Home() {
   };
 
   const ctoF = (c) => (c * 9) / 5 + 32;
-  const mpsToMph = (mps) => (mps * 2.236936).toPrecision(3);
+  const mpsToMph = (mps) => (mps * 2.236936).toFixed(2);
-  const kmToM = (km) => (km / 1.609).toPrecision(2);
+  const kmToM = (km) => (km / 1.609).toFixed(1);
+
+  const timeToAMPM = (time) => {
+    let hours = time.split(":")[0];
+    let minutes = time.split(":")[1];
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    // minutes = minutes < 10 ? "0" + minutes : minutes;
+    return hours + ":" + minutes;
+  };
+
+  const isPM = (time) => {
+    let hours = time.split(":")[0];
+    if (hours >= 12) {
+      return "PM";
+    } else {
+      return "AM";
+    }
+  };
 
   const changeSystem = () => {
-    console.log("system changed");
     if (systemUsed == "metric") {
       setSystemUsed("imperial");
     } else {
@@ -128,18 +145,23 @@ export default function Home() {
                 ]
               }
               ,{" "}
-              {
+              {systemUsed == "metric"
-                convertTime(weatherData.dt, weatherData.timezone)[0].split(
+                ? convertTime(weatherData.dt, weatherData.timezone)[0].split(
-                  ":"
+                    ":"
-                )[0]
+                  )[0]
-              }
+                : timeToAMPM(
-              :00
+                    convertTime(weatherData.dt, weatherData.timezone)[0]
+                  ).split(":")[0]}
+              :00{" "}
+              {systemUsed == "imperial"
+                ? isPM(convertTime(weatherData.dt, weatherData.timezone)[0])
+                : ""}
             </h2>
           )}
           <input
             type="text"
             className={styles.searchInput}
-            defaultValue="Search a city..."
+            // defaultValue="Search a city..."
             onFocus={(e) => (e.target.value = "")}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={(e) => something(e)}
@@ -226,14 +248,28 @@ export default function Home() {
                 />
                 <div>
                   <h1>
-                    {
+                    {systemUsed == "metric"
-                      convertTime(
+                      ? convertTime(
-                        weatherData.sys.sunrise,
+                          weatherData.sys.sunrise,
-                        weatherData.timezone
+                          weatherData.timezone
-                      )[0]
+                        )[0]
-                    }
+                      : timeToAMPM(
+                          convertTime(
+                            weatherData.sys.sunrise,
+                            weatherData.timezone
+                          )[0]
+                        )}
                   </h1>
-                  <p>AM</p>
+                  <p>
+                    {systemUsed == "imperial"
+                      ? isPM(
+                          convertTime(
+                            weatherData.sys.sunrise,
+                            weatherData.timezone
+                          )[0]
+                        )
+                      : ""}
+                  </p>
                 </div>
               </div>
             </div>
@@ -248,14 +284,28 @@ export default function Home() {
                 />
                 <div>
                   <h1>
-                    {
+                    {systemUsed == "metric"
-                      convertTime(
+                      ? convertTime(
-                        weatherData.sys.sunset,
+                          weatherData.sys.sunset,
-                        weatherData.timezone
+                          weatherData.timezone
-                      )[0]
+                        )[0]
-                    }
+                      : timeToAMPM(
+                          convertTime(
+                            weatherData.sys.sunset,
+                            weatherData.timezone
+                          )[0]
+                        )}
                   </h1>
-                  <p>PM</p>
+                  <p>
+                    {systemUsed == "imperial"
+                      ? isPM(
+                          convertTime(
+                            weatherData.sys.sunset,
+                            weatherData.timezone
+                          )[0]
+                        )
+                      : ""}
+                  </p>
                 </div>
               </div>
             </div>

styles/Home.module.css

@@ -1,6 +1,6 @@
 .wrapper {
   max-width: 1200px;
-  margin: 0px auto;
+  /* margin: 0px auto; */
   text-align: center;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37);
@@ -63,8 +63,8 @@
 .searchInput {
   margin-bottom: 20px;
   height: 40px;
-  border: 2px solid rgb(34, 34, 34);
+  /* border: 2px solid rgb(34, 34, 34); */
-  /* border: none; */
+  border: none;
   padding: 0 10px;
   color: #303030;
   font-size: 20px;

styles/globals.css

@@ -16,8 +16,11 @@ body {
     rgba(245, 247, 252, 1) 100.2%
   );
   font-family: "Varela Round", sans-serif;
-  min-height: 100vh;
+  height: 100vh;
-  padding-top: 50px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 a {