From 280317b13545cc0b3899155435291a44addfca45 Mon Sep 17 00:00:00 2001 From: Kristian Date: Thu, 17 Sep 2026 20:48:03 +0200 Subject: [PATCH 1/4] emojis for neste dager --- src/components/listItem.tsx | 5 ++++- src/components/location-list.tsx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/listItem.tsx b/src/components/listItem.tsx index 352c3c8..fa79283 100644 --- a/src/components/listItem.tsx +++ b/src/components/listItem.tsx @@ -2,7 +2,7 @@ type cityWeather = { name?: string temperature?: number precipitation?: number - nextDays?: { time: string; temperature: number | undefined }[] + nextDays?: { time: string; temperature?: number; precipitation?: number }[] } const listItem = ({ city: item }: { city: cityWeather }) => { @@ -38,6 +38,9 @@ const listItem = ({ city: item }: { city: cityWeather }) => {
{item.nextDays?.map((day) => ( + {typeof day.precipitation === "number" && day.precipitation > 0.6 + ? "🌧️" + : "⛅"} {typeof day.temperature === "number" ? `${day.temperature.toFixed()}°` : "—"} diff --git a/src/components/location-list.tsx b/src/components/location-list.tsx index 0b5f007..b0a8586 100644 --- a/src/components/location-list.tsx +++ b/src/components/location-list.tsx @@ -35,6 +35,7 @@ const getNextDays = (data?: WeatherApiResponse) => { }) .map((entry) => ({ time: entry.time, + precipitation: entry.data.next_6_hours?.details?.precipitation_amount, temperature: entry.data.instant.details?.air_temperature, })) From f9578f0d1f83007c676c2b4a3cdd9bf8103cf383 Mon Sep 17 00:00:00 2001 From: Kristian Date: Thu, 17 Sep 2026 21:10:12 +0200 Subject: [PATCH 2/4] Responsitivity --- src/App.css | 20 ++++++++++++++++++++ src/components/listItem.tsx | 20 ++++++-------------- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/App.css b/src/App.css index a4bc79d..4db93d5 100644 --- a/src/App.css +++ b/src/App.css @@ -181,3 +181,23 @@ border-right-color: var(--border); } } + +.list-item { + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: #bcebff; + color: #000000; + padding: 10px; + border-radius: 15px; + width: 80%; + margin-right: 5px; + border: 1px solid #000000; +} + +@media (max-width: 512px) { + .list-item { + flex-direction: column; + height: auto; + } +} \ No newline at end of file diff --git a/src/components/listItem.tsx b/src/components/listItem.tsx index fa79283..2538b8b 100644 --- a/src/components/listItem.tsx +++ b/src/components/listItem.tsx @@ -1,3 +1,5 @@ +import "../App.css" + type cityWeather = { name?: string temperature?: number @@ -9,19 +11,9 @@ const listItem = ({ city: item }: { city: cityWeather }) => { return (
  • - + {item.name}: {typeof item.precipitation === "number" && item.precipitation > 0.6 @@ -35,9 +27,9 @@ const listItem = ({ city: item }: { city: cityWeather }) => {

    -
    +
    {item.nextDays?.map((day) => ( - + {typeof day.precipitation === "number" && day.precipitation > 0.6 ? "🌧️" : "⛅"} From 50eeb718b9da10bb2c144520581862c6181d0cfb Mon Sep 17 00:00:00 2001 From: Kristian Date: Thu, 17 Sep 2026 21:15:57 +0200 Subject: [PATCH 3/4] prettier --- src/App.css | 2 +- src/components/listItem.tsx | 18 +++++++++++------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index 4db93d5..a0846ca 100644 --- a/src/App.css +++ b/src/App.css @@ -200,4 +200,4 @@ flex-direction: column; height: auto; } -} \ No newline at end of file +} diff --git a/src/components/listItem.tsx b/src/components/listItem.tsx index 2538b8b..eeffeb1 100644 --- a/src/components/listItem.tsx +++ b/src/components/listItem.tsx @@ -9,10 +9,7 @@ type cityWeather = { const listItem = ({ city: item }: { city: cityWeather }) => { return ( -
  • +
  • {item.name}: @@ -27,12 +24,19 @@ const listItem = ({ city: item }: { city: cityWeather }) => {

    -
    +
    {item.nextDays?.map((day) => ( {typeof day.precipitation === "number" && day.precipitation > 0.6 - ? "🌧️" - : "⛅"} + ? "🌧️" + : "⛅"} {typeof day.temperature === "number" ? `${day.temperature.toFixed()}°` : "—"} From 78e7392a6e359ac4d676e510a7a1b9ace5f5a5b8 Mon Sep 17 00:00:00 2001 From: Kristian Date: Thu, 17 Sep 2026 22:03:41 +0200 Subject: [PATCH 4/4] stjerne stjerner LFG --- package-lock.json | 13 +++++++++++++ src/components/listItem.tsx | 13 +++++++++++-- src/components/starButton.tsx | 21 +++++++++++++++++++++ src/hooks/fetchWeather/types.ts | 2 +- src/index.css | 6 ++++++ 5 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 src/components/starButton.tsx diff --git a/package-lock.json b/package-lock.json index c06388b..5f36910 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,6 +60,7 @@ "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -886,6 +887,7 @@ "integrity": "sha512-YJ7EqCstVTzIr0fMr7qul/977en+pQHrfmuKIo6Zr9i75Be21dr3MovcfvGtyvi2HAUrRerWps5sMO9I7WaxDw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.18.0" } @@ -896,6 +898,7 @@ "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -955,6 +958,7 @@ "integrity": "sha512-zYvrmj9Yxd63UGaXw+kdt6A0F0s0qveJyuatIM77bYC2DE4pgmg7a50u8LR7PRtXd0x+h+Tl3eXabGm06SWd3Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.70.0", "@typescript-eslint/types": "8.70.0", @@ -1189,6 +1193,7 @@ "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1279,6 +1284,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.11.23", "caniuse-lite": "^1.0.30001810", @@ -1437,6 +1443,7 @@ "integrity": "sha512-NPXn6r5zl4uET1DAVPaOwzX3rut4c0wcmw3dWJAfOsTM5+TogXo0DDjz8pwm/hL8cyVNpHqeK4JpN0NjnyFFNw==", "dev": true, "license": "MIT", + "peer": true, "workspaces": [ "packages/*" ], @@ -1892,6 +1899,7 @@ "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -2339,6 +2347,7 @@ "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2436,6 +2445,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2584,6 +2594,7 @@ "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -2670,6 +2681,7 @@ "integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "lightningcss": "^1.33.0", "picomatch": "^4.0.7", @@ -2794,6 +2806,7 @@ "integrity": "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/components/listItem.tsx b/src/components/listItem.tsx index eeffeb1..38105d9 100644 --- a/src/components/listItem.tsx +++ b/src/components/listItem.tsx @@ -1,7 +1,8 @@ import "../App.css" +import StarButton from "./starButton" type cityWeather = { - name?: string + name: string temperature?: number precipitation?: number nextDays?: { time: string; temperature?: number; precipitation?: number }[] @@ -10,7 +11,15 @@ type cityWeather = { const listItem = ({ city: item }: { city: cityWeather }) => { return (
  • - + + {item.name}: {typeof item.precipitation === "number" && item.precipitation > 0.6 diff --git a/src/components/starButton.tsx b/src/components/starButton.tsx new file mode 100644 index 0000000..7831590 --- /dev/null +++ b/src/components/starButton.tsx @@ -0,0 +1,21 @@ +import { useAppStorage } from "../hooks/useStorage" + +const StarButton = ({ cityName }: { cityName: string }) => { + const { storage, toggleStarredLocation } = useAppStorage() + + const handleClick = () => { + toggleStarredLocation(cityName) + } + + return ( + + ) +} + +export default StarButton diff --git a/src/hooks/fetchWeather/types.ts b/src/hooks/fetchWeather/types.ts index 74b5b75..4699941 100644 --- a/src/hooks/fetchWeather/types.ts +++ b/src/hooks/fetchWeather/types.ts @@ -176,7 +176,7 @@ export type METJSONForecast = { } export type City = { - name?: string + name: string lat: number lon: number alt?: number diff --git a/src/index.css b/src/index.css index d028fa2..8d5f416 100644 --- a/src/index.css +++ b/src/index.css @@ -94,3 +94,9 @@ ul { list-style-type: none; /* Removes the dots */ padding: 0; /* Removes default left indentation */ } + +button { + border: none; + background: transparent; + cursor: pointer; +}