Skip to content

Hovedside har liste av byer med base info #22

Merged
merged 5 commits into from
Sep 17, 2026
+138 −55
Merged

Hovedside har liste av byer med base info #22

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3936b32
get weather from 4 cities
Sep 15, 2026
aa4956d
get temperatures for next 3 days
Sep 17, 2026
e29c3f8
make it look nice
Sep 17, 2026
b3529e5
titles and spacing
Sep 17, 2026
bc6fbae
Merge branch 'main' into feat/hovedside-liste
kristnu Sep 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 13 additions & 30 deletions vær/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

119 changes: 3 additions & 116 deletions vær/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,124 +1,11 @@
import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import useGetWeather from './hooks/fetchWeather/useGetWeather'
import LocationList from './components/location-list'

function App() {
const [count, setCount] = useState(0)
// Example fetch, plz remove asap
const { result } = useGetWeather(67, 67, 420)

return (
<>
<section id="center">
<div className="hero">
<img src={heroImg} className="base" width="170" height="179" alt="" />
<img src={reactLogo} className="framework" alt="React logo" />
<img src={viteLogo} className="vite" alt="Vite logo" />
</div>
<div>
{JSON.stringify(result)}
<h1>Get started</h1>
<p>
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
</p>
</div>
<button
type="button"
className="counter"
onClick={() => setCount((count) => count + 1)}
>
Count is {count}
</button>
</section>

<div className="ticks"></div>

<section id="next-steps">
<div id="docs">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#documentation-icon"></use>
</svg>
<h2>Documentation</h2>
<p>Your questions, answered</p>
<ul>
<li>
<a href="https://vite.dev/" target="_blank">
<img className="logo" src={viteLogo} alt="" />
Explore Vite
</a>
</li>
<li>
<a href="https://react.dev/" target="_blank">
<img className="button-icon" src={reactLogo} alt="" />
Learn more
</a>
</li>
</ul>
</div>
<div id="social">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#social-icon"></use>
</svg>
<h2>Connect with us</h2>
<p>Join the Vite community</p>
<ul>
<li>
<a href="https://github.com/vitejs/vite" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#github-icon"></use>
</svg>
GitHub
</a>
</li>
<li>
<a href="https://chat.vite.dev/" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#discord-icon"></use>
</svg>
Discord
</a>
</li>
<li>
<a href="https://x.com/vite_js" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#x-icon"></use>
</svg>
X.com
</a>
</li>
<li>
<a href="https://bsky.app/profile/vite.dev" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#bluesky-icon"></use>
</svg>
Bluesky
</a>
</li>
</ul>
</div>
</section>

<div className="ticks"></div>
<section id="spacer"></section>
<h1>Weather App</h1>
<LocationList />
</>
)
}
Expand Down
36 changes: 36 additions & 0 deletions vær/src/components/listItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@


type cityWeather = {
name: string
temperature?: number
precipitation?: number
nextDays?: { time: string; temperature: number | undefined}[]
}


const listItem = ({ city: item }: { city: cityWeather }) => {

return (
<li key={item.name} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#bcebff', color: '#000000', padding: '10px', borderRadius: '15px', width: '80%', marginRight: '5px' }}>
<span style={{ display: 'flex', }}>
{item.name}:
<span>
{typeof item.precipitation === 'number' && item.precipitation > 0.6 ? '🌧️' : '⛅'}
</span>
<p style={{ color: '#ff3232'}}>{typeof item.temperature === 'number' ? `${item.temperature.toFixed()}°` : '—'}</p>
</span>


<div style={{ display: 'flex', flexDirection: 'row', gap: '10px'}}>
{item.nextDays?.map((day) => (
<span key={day.time} style={{ color: '#ff3232' }}>
{typeof day.temperature === 'number' ? `${day.temperature.toFixed()}°` : '—'}
</span>
))}

</div>
</li>
)
}

export default listItem
Loading
Loading