From 280317b13545cc0b3899155435291a44addfca45 Mon Sep 17 00:00:00 2001
From: Kristian <k.numme05@gmail.com>
Date: Thu, 17 Sep 2026 20:48:03 +0200
Subject: [PATCH 1/3] 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 }) => {
       <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
         {item.nextDays?.map((day) => (
           <span key={day.time} style={{ color: "#ff3232" }}>
+            {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 <k.numme05@gmail.com>
Date: Thu, 17 Sep 2026 21:10:12 +0200
Subject: [PATCH 2/3] 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 (
     <li
       key={item.name}
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        backgroundColor: "#bcebff",
-        color: "#000000",
-        padding: "10px",
-        borderRadius: "15px",
-        width: "80%",
-        marginRight: "5px",
-      }}
+      className="list-item"
     >
-      <span style={{ display: "flex" }}>
+      <span style={{ display: "flex", flexDirection: "row" }}>
         {item.name}:
         <span>
           {typeof item.precipitation === "number" && item.precipitation > 0.6
@@ -35,9 +27,9 @@ const listItem = ({ city: item }: { city: cityWeather }) => {
         </p>
       </span>
 
-      <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
+      <div style={{ display: "flex", flexDirection: "row", gap: "10px", alignSelf: 'end' }}>
         {item.nextDays?.map((day) => (
-          <span key={day.time} style={{ color: "#ff3232" }}>
+          <span key={day.time} style={{ color: "#ff3232", marginRight: "8px" }}>
             {typeof day.precipitation === "number" && day.precipitation > 0.6
             ? "🌧️"
             : "⛅"}

From 50eeb718b9da10bb2c144520581862c6181d0cfb Mon Sep 17 00:00:00 2001
From: Kristian <k.numme05@gmail.com>
Date: Thu, 17 Sep 2026 21:15:57 +0200
Subject: [PATCH 3/3] 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 (
-    <li
-      key={item.name}
-      className="list-item"
-    >
+    <li key={item.name} className="list-item">
       <span style={{ display: "flex", flexDirection: "row" }}>
         {item.name}:
         <span>
@@ -27,12 +24,19 @@ const listItem = ({ city: item }: { city: cityWeather }) => {
         </p>
       </span>
 
-      <div style={{ display: "flex", flexDirection: "row", gap: "10px", alignSelf: 'end' }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: "10px",
+          alignSelf: "end",
+        }}
+      >
         {item.nextDays?.map((day) => (
           <span key={day.time} style={{ color: "#ff3232", marginRight: "8px" }}>
             {typeof day.precipitation === "number" && day.precipitation > 0.6
-            ? "🌧️"
-            : "⛅"}
+              ? "🌧️"
+              : "⛅"}
             {typeof day.temperature === "number"
               ? `${day.temperature.toFixed()}°`
               : "—"}