Mathis/forecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add flex center

Browse Source
This commit is contained in:
madarsbiss 2021-07-21 13:03:15 +03:00
parent 3cb019e1b9
commit b7e0e0a24c
3 changed files with 84 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
pages/index.js
View File

@ -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 kmToM = (km) => (km / 1.609).toPrecision(2);
const mpsToMph = (mps) => (mps * 2.236936).toFixed(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() {
]
}
,{" "}
{
convertTime(weatherData.dt, weatherData.timezone)[0].split(
":"
)[0]
}
:00
{systemUsed == "metric"
? convertTime(weatherData.dt, weatherData.timezone)[0].split(
":"
)[0]
: timeToAMPM(
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>
{
convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[0]
}
{systemUsed == "metric"
? convertTime(
weatherData.sys.sunrise,
weatherData.timezone
)[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>
{
convertTime(
weatherData.sys.sunset,
weatherData.timezone
)[0]
}
{systemUsed == "metric"
? convertTime(
weatherData.sys.sunset,
weatherData.timezone
)[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>

6
styles/Home.module.css
View File

@ -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: none; */
/* border: 2px solid rgb(34, 34, 34); */
border: none;
padding: 0 10px;
color: #303030;
font-size: 20px;

7
styles/globals.css
View File

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