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

add cards

Browse Source
This commit is contained in:
madarsbiss 2021-07-20 20:24:16 +03:00
parent 8c62ea92ad
commit 79547da7d3
3 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
pages/index.js
View File

@ -94,11 +94,6 @@ export default function Home() {
/>
{weatherData && (
<div className={styles.statsBox}>
<div className={styles.statsCard}>Stats card1</div>
<div className={styles.statsCard}>Stats card2</div>
<div className={styles.statsCard}>
Visibility: {weatherData.visibility / 1000} km
</div>
<div className={styles.statsCard}>
<p>Humidity</p>
<div className={styles.statsCardContent}>
@ -114,7 +109,6 @@ export default function Home() {
</div>
</div>
</div>
<div className={styles.statsCard}>
<p>Wind speed</p>
<div className={styles.statsCardContent}>
@ -130,6 +124,39 @@ export default function Home() {
</div>
</div>
</div>
<div className={styles.statsCard}>
<p>Wind direction</p>
<div className={styles.statsCardContent}>
<Image
alt="weatherIcon"
src={`/icons/014-compass.png`}
height="100px"
width="100px"
/>
<div>
<h1>{degToCompass(weatherData.wind.deg)}</h1>
</div>
</div>
</div>
<div className={styles.statsCard}>
<p>Visibility</p>
<div className={styles.statsCardContent}>
<Image
alt="weatherIcon"
src={`/icons/binocular.png`}
height="100px"
width="100px"
/>
<div>
<h1>{weatherData.visibility / 1000}</h1>
<p>Km</p>
</div>
</div>
</div>
{/* <div className={styles.statsCard}>
Visibility: {weatherData.visibility / 1000} km
</div> */}
{/* <div className={styles.statsCard}>
<p>
Wind:{" "}

BIN
public/icons/binocular.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

4
styles/Home.module.css
View File

@ -19,12 +19,12 @@
.locationTitle {
font-size: 38px;
margin-bottom: 20px;
margin-bottom: 10px;
}
.weatherDescription {
font-size: 24px;
margin-bottom: 30px;
margin-bottom: 20px;
}
.statsWrapper {