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

add ui cards

Browse Source
This commit is contained in:
madarsbiss
2021-07-20 19:34:34 +03:00
parent 553096f8a1
commit 8c62ea92ad
59 changed files with 87 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
pages/index.js
View File

@@ -69,9 +69,9 @@ export default function Home() {
/>
<h1 className={styles.mainTemp}>
{Math.round(weatherData.main.temp)}°
{Math.round(weatherData.main.temp)}°C
</h1>
<p>Feels like {Math.round(weatherData.main.feels_like)}°</p>
<p>Feels like {Math.round(weatherData.main.feels_like)}°C</p>
<p>
Time:{" "}
@@ -86,7 +86,7 @@ export default function Home() {
type="text"
className={styles.searchInput}
defaultValue={defaultValue}
placeholder="🔍 Search a city ..."
// placeholder="🔍 Search a city ..."
value={input}
onFocus={(e) => (e.target.value = "")}
onChange={(e) => setInput(e.target.value)}
@@ -94,33 +94,98 @@ export default function Home() {
/>
{weatherData && (
<div className={styles.statsBox}>
<div>Stats card1</div>
<div>Stats card2</div>
<div>Visibility: {weatherData.visibility / 1000} km</div>
<div>
<p>Humidity: {weatherData.main.humidity}</p>
<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>
<div className={styles.statsCard}>
<p>Humidity</p>
<div className={styles.statsCardContent}>
<Image
alt="weatherIcon"
src={`/icons/025-humidity.png`}
height="100px"
width="100px"
/>
<div>
<h1>{weatherData.main.humidity}</h1>
<p>%</p>
</div>
</div>
</div>
<div className={styles.statsCard}>
<p>Wind speed</p>
<div className={styles.statsCardContent}>
<Image
alt="weatherIcon"
src={`/icons/017-wind.png`}
height="100px"
width="100px"
/>
<div>
<h1>{weatherData.wind.speed}</h1>
<p>Km/h</p>
</div>
</div>
</div>
{/* <div className={styles.statsCard}>
<p>
Wind:{" "}
{` ${weatherData.wind.speed} ${degToCompass(
weatherData.wind.deg
)}`}
</p>
</div>
<div style={{ padding: "20px", border: "1px solid grey" }}>
<p>
<Image
alt="weatherIcon"
src={`/icons/wind.png`}
height="100px"
width="100px"
/>
</div> */}
<div className={styles.statsCard}>
<p>Sunrise</p>
<div className={styles.statsCardContent}>
<Image
alt="weatherIcon"
src={`/icons/040-sunrise.png`}
height="100px"
width="100px"
/>
<div>
<h1>4:31</h1>
<p>AM</p>
</div>
</div>
{/* <p>
Sunrise:{" "}
{new Date(
weatherData.sys.sunrise * 1000 + weatherData.timezone * 1000
).toLocaleString("en-US")}
</p>
<p>
</p> */}
{/* <p>
Sunset:{" "}
{new Date(weatherData.sys.sunset * 1000).toLocaleString(
"en-US"
)}
</p>
</p> */}
</div>
<div className={styles.statsCard}>
<p>Sunset</p>
<div className={styles.statsCardContent}>
<Image
alt="weatherIcon"
src={`/icons/041-sunset.png`}
height="100px"
width="100px"
/>
<div>
<h1>10:02</h1>
<p>PM</p>
</div>
</div>
</div>
</div>
)}