added responsivity, improved error handling, improved styling

.gitignore

@@ -23,20 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-# Created by https://www.toptal.com/developers/gitignore/api/linux
+# Ignore environment variables
-# Edit at https://www.toptal.com/developers/gitignore?templates=linux
+.env
-
+.env.*
-### Linux ###
-*~
-
-# temporary files which can be created if a process still has a handle open of a deleted file
-.fuse_hidden*
-
-# KDE directory preferences
-.directory
-
-# Linux trash folder which might appear on any partition or disk
-.Trash-*
-
-# .nfs files are created when an open file is removed but is still being accessed
-.nfs*

src/App.vue

@@ -8,3 +8,9 @@ import Weather from './components/Weather.vue';
     <Weather />
   </div>
 </template>
+
+<style lang="scss">
+  #app {
+    width: 100%;
+  }
+</style>

src/components/Weather.vue

@@ -4,21 +4,34 @@ import {
   onMounted,
   onBeforeUnmount,
   watch,
-  computed
+  computed,
+  nextTick
 } from 'vue';
 import axios from 'axios';
 
-const apiKey = '226ab4dffe77ceefbbd0ba1309ec62b3';
+const apiKey = import.meta.env.VITE_OPENWEATHER_KEY;
 const city = ref('Köthen');
-const numPoints = 12;
 const forecast = ref(null);
 const loading = ref(true);
 const error = ref(null);
 
+const numPoints = computed(() => {
+  const w = chartWidth.value;
+  if (w < 400) return 5;     // Very narrow
+  if (w < 466) return 6;
+  if (w < 533) return 7;
+  if (w < 600) return 8;     // Medium narrow
+  if (w < 666) return 9;
+  if (w < 733) return 10;
+  if (w < 800) return 11;
+  return 12;                 // Default is 12
+});
+
 let intervalId;
 
-const chartHeight = 500; // Height of the graph in pixels
+const chartWidth = ref(0);
-const chartWidth = 800;  // Width of the graph in pixels
+const chartHeight = ref(0);
+const chartContainer = ref(null);
 
 // cities for dropdown
 const cities = ['Köthen', 'Magdeburg', 'Halle', 'Leipzig', 'New York'];
@@ -42,10 +55,25 @@ const fetchWeather = async () => {
 onMounted(() => {
   fetchWeather();
   
-  // Refresh every 60 seconds (60000 ms)
+  // Refresh every 30m
   intervalId = setInterval(() => {
     fetchWeather();
-  }, 60000);
+  }, 1800000);
+
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (let entry of entries) {
+      chartWidth.value = entry.contentRect.width;
+      chartHeight.value = entry.contentRect.height;
+    }
+  });
+
+  // Wait for DOM render
+  nextTick(() => {
+    if (chartContainer.value) {
+      resizeObserver.observe(chartContainer.value);
+    }
+  });
+
 });
 
 onBeforeUnmount(() => {
@@ -60,27 +88,30 @@ watch(city, () => {
 
 // computed values
 const minTemp = computed(() => {
-  if (!forecast.value) return null;
+  if (!forecast.value || !Array.isArray(forecast.value.list)) return null;
-  const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
+  const temps = forecast.value.list.slice(0, numPoints.value).map(item => item.main.temp);
+
   return Math.min(...temps);
 });
 const maxTemp = computed(() => {
-  if (!forecast.value) return null;
+  if (!forecast.value || !Array.isArray(forecast.value.list)) return null;
-  const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
+  const temps = forecast.value.list.slice(0, numPoints.value).map(item => item.main.temp);
+
   return Math.max(...temps);
 });
-// raw numeric positions
+
+// raw numeric values
 const numericValues = computed(() => {
-  if (!forecast.value) return [];
+  if (!forecast.value || !Array.isArray(forecast.value.list)) return [];
-  const temps = forecast.value.list.slice(0, numPoints).map(item => item.main.temp);
+  const temps = forecast.value.list.slice(0, numPoints.value).map(item => item.main.temp);
   const min = minTemp.value;
   const max = maxTemp.value;
   const tempRange = max - min || 1; // Prevent division by zero
-  const spacing = chartWidth / (numPoints - 1); // Horizontal spacing
+  const spacing = chartWidth.value / (numPoints.value - 1); // Horizontal spacing
 
   return temps.map((temp, index) => {
     const normalizedTemp = (temp - min) / tempRange; // Normalize between 0 and 1
-    const bottom = normalizedTemp * chartHeight; // Scale to chart height
+    const bottom = normalizedTemp * chartHeight.value; // Scale to chart height
     const left = index * spacing; // Evenly space points
     const temperature = temp;
 
@@ -88,13 +119,33 @@ const numericValues = computed(() => {
   });
 });
 
-// raw positions to string values with "px"
+// enriched values needed in the application
 const applicationValues = computed(() => {
-  return numericValues.value.map(vals => ({
+  if (!forecast.value || !Array.isArray(forecast.value.list)) return [];
+
+  let currentDayIndex = 0;
+  let lastHour = null;
+  
+  return numericValues.value.map((vals, index) => {
+    const hour = new Date(forecast.value.list[index].dt * 1000).getHours();
+
+    if (lastHour !== null && hour < lastHour) {
+      currentDayIndex++;
+    }
+    lastHour = hour;
+
+    return {
       bottom: `${vals.bottom}px`,
       left: `${vals.left}px`,
-    temperature: `<span class="short-temp">${Math.round(vals.temperature)}</span><span class="full-temp">${vals.temperature.toFixed(1)}</span> ºC`
+      temperature: `
-  }));
+        <span class="short-temp">${Math.round(vals.temperature)}</span>
+        <span class="full-temp">${vals.temperature.toFixed(1)}</span>
+        ºC
+      `,
+      dayIndex: currentDayIndex,
+      hour
+    };
+  });
 });
 
 // line properties (hypotenuse, angle)
@@ -112,6 +163,7 @@ const pointLines = computed(() => {
       angle: `${angleDeg}deg`
     });
   }
+  
   return lines;
 });
 </script>
@@ -132,9 +184,9 @@ const pointLines = computed(() => {
     <div v-if="loading" class="loading">Loading …</div>
     <div v-else-if="error" class="error">{{ error }}</div>
 
-    <div v-else>
+    <div>
-    <figure class="forecast-chart">
+      <figure ref="chartContainer" class="forecast-chart">
-      <ul class="forecast-line-chart">
+        <ul class="forecast-line-chart" v-if="forecast">
           <li class="line-chart-element"
             v-for="(item, index) in forecast.list.slice(0, numPoints)"
             :key="index"
@@ -152,20 +204,11 @@ const pointLines = computed(() => {
                 <div class="data-point-temperature" v-html="applicationValues[index]?.temperature"></div>
               </div>
             </div>
-          <div class="time-label">
+            <div class="time-label" :class="'day-'+applicationValues[index]?.dayIndex" v-html="applicationValues[index]?.hour+'h'">
-            {{ new Date(item.dt * 1000).getHours() }}:00
             </div>
           </li>
         </ul>
       </figure>
-    
-    <!--
-    <ul class="forecast-list">
-      <li v-for="(item, index) in forecast.list.slice(0, numPoints)" :key="index" class="forecast-item">
-        {{ new Date(item.dt * 1000).toLocaleString("de-DE") }}: {{ item.main.temp }}°C
-      </li>
-    </ul>
-    -->
     </div>
     
   </div>
@@ -179,7 +222,7 @@ const pointLines = computed(() => {
   padding: 2rem;
   background: #f0f4f8;
   border-radius: 10px;
-  // max-width: 600px;
+  width: 100%;
   margin: 2rem auto;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
@@ -242,9 +285,9 @@ const pointLines = computed(() => {
   .forecast-chart {
     border-bottom: 1px solid black;
     border-left: 1px solid black;
-    height: 600px;
+    height: 200px;
-    width: 900px;
+    width: 100%;
-    margin: 0;
+    margin: 3rem 0 0 0;
     padding: 1rem 4rem;
     position: relative;
 
@@ -258,7 +301,6 @@ const pointLines = computed(() => {
       .line-chart-element {
         position: absolute;
         left: var(--x);
-        //bottom: var(--y);
         transform: translate(-50%, 0);
         height: 100%;
         background-color: rgba(0,0,0,0.1);
@@ -333,8 +375,17 @@ const pointLines = computed(() => {
         color: black;
         position: absolute;
         bottom: -2.5em;
+        left: -0.6em;
+        &.day-0 {
+          color: black;
           font-weight: bold;
-        left: -1em;
+        }
+        &.day-1 {
+          color: grey;
+        }
+        &.day-2 {
+          color: lightgray;
+        }
       }
     }
   }